Introduction to D3.js (Data Driven Document)

Introduction to D3.js  (Data Driven Document)


What is D3.js?

It is a javascript scriting language. It completely works on DOM and svg

if the data is entered , the data can be represented in the form of chart , bar graph, candles etc


Basic Fundamentals

The basic fundamentals required are

  • Html
  •  Css
  •  Javascript
  •  DOM
  •  SVG 
  •  D3.js

Environment Setup required for D3.js are

  • Web browser
  • Editor
  • Webserver
  • D3 library



Web browser : There are lot of web browser for example : Chrome ,safari, Mozilla etc


 Editor : A tool where we can write the code Eg: notepad, notepad++, netbeans, eclipse

Webserver : A server which is used for server side programming language . Ex : Apache

D3 library
How to download the D# library

a) Click on the following linl https://d3js.org

From the above link you can download the latest library


In your code you can use

    <script type="text/javascript"  src="d3.min.js"></script>


b) D3 library can be used directly from the CDN library . you will need to have internet connection for working this

    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

The following type of graphs can be built programatically using the javascript d3 library



The below is the mentioned list of graph which can be achieved dynamically in program level


Statistics using D3.js graph


  • Uniform distribution
  • Normal distribution
  • Linear regression

Visual Index  using D3.js graph

  • Dendrogram
  • Force-Directed Graph
  • Circle Packing
  • Population Pyramid
  • Stacked Bars
  • Streamgraph
  • Box Plots
  • Bubble Chart
  • Bullet Charts
  • Calendar View
  • Non-contiguous Cartogram
  • Chord Diagram
  • Sunburst
  • Node-Link Tree
  • Treemap
  • Voronoi Diagram
  • Hierarchical Edge Bundling
  • Voronoi Diagram
  • Symbol Map
  • Parallel Coordinates
  • Scatterplot Matrix
  • Zoomable Pack Layout
  • Hierarchical Bars
  • Epicyclical Gears
  • Collision Detection
  • Collapsible Force Layout
  • Force-Directed States
  • Azimuthal Projections
  • Choropleth
  • Collapsible Tree Layout
  • Zoomable Treemap
  • Animated Béziers
  • Zoomable Sunburst
  • Collatz Graph
  • Parallel Sets
  • Word Cloud
  • Obama's Budget Proposal
  • Facebook IPO
  • US Trade Deficit
  • Sequences sunburst
  • NFL Predictions
  • Koalas to the Max
  • Sankey Creator
  • Convert any page into bubbles
  • D3 Builder

  • Zoomable Partition Layout
  • Zoomable Area Chart
  • Drag and Drop Collapsible Tree Layout
  • Rotating Cluster Layout
  • Sankey Diagram
  • Fisheye Distortion
  • Hive Plot
  • Co-occurrence Matrix
  • Motion Chart
  • Chord Diagram
  • articles
  • Indented Tree
  • Rounded Rect
  • Tadpoles
  • Showreel
  • Euro Debt
  • Labeled Force Layout
  • Circle-Square Illusion
  • Voronoi Picking
  • Zoomable Map
  • Raindrops
  • Color
  • Hacker News Popularity
  • Life Expectancy
  • Slopegraphs
  • Parallel Coordinates
  • NCAA Predictions
  • Cubism.js
  • Crossfilter.js
  • Wind History
  • spacetime
  • d3 Analog Clock Dashboard
  • Concept network browser
  • Circular heat chart
  • Timeseries
  • Directed Graph Editor
  • Weeknd3
  • Explosions
  • CodeFlowers
  • Animated wind chart
  • What makes us happy?
  • Simple SOM Animation
  • A mower demo
  • Confusion Matrix
  • Binary tree with transitions
  • D3 JezzBall
  • Tetris
  • Gantt Chart
  • Cubic Hamiltonian Graphs
  • Force-Directed Voronoi
  • Trulia Trends
  • Trulia Trends
  • Open Budget
  • Bederson Publications
  • Force Layout Editor
  • Hierarchical Classification Tree
  • Gene Expression
  • Day/Hour Heatmap
  • Sunburst and parse.com
  • Worldwide remittance flows
  • Language Network
  • Wimbledon 2013
  • Force directed tag/site explorer
  • Circos.js Airline data from Fusion Tables
  • Geographical hexbins
  • xkcd-style Comic Narrative Charts
  • GitHub Visualizer
  • WorldBank Contract Awards
  • Site or blog concept browser
  • Global power structure
  • Choropleth on canvas
  • Google calendar like visualization
  • Kagi Chart
  • Wikistalker - Wikipedia Visualization
  • D3 Cesium - Health and Wealth of Nations
  • Starpaths
  • Kent + Sussex river levels mapped
  • CoreNLP Sentence Parse Tree
  • Publications in journals over time
  • Another state budget visualization with open api
  • Interactive Bible contradictions & bar charts 
  • Force Edge Bundling For Graphs
  • Gauge
  • Bullet Charts
  • Arc Axis
  • Bar chart with tooltips
  • Tokyo Wind Map
  • Dependency Wheel
  • 60 years of french first names
  • Hip Replacement by State
  • Compare time series with irregular interval
  • Table with Embedded Line Chart
  • Dual-scale Bar Chart
  • Animated Pie and Line Chart
  • Multivariate Data Exploration with Scatterplots
  • Live Power Outages In Maine
  • Relative Size Of The Planets
  • AWS EC2 Price Comparison Chart
  • Condegram Spiral Plot
  • Dot Matrix Chart
  • Reusable VIS Components(responsive)
  • Epidemic Game UK Temperature Graphs
  • Data Heatmap with Sorting Functions
  • 3D Force Layout
  • Lifespan
  • Choropleth word map
  • word of the day The Movie Network
  • Graceful Tree Conjecture
  • Top Scorers in 2013/14 Champions League - Breakdown analysis
  • Sankey: How a Georgia bill becomes law
  • A game based on d3
  • Viroscope - virus taxonomy viewer
  • Simple Dashboard
  • Density and Quantile Graphs
  • Visualizing MBTA Data
  • Sum of First n Numbers
  • Animated Historical Weather Maps
  • Visualizing Walking with Smartphone Accelerometers
  • Cycloid Optical Illusion
  • Alternative Calendar View
  • Twitter & Reddit topics during week one of MH-370's disappearance
  • Elliptic Forces
  • SizeViewer
  • OrgoShmorgo
  • Fund Visualization
  • Zoomable sunburst with updating data
  • US State Map
  • US Choropleth Plus Bar Chart
  • Aster Plot
  • Smallest Convex Polygon
  • Shooter
  • Sunburst for your skill map
  • Network of soccer passes
  • Choropleth with svg filter
  • Psychedelic British Isles
  • Interactive Unit Circle (Trigonometry)
  • Days-Hours Heatmap
  • Trend Chart (Area + Line)
  • Create D3 Visualizations
  • -
  • Node Focusable Tree

  • Tarot Card App made with D3 + Meteor framework
  • Ulam Spiral
  • Animated Chord Diagram
  • SOM Hexagonal Heatmap

  • Dataviz tree
  • UK Temperature 1910-2014
  • Simple Bubble Chart
  • Collapsible 2-Way Tree Layout

  • Animated Pie
  • Exoplanets in Orbit
  • Worldcup'14 Drag & Drop Brackets
  • A Scatterplot as Bar chart

  • Conway's Game of Life
  • Editable tree mixing d3 & Angular
  • SFDC Training Videos
  • Editable Sankey with self-loops

  • England & Wales house price animation
  • Bi-directional Zoom and Drag D3 dependency tree
  • Interactive Force Directed Graph
  • Selectable / Zoomable / Centerable Force Directed Graph F1 Timeline

  • Geocenter of F1 venues
  • Access Quandl aggregator
  • Religions in Romania on colorwheels
  • Sunburst bilevel partition with tooltips 

  • Russian Budget: 1937 to 1950
  • Liquid Fill Gauge
  • Interactive Bubble Menu
  • Global center of higher education: university rankings

  • Linked Geographic and Tree Maps
  • Bi-directional Hierarchical Sankey
  • 2 Interactive Colorwheels + Zoomable World Map
  • Radial Boxplot

  • Pazzla: Mosaics of Instagram Pictures
  • Pazzla: Mosaics of Instagram Pictures Community Pop-Culture References Heatmap
  • Community Pop-Culture References Heatmap Top baby names bump chart
  • Real time electric consumption in Spain 
  •  Electric consumption in Spain - latest 24h
  • Zoomable Unilevel Partition
  • Apps Script dependency analysis
  • Editable Tree 
  •   Automated Biography of a Nation
  •  
  • Star Wars Character Profiles
  • Global Refugee Flows - 2 Dynamic Chord Diagrams
  • Ontology Visualization 

  • Vertical Sankey


  • Visualizing a genetic algorithm Create D3 Visualizations
  • Rectangular Area Chart
  • Gaussian curve from random variable

  • UK Economy as a Network
  • Contouring Comparison

  • Force Directed Graph with search and subset view
  • A circular flow diagram (Sankey meets Chord diagram)

  • Re-usable Sankey
  • Compare Results with Waterfall Charts Small Multiple Circle Packing Nested Layouts


  • Radar Chart Redesign Volcano Plot with Voronoi Overlay Fitbit Bullet Charts What Kills Us 
  • Cluster Purity Visualizer
  •   Platlets
  •   Map with Latitude & Longitude
  •   Higher education data explorer by parliamentary constituency
  •  
  • Clustergrammer: interactive clustergram/heatmap maker
  •   Spirograph
  •   Interactive Bar/line/scatter
  •   Timeline Chart
  •  
  • Tree of Life
  •   Change points in social networks
  •   NFL and NBA Team Skills
  •   KnowledgeMap
  •  
  • Galaxy Chart
  •   Configurable circular timer
  • Clock built with Configurable circular timer
  • traversable pie menu

  • Relationship Graph
  •   Time Data Availability
  •   University Program Transfers - Interactive
  •   Sankey + Leaflet: Map of Migration in the 2014 Maldives Census
  •  
  • BiPartite Viz
  • Gauge Viz
  • Chord Viz
  • Bosnia and Herzegovina 2013 Census Visualization

  • 3D Torus with Force Layout
  • 3D Honeycomb Bar Chart
  • 3D Bar Chart
  • Chord Viz
  •   Relationship using D3.js graph
  • Relationship Interactive Bubble Chart
  •   US H1b Worker Salaries
  • H1b Salaries visualization with D3 v4 Correlation Matrix
  • Map and context with brushing
  • Interactive Sales Data Pie Chart
  • Bertifier - to visually encode and reorder data
  • Font co-usage Force-directed graph (v4)
  • Open Knowledge Festival
  • Motion Capture Data
  • Spot Matrix Chart
  • Tally Chart
  • MindMap
  •   Interactive Force Directed Graph in D3v4
  •   Grid systems for D3 charts mock-ups
  •   Parabola Multiplication
  •   Nonogram Game
  •   Spinning Pie Chart
  •   Deep Learning Snake Game
  •   Ball of string
  •   Force Directed Graph Labeled
  •   Federal Contractors Sunburst with Panel and Icons
  •   Government Spending Sankey with Panel
  •   Fisheye Navigation and viewing for Google Sheets
  •   Federal Accounts Dendrogram

