D3js

D3 Experiments

Different Reusable Data visualization using D3.js

Angular Bar Chart Component

• Vertical Bar Chart - Vertical Bar chart with top and bottom chart data connection

Fifa WorldCup 2014 Visualization

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.

• Demo

London Underground Tube map

Interactive representation with network diagram. It has deep level information. There is animation of entry and exit. It shows the statics with bar diagram.

• Demo

Bar Diagrams

• 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 Area Graph

• Bit Coin Bar Area - Bar Area chart fetched from API

Donut Charts

• 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

Force Directed Graph

• Basic Force Directed Graph - Simple Force Directed Graph

US Gun Crime Demostration

• Map,Bar and Force Directed - Web app with map, bar chart, force directed graph and some user interaction

Heatmap

• 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

Dashboards

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.

Line Area Chart

• Ineractive Line Area Chart - Simple Line Area chart with Slider interaction

Line Charts

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

US Map

• Map with some confidence data

Australia Student Immigration Representaiton

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..

• Map with some confidence data

Organic Chart

• Nested Circle and Circle spawn representation

Network Monitoring Dashboard

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.

Multiple Line Chart Dashboard

• 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

Radial Histogram

Simple Radial Histogram - Simple Radial Histogram with dynamic color

Spawn Cirlces

Spawn Circle - Proof of Concept (Un finished)

Table Representation

Tabular Demo - Tabular Representation of DataSet

Dynamic Table Representation

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

Demo

Tree Diagram

Simple Tree Diagram 1 - Simple Tree Diagram 1

Simple Tree Diagram 2 - Simple Tree Diagram 2

Stream Graph

Simple Stream Graph - Simple Stream Graph

Stacked Chart

Stacked Chart - Stacked Chart

• Combination of line chart, Bar chart , area cover
• Pan and Zoom on X-axis only