Exploring Reusability with d3.chart
Overview
- d3.js
- Reusable Charts
- d3.chart
- The Future!
All About Mike
- Developer at Bocoup
- Member of the Miso Project
- Freaked out by sprouted potatoes
d3.js
Data-Driven Documents
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS [...]d3js.org
Visualizations
Walkthrough of Bullet Chart
re·us´·a·ble charts
Defining "chart"
What does it mean to be "reusable"?
Defining "reusable"
function chart() { // generate chart here}A function; the standard unit of code reuse!-- Mike Bostock, Towards Reusable Charts
Defining "reusable"
Defining "reusable"
Our Take
Defining "reusable"
Repeatable
Defining "reusable"
Modifiable
Defining "reusable"
Configurable
Defining "reusable"
Extensible
Defining "reusable"
Composable
Naming is Difficult
- Understanding Data Visualization: An Interpretive Dance
- Open Web Kittens
- d3.chart: I'm Just Going to Eat a Sandwhich
- d3.chart: there will be free food and beer why are you even reading this?
- d3.chart: I'm Frightened by the Tendrils that Grow Out of Old Potatoes
- d3.chart: I've never told anyone, but i have a dark secret
- d3.chart: If you stare are the word "number" long enough, it starts to lose all meaning
- Reusable charts with d3.chart
- d3.chart
- "d3.chart: If you use nested "quotes" then things get "hard to read""
- don't "question" my use of "quotes"
- chart chart chart chart chart CHART chart
- Building charts with d3.chart: A talk about charts
- Charting New Territory
- Charting your way thought reusable charts with d3.charts: a talk about charts (Warning: talk contains no charts)
- An ALL AXIS Pass to d3.chart
- I don't always make reusable charts, but when I do, I use d3.chart
- d3.chart: we've always been at war with eastasia
- Don't like government eavesdropping?! make charts with d3.chart
- d3.chart: put THAT in your memory hole!
- d3.chart: An Exploration of Alternative Titles for this Talk
- d3.chart: Who Charted?
Layer
Connect Data to Elements
d3.js pattern
var bar = d3.select("svg g").selectAll("rect.bar") .data(data);bar.enter().append("rect") .classed("bar", true); .attr("height", function(d) { return d * 20; }); .attr("width", 0) .transition() .duration(1000) .attr("width", 100);bar.transition() .duration(1000) .attr("x", function(d, i) { return i * 100; });bar.exit().transition().duration(1000) .attr("width", 0) .remove();Setup
var layer = d3.select("svg g").layer({ dataBind: function(data) { return this.selectAll("rect.bar").data(data); }, insert: function() { return this.append("rect").classed("bar", true); }, events: { enter: function() { this.attr("height", function(d) { return d * 20; }) .attr("width", 0); }, "enter:transition": function() { this.duration(1000).attr("width", 100); }, "update:transition": function() { this.duration(1000) .attr("x", function(d, i) { return i * 100; }); }, "exit:transition": function() { this.duration(1000) .attr("width", 0) .remove(); } }});Rendering
layer.draw(data);Configuration
layer.on("enter", function() { this.attr("width", 100) .style("opacity", 0);});layer.on("enter:transition", function() { this.style("opacity", 1);});layer.on("exit:transition", function() { this.attr("width", 100) .style("opacity", 0);});Chart
Manage Layers, Extend, and Compose
Manage Layers
d3.chart("Homme", { initialize: function() { this.layer("barLayer", this.base.append("g"), { // layer options: insert, databind, events }); }});var myChart = d3.select("svg").chart("Joshua");myChart.draw(data);Transform Input Data
d3.chart("Jones", { transform: function(data) { return d3.layout.chord() .padding(.05) .sortSubgroups(d3.descending) .matrix(data); }});Extend
d3.chart("Drummer", { // chart options: initialize, transform, etc...});d3.chart("Drummer").extend("Grohl", { // chart options: initialize, transform, etc...});Compose
d3.chart("TCV", { initialize: function() { this.mixin("Homme", this.base.append("g"), { // chart options: initialize, transform, etc... }); this.mixin("Grohl", this.base.append("g"), { // chart options: initialize, transform, etc... }); }});Listen
d3.chart("Jones", { initialize: function() { var chart = this; // ... barLayer.on("enter", function() { this.on("mouseover", function() { chart.trigger("brush:bar", arguments); }); });});Map Input Data
d3.chart("Billy", { dataAttrs: ["value"], initialize: function() { // ... this.barLayer.on("enter", function() { this.attr("height", function(d) { return d.value; }); }); }});var myChart = d3.select("svg").chart("Billy", { dataMapping: { value: function() { return this.VALUE; } }});myChart.draw([ { VALUE: 23 } ]);
this.transition() .transition() .transition().text("Sharing");Improved <path> and d3.layout support
Your ideas!
Resources
- d3.js
- d3.chart
- Miscellany