Visual Storytelling with Jupyter and D3.js
DataHack Summit 2017
Courtesy: Nadieh Bremer at Visual Cinnamon
Why should you care?
- You prefer the Hard Way!
- You need the Ultimate Freedom!
- You love that visualization.
- May be you've front-end friends.
- You don't ever want to leave your Notebook.
Getting Started
Setup Jupyter
%%javascript
requirejs.config({
paths: {
'd3': ['//d3js.org/d3.v4.min'],
},
});
require(['d3'], function(d3) {
window.d3=d3
});
Hello! World
d3.select("#d3-div-1").selectAll('.bedazzled')
.data(size_data)
.enter().append('p')
.attr("class","bedazzled")
.style("font-size", function(d){ return "" + d + "px";})
.text("Hello D3!");
D3 : Data Driven Documents
HTML Document as a Database
.data(data_array) - binds an array of data to an array of elements.
Array of elements - result of a database query d3.selectAll(query string).
Talk D3 to Me!
- Methods often return the input container instead of their specific result.
- d3.select(“rect”).attr(“height”,42).attr(“width”,20) - Returns the rect selection and not the height attribute
- Allows “chaining” to avoid need to use variables to store intermediate objects
- d3.select(“rect”).attr(“height”,42)
- Methods on selections operate on each element of the selection.
- d3.selectAll(“rect”).attr(“width”,20) - Sets all rectangles to width 20.
- Functions are objects and can be passed as parameters
- .attr(“width”, function(d,i) { return d; }) - When attr(name,value) method called on an object with associated data, if “value” is a function, it is called and attribute set to return value
D3 Joins
Data Node Joins
Join Semantics
Join Semantics
Join Semantics
Selection Methods
D3 Selection
- d3.select(selector)
- Selects the first element that matches the selector string.
- d3.selectAll(selector)
- Selects all elements that match the selector string, in document order
- d3.selectAll(s1).select(s2)
- Finds the first descendant element matching s2 of elements matching s1
- d3.selectAll(s).filter(f)
- Filters selection by string (or function) f
- var sel1 = d3.selectAll(s1) d3.selectAll(s2).merge(sel)
- Union of selection of s1 with selection of s2
Modifying D3 Selected Elements
- selection.attr(name, value)
- Sets selection’s named attribute to the given value
- selection.classed(“c1 c2”, true)
- Assigns selection to classes c1 and c2
- selection.style(name, value)
- Sets a named CSS style parameter to given value
- selection.text(s)
- Replaces any child elements of selection with the given text string s
- selection.html(n)
- Replaces any child elements of selection with the given innerHTML specification n
Selection Patterns
General Update Pattern
Megre Pattern
selectAll.data.enter.append Pattern
selectAll.data.enter.append Pattern
D3 Scales
Scale
A scale is a function that takes an abstract value of data and returns a visual value for display.
D3 Scales
D3 Scales
D3 Scales
Axes
- var x = d3.scaleBand().domain([0,1,2,3,4,5]).range([0,width]);
- var y = d3.scaleLinear().domain([0,42]).range([height,0])
- d3.select(“svg”).append("g") .attr("transform","translate("+margin+","+margin+")") .call(d3.axisLeft(y));
- d3.select(“svg”).append("g") .attr("transform","translate("+margin+","+(height+margin)+")") .call(d3.axisBottom(x));