Category Archives: D3

D3 (1)

Reading “Interactive Data Visualization for the Web” and taking some notes to fast grasp important points.

Data-Driven Documents. The data is provided by you, and the documents are web-based documents, meaning anything that can be rendered by a web browser, such as HTML and SVG. D3 does the driving, in the sense that it connects the data to the documents.


Usage:
<script src=”http://d3js.org/d3.v2.js“></script>


Important Elements:
Scalable Vector Graphics (SVG)

rect <rect x=”0″ y=”0″ width=”500″ height=”50″/>
circle <circle cx=”250″ cy=”25″ r=”25″/>
ellipse <ellipse cx=”250″ cy=”25″ rx=”100″ ry=”25″/>
line <line x1=”0″ y1=”0″ x2=”500″ y2=”50″ stroke=”black”/>
text <text x=”250″ y=”25″>Easy-peasy</text>
<text x=”250″ y=”25″ font-family=”serif” font-size=”25″
fill=”gray”]]>Easy-peasy</text>
fill A color value. Just as with CSS, colors can be specified as named colors, hex values, or RGB or RGBA values.
stroke A color value.
stroke-width A numeric measurement (typically in pixels).
opacity A numeric value between 0.0 (completely transparent) and 1.0 (completely opaque).

Simple but Important examples:
(#top_result is the class where you want to use d3 to draw)
(dataset is your data which can be array, list, dict, json, xml or others)

text:
 d3.select("#top_result").selectAll("p")
 .data(dataset)
 .enter()
 .append("p")
 .text(function(d) { return d; })
 .style("color", function(d) {
   if (d > 15) {   //Threshold of 15
     return "red";
   } else {
     return "black";
   }
 });
-----------------------------------------------------------------------
 bar:
 d3.select("#top_result").selectAll("div")
 .data(dataset)
 .enter()
 .append("div")
 .attr("class", "bar")
 .style("height", function(d) {
   var barHeight = d * 5;
   return barHeight + "px";
 });
div.bar {
 display: inline-block;
 width: 20px;
 height: 75px;     /* Gets overriden by D3-assigned height below */
 margin-right: 2px;
 background-color: teal;
 }
 -----------------------------------------------------------------------
 svg:
 var w = 500;
 var h = 100;
 var svg = d3.select("#top_result")
 .append("svg")
 .attr("width", w)   // <-- Here
 .attr("height", h); // <-- and here!
 var circles = svg.selectAll("circle")
 .data(dataset)
 .enter()
 .append("circle");
 circles.attr("cx", function(d, i) {return (i * 50) + 50;})
 .attr("cy", h/2)
 .attr("r", function(d) {return d*0.8;})
 .attr("fill", "yellow")
 .attr("stroke", "orange")
 .attr("stroke-width", function(d) {return d/2;});
 -----------------------------------------------------------------------
 add text:
 var w = 500;
 var h = 100;
 var barPadding = 1;
 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
 //Create SVG element
 var svg = d3.select("#top_result")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
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) + ")";});
svg.selectAll("text")
 .data(dataset)
 .enter()
 .append("text")
 .text(function(d) {return d;})
 .attr("text-anchor", "middle")
 .attr("x", function(d, i) {return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;})
 .attr("y", function(d) {return h - (d * 4) + 14;})
 .attr("font-family", "sans-serif")
 .attr("font-size", "11px")
 .attr("fill", "white");
 -----------------------------------------------------------------------
 Scales are functions that map from an input domain to an output range:linear scales/logarithmic/square root

A scale’s input domain is the range of possible input data values.
A scale’s output range is the range of possible output values, commonly used as display values in pixel units.

var w = 500;
 var h = 300;
 var padding = 20;
var dataset = [
 [5, 20],
 [480, 90],
 [250, 50],
 [100, 33],
 [330, 95],
 [410, 12],
 [475, 44],
 [25, 67],
 [85, 21],
 [220, 88],
 [600, 150]
 ];
//Create scale functions
 var xScale = d3.scale.linear()
 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
 .range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
 .range([h - padding, padding]);
var rScale = d3.scale.linear()
 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
 .range([2, 5]);
//Create SVG element
 var svg = d3.select("#top_result")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
svg.selectAll("circle")
 .data(dataset)
 .enter()
 .append("circle")
 .attr("cx", function(d) {return xScale(d[0]);})
 .attr("cy", function(d) {return yScale(d[1]);})
 .attr("r", function(d) {return rScale(d[1]);});
svg.selectAll("text")
 .data(dataset)
 .enter()
 .append("text")
 .text(function(d) {return d[0] + "," + d[1];})
 .attr("x", function(d) {return xScale(d[0]);})
 .attr("y", function(d) {return yScale(d[1]);})
 .attr("font-family", "sans-serif")
 .attr("font-size", "11px")
 .attr("fill", "red");

Unlike scales, when an axis function is called, it doesn’t return a value, but generates the visual elements of the axis, including lines, labels, and ticks.

svg.append("g")
 .call(d3.svg.axis()
 .scale(xScale)
 .orient("bottom"))
 .attr("transform", "translate(0," + (h - padding) + ")");
svg.append("g")
 .call(d3.svg.axis()
 .scale(yScale)
 .orient("left"))
 .attr("transform", "translate(" + padding + ",0)”);

(continues…)