data-viz-workshop-2021

D3.js

D3 - Data Driven Documents is a javascript library that helps to create powerful visualization by manipulating documents based on data. It uses web technologies like HTML, SVG, Canvas and CSS to make interactive graphs and charts. Arbitrary data can be bound to a Document Object Model (DOM) using D3 and then apply transformation to the document. For example, D3 can be used to generate an HTML table or a SVG bar chart with the given data. The choice is up to the user. Here are the examples of table and a bar chart using D3.

table

var data = [
    {year: 2012, value: 45},
    {year: 2013, value: 47},
    {year: 2014, value: 52},
    {year: 2015, value: 70},
    {year: 2016, value: 75},
    {year: 2017, value: 85}
];

var columns = ['year', 'value'];

// append a table to a div with id="table"
var table = d3.select('#table').append('table');
var thead = table.append('thead');
var	tbody = table.append('tbody');

// append the header row
thead.append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.text(function (column) { return column; });

// create a row for each object in the data
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');

// create a cell in each row for each column
var cells = rows.selectAll('td')
.data(function (row) {
    return columns.map(function (column) {
    return {column: column, value: row[column]};
    });
})
.enter()
.append('td')
.text(function (d) { return d.value; });

barchart

var data = [
    {year: 2012, value: 45},
    {year: 2013, value: 47},
    {year: 2014, value: 52},
    {year: 2015, value: 70},
    {year: 2016, value: 75},
    {year: 2017, value: 85}
];

var width = 400;
var height = 300;

var svg = d3.select("#new_barchart")
        .append("svg")
        .attr("width", 600)
        .attr("height", 500);

var xScale = d3.scaleBand().range([0, width]).padding(0.4);
var yScale = d3.scaleLinear().range([height, 0]);

var g = svg.append("g").attr("transform", "translate(" + 100 + "," + 100 + ")");

xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

g.append("g")
.attr("transform", "translate(0," + 300 + ")")
.call(d3.axisBottom(xScale))

g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
    return "$" + d;
}).ticks(10))
.append("text")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("value");

g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.year); })
.attr("y", function(d) { return yScale(d.value); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.value); });

One of the cool and advance features of D3 is it allows graphs to be interactive. It allows us to zoom and pan around the graph to visualize it more accurately and interactively.

Here are some of the examples of such features:

Zoomable Scatterplot

Zoomable Line chart

Features of D3

Uses Web Standards: D3 is an extremely powerful visualization tool to create interactive data visualizations. It exploits the modern web standards: SVG, HTML and CSS to create data visualization.
Data Driven: D3 is data driven. It can use static data or fetch it from the remote server in different formats such as Arrays, Objects, CSV, JSON, XML etc. to create different types of charts.
DOM Manipulation: D3 allows you to manipulate the Document Object Model (DOM) based on your data.
Data Driven Elements: It empowers your data to dynamically generate elements and apply styles to the elements, be it a table, a graph or any other HTML element and/or group of elements.
Dynamic Properties: D3 gives the flexibility to provide dynamic properties to most of its functions. Properties can be specified as functions of data. That means your data can drive your styles and attributes.
Types of visualization: With D3, there are no standard visualization formats. But it enables you to create anything from an HTML table to a Pie chart, from graphs and bar charts to geospatial maps.
Custom Visualizations: Since D3 works with web standards, it gives you complete control over your visualization features.
Transitions: D3 provides the transition() function. This is quite powerful because internally, D3 works out the logic to interpolate between your values and find the intermittent states.
Interaction and animation: D3 provides great support for animation with functions like duration(), delay() and ease(). Animations from one state to another are fast and responsive to user interactions.

Some other javascript data visualization libraries

References

https://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js
http://bl.ocks.org/jfreels/6734025
https://www.d3-graph-gallery.com/graph/line_brushZoom.html
https://www.d3-graph-gallery.com/graph/interactivity_zoom.html