Basic Charts using D3.js graph ((Data Driven Document))

  • Area Chart
  • Line Chart
  • Bivariate Area Chart
  • Multi-Series Line Chart
  • Stacked Area Chart
  • Bar Chart
  • Stacked Bar Chart
  • Normalized Stacked Bar Chart
  • Grouped Bar Chart
  • Scatterplot
  • Donut Chart
  • Pie Chart
  • Donut Multiples
  • Bar Chart with Negative Values
  • Animated Donut Chart with Labels
  • Stacked Bar Charts on time scale
  • Bar Chart Multiples
  • d3pie - pie chart generator and lib
  • 3D Donut
  • Gradient Pie
  • 100% Stacked Bars
  • Interactive Scatterplot
  • Interactive Multi-Metric Bars
  • United States Map with Mapbox Tiles
  • Waterfall Chart
  • Diverging Stacked Bar Chart
  • World Map with heat color Example
  • Twitter stream geographical visualization
  • Dendrogram + Grouped Bar
  • Multiseries Floating Bar Chart
  • Interactive Gantt Chart
  • Scree Plot
  • Largest rectangle in histogram


Techniques, Interaction & Animation using D3.js graph ((Data Driven Document))

  • General Update Pattern
  • Sortable Bar Chart
  • van Wijk Smooth Zooming
  • Progress Events
  • Margin Convention
  • Focus+Context via Brushing
  • Difference Chart
  • Pie Chart Update
  • Hexagonal Binning
  • Contour Plot
  • Build Your Own Graph
  • Modifying a Force Layout 
  • Spline Interpolation
  • Dispatching Events
  • Better force layout selection
  • v45 web theme using SVG
  • Interactive force layout
  • EventDrops: Zoomable time series
  • Draggable scatterplot with motion trails
  • Horizontally grouped bar chart
  • Band Zoom
  • Item explorer
  • Image Map
  • Voronoi diagram second level
  • Firework ~ Night
  • DNA Electrophoresis Simulator
  • Atoms,Molecules and Chemistry
  • Interactive Bar Chart


```

Maps using D3.js graph ((Data Driven Document))

  • US States
  • US States with Dropdown Selector
  • World
  • US States - Choropleth Bar
  • US States Map - Side by Side
  • UK Election choropleth
  • World rivers














d3.js tutorial ,d3.js graph list , d3.js tutorial, d3 charts name (Data Driven Document) for beginners