Different Reusable Data visualization using D3.js
- Vertical Bar Chart - Vertical Bar chart with top and bottom chart data connection
It has interactive representation of bar, network, higher level user interaction.User can click on the country name to get overview insight where it will show how much goal has occured. Goal difference is representation with link diagram.
Interactive representation with network diagram. It has deep level information. There is animation of entry and exit. It shows the statics with bar diagram.
- Horizontal Bar Diagram - Simple Horizontal Bar Diagram with tooltip
- Horizontal Bar With Grid - Simple Horizontal Bar Diagram with Grid
- Interactive Bar Diagram - Change the orientation of Bar Diagram between Vertical and Horizontal
- Mixed Bar Chart - Mixed Bar chart with colors
- Time Series Bar Chart - Time Series Bar Chart
- Bit Coin Bar Area - Bar Area chart fetched from API
- Simple Donut Chart - Simple Donut Chart using circle
- Rotating Donut Chart - Simple Rotation Animation
- Donut Chart with Area - Some portions are filled by circle area
- Donut Chart Using Arc - Simple Donut Chart using ARC method
- Basic Force Directed Graph - Simple Force Directed Graph
- Map,Bar and Force Directed - Web app with map, bar chart, force directed graph and some user interaction
- Simple Static Heatmap - Simple Static Heatmap
- Mutli Colored Heatmap - Heatmap with multi color grid
- Complex Single and Multi Heatmap - Single and Complex heatmap with Multiple layer
Below are the some dashboards with different charts with interaction.
- Web Application - Web Application with slide shows
- Pie Chart - Product Dashboard with pie chart
- Map and Barchart - Us map and bar chart
- Line,Pie,Bar and Heatmap - Wifi Count monitoring dashboard built with node.js. It has Line chart based on daily, Pie chart based on daily , Weekly based on Bar chart and All time with Heatmap. The chart is responsive.
- Ineractive Line Area Chart - Simple Line Area chart with Slider interaction
These are some line charts with different interaction. Please see the demo.
-
Interactive Line Chart Dashboard 1 - Some features are
- User can pan and zoom
- User brush for focus and context
- User can add point of interest with circle on top of line
- User can drag the point of interest circle along the line
-
Interactive Line Chart Dashboard 2 - Some features are
- User can pan and zoom
- User brush for focus and context
- User can add point of interest with circle on top of line
-
Threshold Line Chart - Some features are
- User brush for focus and context
- User can specify the threshold value for the color of line.
- The value below the threshold will have one color and the value above the threshold will have another color.
-
Bitcoin API Line - Some features are
- API of blockchain.info
- User brush for focus and context on the window of the chart
- User can change data [Each data uses different API]
- Simple tooltip
The international student immigration is represented with some info. The interactive map shows from where the student is coming to Australia with flight route line connection concept. To get more information user can hover on the country. To see the bar chart click on respective country..
This dashboard uses parallel coordinates, scatter plot, line charts
- Live Demo - Some Features
- User can filter the data in different ways.
- When user hover over the scatter plot the point of interested will be highlight in all other charts
- Scoreboard and the line to indicate the point of interest on scatter plot.
- Live Demo - Some Features
- Different data attributes with multiple axis
- Filtering , dragging, zoom, Add point of intrest , Add Flag (for highlight)
- Sorting for the point of interest
- Remove the flags, slope line
- Draw slope line
- Implemented based on React,Redux and D3
Simple Radial Histogram - Simple Radial Histogram with dynamic color
Spawn Circle - Proof of Concept (Un finished)
Tabular Demo - Tabular Representation of DataSet
User can upload any CSV. Then the app detects the type of headers and data type such as categorical, numerical or string. Based on data type categorical is represented by bar chart, string as string, numerical data as histogram. User can filter the data by clicking category on header. To toggle histogram distribution on header simply click onf/off on header
Simple Tree Diagram 1 - Simple Tree Diagram 1
Simple Tree Diagram 2 - Simple Tree Diagram 2
Simple Stream Graph - Simple Stream Graph
Stacked Chart - Stacked Chart
- Combination of line chart, Bar chart , area cover
- Pan and Zoom on X-axis only