Better d3 charts with tdd

Better D3 Charts with TDD
Slides:
Code:
http://golodhros.github.io/
https://github.com/Golodhros/d3-meetup

Online
Personal Blog
Eventbrite Engineering Blog
@golodhros

Next up
Presentation
Live coding
Q&A

D3 introduction
Data-Driven Documents
JavaScript library to manipulate data based
documents
Open web standards (SVG, HTML and CSS)
Allows interactions with your graphs

How does it work?
Loads data
Binds data to elements
Transforms those elements
Transitions between states
Example

D3 Niceties
Based on attaching data to the DOM
Styling of elements with CSS
Transitions and animations baked in
Total control over our graphs
Amazing community
Decent amount of publications

Marketing guy: Hey, I saw this nice chart,
could we do something like that?

Usual workflow
Idea or requirement
Search for an example
Adapt the code
Add/remove features
Polish it up

Code example
by Mike BostockBar chart example

Creating container
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +
Reference: Margin Convention

Setting up scales and axes
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
Reference: Scales tutorial

Loading data
// Loads Data
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
// Chart Code here
});
// Cleans Data
function type(d) {
d.frequency = +d.frequency;
return d;
}

Drawing axes
// Rest of the scales
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
// Draws X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Draws Y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")

Drawing bars
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });

Standard D3: drawbacks
Monolithic functions
Chained method calls
Hard to change code
Impossible to reuse
Delicate

Marketing guy: What if we change this thing
here...

M-guy: nice, let’s change this other thing!

M-guy: Great! I love it so much I want it on the
product!

M-guy: So good you have it almost ready,
right?

Possible outcomes
You take it through
You dump it and start all over again
You avoid refactoring

What if you could work with charts the same
way you work with the other code?

Reusable Chart API - code
return function module(){
// @param {D3Selection} _selection A d3 selection that represents
// the container(s) where the chart(s) will be rendered
function exports(_selection){
// @param {object} _data The data to generate the chart
_selection.each(function(_data){
// Assigns private variables
// Builds chart
});
}
// @param {object} _x Margin object to get/set
// @return { margin | module} Current margin or Bar Chart module to cha
exports.margin = function(_x) {
if (!arguments.length) return margin;
margin = _x;

Reusable Chart API - use
// Creates bar chart component and configures its margins
barChart = chart()
.margin({top: 5, left: 10});
container = d3.select('.chart-container');
// Calls bar chart with the data-fed selector
container.datum(dataset).call(barChart);

Reusable Chart API - benefits
Modular
Composable
Conﬁgurable
Consistent
Teamwork Enabling
Testable

The "before" block
container = d3.select('.test-container');
dataset = [
{ letter: 'A',
frequency: .08167
},{
letter: 'B',
frequency: .01492
},...
];
barChart = barChart();
container.datum(dataset).call(barChart);

Test: basic chart
it('should render a chart with minimal requirements', function(){
expect(containerFixture.select('.bar-chart').empty()).toBeFalsy();
});

Code: basic chart
width = 960, height = 500,
svg;
var chartWidth = width - margin.left - margin.right,
chartHeight = height - margin.top - margin.bottom;
if (!svg) {
svg = d3.select(this)
.append('svg')
.classed('bar-chart', true);
}
});
};
return exports;
Reference: Towards Reusable Charts

Test: containers
it('should render container, axis and chart groups', function(){
expect(containerFixture.select('g.container-group').empty()).toBeFalsy(
expect(containerFixture.select('g.chart-group').empty()).toBeFalsy();
expect(containerFixture.select('g.x-axis-group').empty()).toBeFalsy();
expect(containerFixture.select('g.y-axis-group').empty()).toBeFalsy();
});

Code: containers
function buildContainerGroups(){
var container = svg.append("g").attr("class", "container-group");
container.append("g").attr("class", "chart-group");
container.append("g").attr("class", "x-axis-group axis");
container.append("g").attr("class", "y-axis-group axis");
}

Test: axes
it('should render an X and Y axes', function(){
expect(containerFixture.select('.x-axis-group.axis').empty()).toBeFalsy
expect(containerFixture.select('.y-axis-group.axis').empty()).toBeFalsy
});

Code: scales
function buildScales(){
xScale = d3.scale.ordinal()
.domain(data.map(function(d) { return d.letter; }))
.rangeRoundBands([0, chartWidth], .1);
yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.frequency; })])
.range([chartHeight, 0]);
}

Code: axes
function buildAxis(){
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10, "%");
}

Code: axes drawing
function drawAxis(){
svg.select('.x-axis-group')
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + chartHeight + ")")
.call(xAxis);
svg.select(".y-axis-group")
.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
}

Test: bars drawing
it('should render a bar for each data entry', function(){
var numBars = dataset.length;
expect(containerFixture.selectAll('.bar').size()).toEqual(numBars);
});

Code: bars drawing
function drawBars(){
// Setup the enter, exit and update of the actual bars in the chart.
// Select the bars, and bind the data to the .bar elements.
var bars = svg.select('.chart-group').selectAll(".bar")
.data(data);
// If there aren't any bars create them
bars.enter().append('rect')
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.letter); })
.attr("width", xScale.rangeBand())
.attr("y", function(d) { return yScale(d.frequency); })
.attr("height", function(d) { return chartHeight - yScale(d.frequen
}
Reference: ,Thinking with joins General Update Pattern

Test: margin accessor
it('should provide margin getter and setter', function(){
var defaultMargin = barChart.margin(),
testMargin = {top: 4, right: 4, bottom: 4, left: 4},
newMargin;
barChart.margin(testMargin);
newMargin = barChart.margin();
expect(defaultMargin).not.toBe(testMargin);
expect(newMargin).toBe(testMargin);
});

Code: margin accessor
exports.margin = function(_x) {
if (!arguments.length) return margin;
margin = _x;
return this;
};

Final code: standard way
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");

Final code: TDD way
width = 960, height = 500,
chartWidth, chartHeight,
xScale, yScale,
xAxis, yAxis,
data, svg;
chartWidth = width - margin.left - margin.right;
chartHeight = height - margin.top - margin.bottom;
data = _data;
buildScales();
buildAxis();
buildSVG(this);
drawBars();

TDD way - benefits
Stress free refactors
Goal oriented
Deeper understanding
Improved communication
Quality, production ready output

Some ideas
Test something that is in production
TDD the last chart you built
Pick a block, refactor it
TDD your next chart

REPOSITORY
WALKTHROUGH

What happened with my contracting gig?

Toogle dimensions, adding more y-axis?

Conclusions
Examples are great for exploration and prototyping,
bad for production code
There is a better way of building D3 Charts
Reusable Chart API + TDD bring it to a Pro level
You can build your own library and feel proud!

Thanks for listening!
Twitter:
Check out
Slides:
Code:
@golodhros
my Blog
http://golodhros.github.io/

Live Coding
Refactoring accessors
Add Events
Start building a new chart

Learning resources
D3.js Resources to Level Up
Dashing D3 Newsletter

Example search
Search by chart type ->
Search by D3 component ->
Christophe Viau's Gallery
Block Explorer

Better d3 charts with tdd

More Related Content

What's hot

Viewers also liked

Similar to Better d3 charts with tdd

Recently uploaded

Better d3 charts with tdd