learn d3.js in 90 minutes
TRANSCRIPT
LEARNING D3.JS IN 90MINUTES
THIS SESSION~ WHAT ARE WE GOING TO DO ~
BEFORE WE STARTGet the code from:
You need a webserver for some of the examples:IntelliJ supports this (right click on HTML and run)Easiest is with python: check if you can run:
https://github.com/josdirksen/d3exercises
python -m SimpleHTTPServer (for Python 2) python3 -m http.server (for Python 3)
If not download the mongoose webserver, and you have
WHO AM ILove writing, and talking about technology (frontend as well
as backend). Writing about stuff for Packt and Manning
Twitter: Github: Contact me: Blog at:
@josdirksenhttp://www.github.com/josdirksen
Plug: Expert Data Visualization with D3.js (Q1 2017)
WHAT ARE WE GOING TO DOI'll introduce a subject (couple of minutes)I'll Explain the exerciseYou can fill in the blanks in the provided code.
// Step 2. We can also select multiple elements. Use d3.select and // d3.selectAll to see the difference when selecting all the // <li> elements, and use either classed or attr to set the class// of these elements to 'step2'.
// d3.selectAll(...).classed(..., ...)
Halfway during the exercise I'll push an answer to git andDon't hesitate to ask questions!
WE'RE GOING TO TRY AND COVER...Learn how D3.js binds data to DOM elements.Make basic charts and diagramsVisualize hierarchical dataShow connected graphsCombine gis/geo information with opendataMake art with voronois
WHAT AREN'T WE GOING TO COVERD3.js is big, very big. We'll explore the basics for data
visualization, but there is a whole lot more. Most importantstuff we skip:
User interaction, mouse events, drag events.AnimationsZooming & draggingStreaming dataloading and queue dataTypescript, ES6, Scale.js bindings...
D3.JS INTRODUCTION
WHAT IS D3.JS"D3.js is a JavaScript library for manipulating documentsbased on data. D3 helps you bring data to life using
. D3's emphasis on web standards gives you thefull capabilities of modern browsers without tying yourself toa proprietary framework, combining powerful
and a to DOMmanipulation." --- d3js.org
HTML,SVG, and CSS
visualizationcomponents data-driven approach
WHAT IS IT NOTNot a charting library: But provides the building blocks(see nvd3.js, Rickshaw.js, c3.js).Not a drawing library: Doesn't draw data itself, uses SVGfor visualization.Not an SVG abstraction layer: Manipulates the DOM andSVG directly.Not a Canvas/WebGL library: Minimal support for Canvas,for WebGL use Three.js.Not a framework: Can be used with Angular 1/2, React,Vue.js, , is just a (very extensive) library.
ONLINE INFORMATIONLots of online resources,
Most for v3. current version is v4.API:
Bit overwhelming..But won't be in about 80 minutes
https://github.com/d3/d3/blob/master/API.md
WORK BY EXAMPLEUsually easier to work from examplesBest starting point: Most examples still use v3 however..
https://bl.ocks.org/
HELLOWORLD OF D3.JS
HELLOWORLD OF D3.JSGoal of this first example, is to learn how you can select
elements with D3.js, append new ones, remove elements, andset basic properties on the elements.
SELECTIONSd3.select and d3.selectAll
Uses the W3C selection syntax: uses querySelectorand querySelectorAll
Examples:d3.selectAll('p') // Select all p elements in the document. d3.select('p') // Select first p element in the document. // Selects 1st span element of all <p> in the document d3.selectAll('p').select('span') d3.select('#id') // select on id d3.select('.classname') // select on css class
WE CAN CHANGE THE PROPERTIESOFF THESE SELECTIONS
attr(), style(), html(), text(), classed()
Value can also be a function:
d3.selectAll('img.thumb').attr('height', 50) d3.selectAll('span').style('color', 'steelblue') d3.selectAll('span').html('<strong>d3.js</strong>') d3.selectAll('span').text('content') // conditionally set or remove classes d3.select('div').classed('container', true)
// d is bound data, i is the index d3.selectAll('img').attr('src', function(d, i) { return 'image' + i + '.png'; });
MODIFY THE SELECTIONappend(): Append child to each element of selection
remove(): Remove all the elements in the selection
insert(): Insert an element before another element
d3.selectAll('p').append('span').
// remove the first li of every lu d3.selectAll('ul').select('li').remove()
// insert a new span as the first element of the p d3.selectAll('p').insert('span', ':first-child');
Selections are immutable, these actions return newselections, so we can chain them!
BUT JQUERY CAN DO...With you manipulate elements from a selection,with you bind data (next example)
has many data visualization utils and APIs and focusses on web app related plugins.
But there is a big overlap
both are librarieshave and use a .
Similar to D3.js: Raphael.js and Processing.js
jQueryD3.js
D3.jsjQuery
DOM manipulationCSS/W3C selectors
fluent API
LET'S GET STARTED$ git clone https://github.com/josdirksen/d3-exercises $ python -m SimpleHTTPServer
Once again, if you don't have python, you can usemongoose:
View at http://localhost:8000/src/exercise-01/E01.html
EXERCISE 1: LEARNING D3.JSFollow steps described in:<ROOT>/src/exercise-01/js/E01.js
Use d3.select(), d3.selectAll(), class(),attr(), append(), remove(), html(), text()If needed reference D3.js select API:
You'll get approximately 5 minutes.https://github.com/d3/d3-selection
Should you have question? Please ask.
USE DATABINDINGWITH D3.JS
D3.JS DATA BINDINGLearn how to create data driven document by usin the basicselect(), enter(), merge(), remove() cycle when
binding data to a selection
BASIC DATABINDINGBind data to a selection with data(...)
<!-- Input Dom --> <span></span> <span></span> <span></span> <span></span>
var values=['a', 'b', 'c']; d3.selectAll('span') .data(values) .text(function(d) {return d});
<!-- Output Dom --> <span>a</span> <span>b</span> <span>c</span> <span></span>
DATA DRIVEN ELEMENTSAssume an empty DOM
var values=['a', 'b', 'c']; var selection = d3.selectAll('span').data(values)
A selection is actually more than just the found elements
enter(): placeholder selection for unbound data // for all unbound data append a span attribute selection.enter().append('span').text(function(d) {return d});
exit(): placeholder selection for le�over elements // remove all the leftover elements selection.exit().remove()
LEADS TO THIS PATTERNfunction update(values) { // select all the current span elements and assign the data var selection = d3.selectAll('span').data(values) // for the unbound data, create a new span, and attach a class var newElements = selection.enter() .append('span') .attr('class', 'someClass');
// Merge combines two selections. For the combined selection // set the value of the span to the bound datum. newElements.merge(selection).text(function(d) {return d});
// and remove the now obsolete elements selection.exit().remove(); }
This is the basic pattern you use to bind data, add new DOMelements, updated existing ones, and remove obsolete ones.
WHICH PROVIDES US WITHAn easy way to let our data determine our elements.Reduces unnecessary creation of elements.Allow all kinds of hooks e.g. for animations.
// assume values contains some random numbers function update(values) { var selection = d3.selectAll('circle').data(values) var newElements = selection.enter() .append('circle') .attr('class', 'someClass') .attr('cx', function(d, i) {return i * 50}) .attr('cy', function() {return 50}) .merge(selection) .transition().duration(2000) .attr('r', function(d, i) {return d});
// and remove the now obsolete elements selection.exit().remove(); }
EXERCISE 2: GOAL
EXERCISE 2: DATABINDINGFollow steps described in:<ROOT>/src/exercise-02/js/E02.js
Use (same as previous) and enter(), exit(),append(), remove()If needed reference D3.js select API:
If time permits look at transistions API:
You'll get approximately 5 minutes.
https://github.com/d3/d3-selection
https://github.com/d3/d3-selection
Should you have question? Please ask.
BASIC CHARTS ANDDIAGRAMS
BASIC CHARTS AND ELEMENTSLearn how to create basic charts and elements using scales
and generators.
SVG, GROUPS AND POSITIONINGAbsolute positioning:
<rect x="100", y="100"></rect> <circle cx="100", cy="100"></circle>
Provides a g element for grouping
g doesn't have an x or y like attribute, uses transformAll attributes on this element apply on children<g transform="translate(50 200)">...</g> <!-- positioning --> <g transform="scale(0.5 0.3)">...</g> <!-- sizing --> <g transform="rotate(45)">...</g> <!-- rotate the g -->
These actions can be combinedBut positioning is still difficult
POSITIONING WITH SCALESA scale translates an input domain to an output rangeDifferent scales ( )
: continuous input to continuous outputscalePow, scaleLog, scaleTime
: continuous input to interpolatorscaleQuantize: continuous input to discrete rangescaleQuantile: sampled input to discrete rangescaleThreshold: scaleQuantize with thresholdsscaleOrdinal: discrete input to discrete range
, scalePointLots of useful helper functions
https://github.com/d3/d3-scalescaleLinear
scaleSequential
scaleBand
SCALELINEAR: CONTINUOUS INPUTTO CONTINUOUS OUTPUT
var x = d3.scaleLinear() .domain([10, 130]) // e.g the min and max of your data .range([0, 960]); // the width of your chart
x(20); // 80 x(50); // 320
var color = d3.scaleLinear() .domain([10, 100]) .range(["brown", "steelblue"]);
color(20); // "#9a3439" color(50); // "#7b5167"
WHAT CAN WE INTERPOLATE?The domain must be numbers, the range can be any of this:
And if this doesn't match, you can create your own.
SCALESEQUENTIAL: CONTINUOUSINPUT TO INTERPOLATOR
var color = d3.scaleSequential(d3.interpolatePlasma).domain([0, 100]);color(30); // #8f0da4 color(60); // #e16462 color(80); // #fca636
Many interpolators available:
HOW WOULD YOU USE THIS?// say our values contains data from 1984 to 2014 var min = d3.min(values, function (d) { return d.value; }); var max = d3.max(values, function (d) { return d.value; }); // evenly divide the years along the xAxis var xScale = d3.scaleLinear().domain([1984,2014]).range([0, 1080]); // evenly divide the values along the yAxis var yScale = d3.scaleLinear() .domain([min, max]).range([0, 700]); // get a color var col = d3.scaleSequential(d3.interpolatePlasma).domain([0, 100]);
d3.selectAll("rect").data(values).enter() .append("rect") .attr("x", xScale) // xScale = (d: any) => Numeric .attr("y", function(d) {return yScale(d)}) // alternatively .attr("fill", col)
SCALES AND AXISD3 provides easy way to create an axis:
https://github.com/d3/d3-axisvar min = d3.min(values, function (d) { return d.value; }); var max = d3.max(values, function (d) { return d.value; });
var yScale = d3.scaleLinear() .domain([min, max]).range([0, 700]);
// s denotes that we want to use international system of units // to display axis values var bottomAxis = d3.axisBottom().scale(yScale).ticks(20, "s");
Results in:
EXERCISE 3: GOAL
BEFORE WE STARTD3.js support easy loading csv, tsv, json, xml
name,sex,amount Emma,F,20355 Olivia,F,19553 ...
d3.csv('data/yob2015.txt', function (d) { return { name: d.name, sex: d.sex, amount: +d.amount }; }, function (data) { }
ALSO FOR MULTIPLE FILESd3.queue() .defer(d3.json, "./data/world-110m.v1.json") .defer(d3.csv, "./data/worldbank_popular_2014.csv") .defer(d3.csv, "./data/iso-mapping.csv") .await(function (error, topoData, worldbank, mapping) { }
EXERCISE 3: WORKING WITH SCALESFollow steps described in:<ROOT>/src/exercise-03/js/E03.js
If needed reference D3.js APIs:
You'll get approximately 8 minutes.
https://github.com/d3/d3-scalehttps://github.com/d3/d3-axis
Should you have question? Please ask.
USING SVG FOR CHARTSSVG provides a large number of elements:
But limited primitive shapes: <circle>, <ellipse>,<line>, <path>, <polygon>, <polyline>, <rect>
https://developer.mozilla.org/en-US/docs/Web/SVG
THE PATH ELEMENT IS VERSATILEthe d attribute describes a path:
<path class="arc" d="M136.86141570725613,-17.69047457265137A138,138, 0,0,1,124.60150267951192,59.31665474390461L62.948628653284814,28. 257214134993035A69,69,0,0,0,68.61145448511735,-7.312203049469534Z" style="fill: rgb(252, 160, 130);"></path>
M, L, A, C, A, Q, T ... for lines, arcs, curvesHard to determine the correct values yourselfD3.js provides generators for complex shapes
THE ARC GENERATORWe'll create an arc segment, a part of a pie chart
var arc = d3.arc() .outerRadius(height/2 * 0.6).innerRadius(height/2 * 0.3); // create the right half of a pie chart arc({ startAngle: 0, endAngle: Math.PI });
// "M1.469576158976824e-14,-240A240,240,0,1,1,1.469576158976824e-14, // 240L7.34788079488412e-15,120A120,120,0,1,0,7.34788079488412e-15, // -120Z"
COMBINED WITH THE PIE FUNCTIONPiechart: d3.pie() to generate config for d3.arc
var arc = d3.arc() .outerRadius(height/2 * 0.6).innerRadius(height/2 * 0.3); var data = [{count:10}, {count:20}, {count:30}] var pie = d3.pie() .padAngle(0.04) .value(function (d) { return d.count; });
var arcs = pie(data) // "[{"data":{"count":10},"index":2,"value":10, // "startAngle":5.215987755982988, // "endAngle":6.283185307179586,"padAngle":0.04}, // {"data":{"count":20},"index":1,"value":20, // "startAngle":3.121592653589793, // "endAngle":5.215987755982988,"padAngle":0.04} ... selectAll("path").data(arcs).enter() .append("path").attr("d", arc);
ANOTHER STANDARD PATTERN1. Define generator which creates paths based on properties.
(d3.arc)2. Define generator which creates config for other generators
(d3.pie)3. Pass data to step 2, result is enriched data with config.4. Use the normal selectAll(), enter(), merge(),exit() pattern
EXERCISE 4: GOAL
EXERCISE 4, CREATE A PIE CHARTFollow steps described in:<ROOT>/src/exercise-04/js/E04.js
If needed reference D3.js APIs:
You'll get approximately 5 minutes.https://github.com/d3/d3-shape
VISUALIZING TREESTRUCTURES
TREE AND HIERARCHIESSee what is possible in d3 to visualizes nested trees of data
D3.JS SUPPORTS TREE DATAAPI: Many standard visualizations: d3.tree()
https://github.com/d3/d3-hierarchy
D3.CLUSTER()Same as the tree, but leaves are at the same position
D3.TREEMAP()Supports different clustering algorithms
D3.PACK()Same as d3.treemap, but with circles
OR YOUR CUSTOM IMPLEMENTATION
Sample
ALL FOLLOW SAME APPROACH1. Load the data (d3.csv,d3.tsv,d3.json etc.)2. Convert the data into a tree stucture3. Pass it through a generator4. Use the output from the generator to draw the chart
NESTED DATA: D3.STRATISFYd3.stratisfy() can follow ids in your data
id,parentId,name,description 180580,,Felidae,cats 180581,552363,Lynx,lynxes 180582,180581,rufus,Bobcat 180583,180582,rufus,bobcat 180584,180581,lynx,Eurasian Lynx 180585,180581,canadensis,Canada lynx`
var stratify = d3.stratify(); var root = stratify(data);
NESTED: D3.NEST / D3.HIERARCHYd3.nest() can group data (multiple times) based on a key
"Country (en)";"Country (de)";"Country (local)";"Country code";"Continent""Afghanistan";"Afghanistan";"Afganistan/Afqanestan";"AF";"Asia"; "Egypt";"Ãgypten";"Misr";"EG";"Africa";
var entries = d3.nest() .key(function (d) {return d.Continent; }) .entries(data);
var root = d3.hierarchy({values: entries}, function(d) { return d.values; })
USE A GENERATORWith data in the correct structure, we can use a generator// normal node tree var tree = d3.tree() .size([height, width]) .separation(function(a, b) { return (a.parent === b.parent ? 5 : 13) });
// create a treemap var tree = d3.treemap() .size([width, height]) .padding(2) .tile(d3.treemapSquarify.ratio(1))
// enrich the root tree(root)
WHICH ENRICHES THE STRUCTURE
root.leaves() // return all the nodes without children root.descendants() // return array of this and all descendants
chart.selectAll(".node") .data(root.descendants()) .enter(..)
EXERCISE 5: GOAL
EXERCISE 5, CREATE A TREEMAPFollow steps described in:<ROOT>/src/exercise-05/js/E05.js
If needed reference D3.js APIs:
You'll get approximately 8 minutes.https://github.com/d3/d3-hierarchy
VISUALIZES GRAPHSOF DATA
VISUALIZE GRAPHSQuick introduction on different ways how to use the force,
hord, and matrix layouts to visualize a graph of data
FORCE LAYOUT FOR GRAPHSAPI: A graph is a set of nodes.Define forces which are applied:
to nodesto links
Run a simulation
https://github.com/d3/d3-force
CAN APPLY DIFFERENT FORCESforceCenter: keeps nodes in the centerforceCollide: nodes have a radius, avoid collisionsforceLink: push/pull nodes together based on distanceforceManyBody: simulate attraction or repulsionbetween nodesforceX: force nodes towards specific positionforceY: force nodes towards specific position
BASIC SETUPvar graph = ...
// define forces var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; })) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2));
// run a simulation simulation .nodes(graph.nodes) .on("tick", ticked);
// do something on each tick function ticked() {...}
FORCE LAYOUT MULTIPLE FORCES
~ example ~
ALTERNATIVE: CHORD DIAGRAM
~ example ~
ALTERNATIVE: MATRIX DIAGRAM
~ example ~
EXERCISE 6: GOALPlay around with the different forces and see the effect.
EXERCISE 6, APPLY FORCESFollow steps described in:<ROOT>/src/exercise-06/js/E06.js
If needed reference D3.js APIs:
You'll get approximately 5 minutes.https://github.com/d3/d3-force
GIS AND GEO DATA
GEOD3.js has extensive support for working with geo data. We'll
explore different ways of visualizing and interacting with geodata.
BEST PART OF D3.JSAt least for me..
CAUSE IT LOOKS NICE
AND INFORMATIVE
AND COLOURFUL
QUICK NOTE ON PROJECTIONSProjection defines how the coordinates from the source areprojected to a flat canvas. The projection:Sinu Mollweide
Example
CREATING A MAPGoing to explain how to create this:
Example
HOW TO LOAD DATAMost common format for GIS data is ArcGIS shapefile.
binary formatUse QGis, Mapshaper, OGR to convert to open formatsD3.js can work with:
GeoJSON: A standard supported by many applications.TopoJSON: A specific optimized format for smaller files.
GEOJSON AND TOPOJSON FORMATSCan contain multiple geometries.Each geometry is described (usually) as a path.Can contain additional properties
population, unemployment rate, etc.one file for everything
Try to work with TopoJSON, since it's much smaller{"type":"Topology","objects":{"cb_2015_us_county_500k": {"type": "GeometryCollection","geometries":[{"type":"Polygon","properties": {"GEOID":"01005","NAME":"Barbour"},"id":"01005","arcs":[[0,1,2,3 ,4,5,6,-7,6,7,8,9,10,11,12,13,14 ...
WORKING WITH TOPO DATA IN D3.JS(pretty much the same way as we did before)
1. Setup a path generator and projection2. Load the data3. Use the projection to generate path segments
LOAD THE DATA(this is prepared data, where value contains percentage of
internet users){"type":"Topology","objects":{"countries":{"type":"GeometryCollection" "geometries":[{"type":"Polygon","id":"004","arcs":[[0,1,2,3,4,5]], "properties":{"value":"7","countryA":"AFG","name":"Afghanistan"}}, {"type":"MultiPolygon","id":"024","arcs":[[[6,7,8,9 ....
d3.json("./data/world-110m-inet.json", function(loadedTopo) { // by using topojson.feature, we convert the topoJson to geojson, // where each country is a single feature in the features array. countries = topojson.feature(loadedTopo, loadedTopo.objects.countries).features; });
WHEN LOADED THE DATA LOOKSLIKE THIS
SETUP THE PATH GENERATORvar projection = d3.geoNaturalEarth() var path = d3.geoPath().projection(projection)
For all the supported projections see:
Pretty much any projection you can think offRelatively easy to create your own one
https://github.com/d3/d3-geo/https://github.com/d3/d3-geo-projection
WITH A GENERATOR AND THE DATAvar projection = d3.geoNaturalEarth() var path = d3.geoPath().projection(projection)
d3.json("./data/world-110m-inet.json", function(loadedTopo) { countries = topojson.feature(loadedTopo, loadedTopo.objects.countries).features;
svg.selectAll('.country').data(countries).enter() .append("path") .classed('country', true) .attr("d", path); }
And that's it..
AND YOU'RE DONE!
But colors?
ADD A SIMPLE SCALEvar color = d3.scaleSequential(d3.interpolateGreens).domain([0,100]) var projection = d3.geoNaturalEarth() var path = d3.geoPath().projection(projection)
d3.json("./data/world-110m-inet.json", function(loadedTopo) { countries = topojson.feature(loadedTopo, loadedTopo.objects.countries).features;
svg.selectAll('.country').data(countries).enter() .append("path") .classed('country', true) .attr("d", path); .attr("fill", function(d) {return d.properties.value ? color(+d.properties.value) : '#ccc'}); }
EASY RIGHT?
EXERCISE 7: GOALRender the US election
EXERCISE 7, RENDER THE USELECTION RESULTS
Follow steps described in:<ROOT>/src/exercise-07/js/E07.js
If needed reference D3.js APIs:
You'll get approximately 10 minutes.
https://github.com/d3/d3-geo/https://github.com/d3/d3-geo-projection
D3.JS AND GENERATIVEART
NOT EVERYTHING SHOULD HAVE AMEANING
D3.JS SUPPORTS VORONOISIn mathematics, a Voronoi diagram is a partitioning of a planeinto regions based on distance to points in a specific subset ofthe plane. That set of points (called seeds, sites, or generators)
is specified beforehand, and for each seed there is acorresponding region consisting of all points closer to that
seed than to any other.
VORONOI
MUST GO DEEPER
MUST GO DEEPER
AND DEEPER
AND DEEPER
ANY DEEPER BREAKS MY BROWSERThis is rendered as SVG elementsWe could output to canvas as well
EXERCISE 7, PLAY AROUND WITHTHE VORONOI CODE
Not really an exercise, but allows you to experiment withvoronois.
Follow steps described in:<ROOT>/src/exercise-08/js/E08.js
@josdirken ~ Exercises for this session: https://github.com/josdirksen/d3exercises
THANK YOU!