Non-Binding API

scales

quantitative scales

var quant = [0, 5, 10, 15, 20]; var qual = ["big", "small", "medium"]; var qScale = d3.scale.linear() .domain(d3.extent(quant)) .range([10, 100]) quantValue = qScale(7);

categorical scales

var qual = ["big", "small", "medium"]; var ord = d3.range(qual.length); var oScale = d3.scale.ordinal() .domain(ord) .rangeBands([50, 150], 0.1) var svg = d3.select(".cscales svg") svg.selectAll("text").data(qual) .enter().append("text") .text(function(d) { return d }) .attr({ x: 20, y: function(d,i) { return oScale(i) } })

generators

axis

var scale = d3.scale.linear() .domain([20, 30]) .range([10, 200]) var axis = d3.svg.axis() .scale(scale) .orient("bottom") //left, right, top .ticks(4) //best guess //.tickValues([20, 25, 30]) //specify exact values var g = svg.append("g") axis(g) g.attr("transform", "translate(50, 50)") g.selectAll("path") .style({ fill: "none", stroke: "#000"}) g.selectAll("line") .style({ stroke: "#000"})

line

var data = [0, 30, 20, 10, 50] var x = d3.scale.ordinal() .domain(d3.range(data.length)) .rangeBands([10, 450]) var y = d3.scale.linear() .domain(d3.extent(data)) .range([150, 10]) var line = d3.svg.line() .x(function(d,i) { return x(i) }) .y(function(d,i) { return y(d) }) svg.append("path") .attr("d", line(data)) .style({ fill: "none", stroke: "#000" })

brush

var scale = d3.scale.linear() .domain([20, 30]) .range([10, 300]) var brush = d3.svg.brush() brush.x(scale) brush.extent([22, 28]) var g = svg.append("g") brush(g) g.attr("transform", "translate(50, 100)") g.selectAll("rect").attr("height", 30) g.selectAll(".background") .style({fill: "#4B9E9E", visibility: "visible"}) g.selectAll(".extent") .style({fill: "#78C5C5", visibility: "visible"}) g.selectAll(".resize rect") .style({fill: "#276C86", visibility: "visible"})

layouts

histogram

var data = [0, 1, 1, 2, 3, 2, 5, 5, 6, 1, 2, 3, 4] var hist = d3.layout.histogram() .value(function(d) { return d }) .range([0, d3.max(data) ]) .bins(5); var layout = hist(data); console.log("histogram:", layout) svg.selectAll("rect") .data(layout) .enter().append("rect") .attr({ x: function(d,i) { return 150 + i * 30 }, y: 50, width: 20, height: function(d,i) { return 20 * d.length } })

ajax

d3.json(url, function(err, data) {...}) d3.csv(url, function(err, data) {...}) d3.tsv(url, function(err, data) {...}) d3.text(url, function(err, data) {...})

These functions are for convenience, and behave similar to jQuery's .ajax()

Resources

Top