https://github.com/hijiangtao/ss-vis-component

VIS components for a security system, to monitor the state and confirm the system's health running.
https://github.com/hijiangtao/ss-vis-component

chart d3js data-visualization monitor vis-components

Last synced: about 1 month ago
JSON representation

VIS components for a security system, to monitor the state and confirm the system's health running.

• Host: GitHub
• URL: https://github.com/hijiangtao/ss-vis-component
• Owner: hijiangtao
• License: mit
• Created: 2015-08-19T09:14:54.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-30T15:59:48.000Z (over 7 years ago)
• Last Synced: 2024-03-19T18:21:00.300Z (9 months ago)
• Topics: chart, d3js, data-visualization, monitor, vis-components
• Language: JavaScript
• Homepage: https://hijiangtao.github.io/ss-vis-component/
• Size: 2.54 MB
• Stars: 91
• Watchers: 8
• Forks: 44
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ss-vis-component

VIS components for a security system, to monitor the state and confirm the system's health running. All codes were wrote based on `D3.js version 3.x`.

## Introduction

This is a demo project of my work about how to visualize charts with pure d3. Current pages are loaded from one js file `integrateIndex.js`, all initialize, update and fake data generating methods are included. 

Each type of chart include `generate` and `redraw` methods, all 11 types of charts are defined in `methods` of Vue defining part. I will extract them out and then explain them briefly if someone are interested in this work.

 

## Component Methods

### Sensor Memory Monitor (Single Area Chart)

For example, you can find the function below in the file can use it to create a new instance.

```

function displayMem()

```

For complete usage of all kinds of charts, please see the complete [Docs](./DOC.md).

## DEMO

Here are some pictures of the running cases, includes both visualization cards, charts and customized monitor map. See more examples at [here](https://hijiangtao.github.io/ss-vis-component/).

![DEMO 1](/assets/SSComponent-Intro-1.png 'DEMO 1')

![DEMO 2](/assets/SSComponent-Intro-2.png 'DEMO 2')

![DEMO 3](/assets/SSComponent-Intro-3.png 'DEMO 3')

## Remaining BUGS

When some extra dots in charts (line chart / area chart) are removed from the svg, the tooltips of remaining dots seems to point false info in its secondary dot (Two dots will exist in one x-axis, such as the write and read dots in charts. For the development of showing different dots' tooltip, we call one dot is chief one while another's secondary). I found it is the updating codes' running order in d3 that causes the problem. Since I am now busy with other thing, I will not fix the display bugs in time, but it's welcomed for you to report the fixing methods.

## Contribute

Welcome to open issues and tell me your wonderful ideas. 

## LICENSE

MIT

Joe Jiang

2017.2