Source: Mike Bostock's Craig Retroazimuthal
Anna Powell-Smith, Front-End London, 17/1/13
var plot1 = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];
var svg = d3.select("body").append("svg")
.attr("width", 500).attr("height", 100);
svg.selectAll("rect").data(dataset)
.enter().append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
Source: Mike Bostock's streamgraph example
Source: Mike Bostock's force-directed graph example
Source: Mike Bostock's Chloropleth Map
Source: Mike Bostock's OMG Particles
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];
var svg = d3.select("body").append("svg")
.attr("width", 500).attr("height", 100);
svg.selectAll("#graph rect.cities").data(dataset)
.enter().append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];
var svg = d3.select("body").append("svg")
.attr("width", 500).attr("height", 100);
svg.selectAll("#graph rect.cities").data(dataset)
.enter().append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
svg.selectAll("rect").data(dataset)
.transition().duration(2500)
.attr("y", function(d) {return h - yScale(d); })
.attr("height", function(d) { return yScale(d); })
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
document.implementation.hasFeature ("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
Source: CartoDB makes D3 maps a breeze
d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("New paragraph!");
Jerome Cukier's D3 cheat sheet (pdf)
bl.ocks.org: follow Mike Bostock & Jason Davies