Reading Notes for D3.js Part II (Chapter 6)
This post is transferred from my old Hexo blog site, created on 2014.
This is a Reading Note for Interactive Data Visualization for the Web - An Introduction to Designing with D3 by Scott Murray, pulished by O'Reilly, 2013
This post will contains concepts that I think it's important for me to be familiar with in D3 book.
Chapter 6 : Draw Graph basiced on Data
code example for this chapter is here. This part involves lots of code practice.
Everything is rectangular
for browser. Using div
is the easiest way to draw a Bar Chart.
code part I
attr()
set up the value for a DOM attribute, such as .attr('class','bar')
style()
add css style to an element
classed()
quickly add/delete class to an element, such as .classed('bar',true/false)
to add/delete a class bar
to an element
select().selectAll().data().enter()
put data to data
, then use/create elements using selectAll()
, append them in select()
, for example:
d3.select(document.getElementById("test")) //select the space that is a div "test" .selectAll('div') //create divs in 'test' div .data(dataset).enter(); //for each new div, put data to it
Draw SVG
code part II
For each SVG
element, all its properties are defined by property='XXX'
, such as <element property = 'value'></element>
First step is always create a SVG
element:
var w = 200; //This is pixel var h = 100; var svg = d3.select(document.getElementById('chapter6').getElementsByClassName("2")[0]) .append('svg') .attr('width',w) .attr('height',h); //Create size of svg
Then draw a circle:
var dataset = [10,9,15,25,18,26,11,13]; var circles = svg.selectAll('circle') .data(dataset) .enter() .append('circle'); //create circle and put data in circles.attr('cx',function(d,i){ return (i*20)+10; }) .attr('cy',h/2) .attr('r',function(d){ return d; }) .attr('fill','yellow') .attr('stroke','pink'); //Add center point and radius. Then add color to it
Draw Bar Chart
code part III
In D3, always choose element that you need, even before it is created.
SVG
only support alignment through left-upper corner. To make sure bar chart using bottom alignment:
-
make the
y
, which is the vertical point of alignment point, equals tototal height - its own height
-
then make each bar has height equal to its data.
Make color be ratio to data:
//add color to rectangular. Make each bar has color ratio to its data rect.attr('fill',function(d){ return("rgb(0,0,"+(d*10)+")"); });
The way to add tags
is the same to add rect
:
//create text var text = svg.selectAll('text') .data(dataset) .enter() .append('text'); //set text position. Adjust position a little bit text.attr('x',function(d,i){ return i*(w/dataset.length)+5; }) text.attr('y', function(d){ return h-(d+5); }); //add text value text.text(function(d){ return d; //Get integer value in JavaScript }); //set font family text.attr('font-family','sans-serif') .attr('font-size','1em') .attr('fill','blue') .attr('text-anchor','middle'); //set text alignment
Draw Scatter Plot
code part IV
For a scatter plot, data should look like an array of arrays:
var dataset = [ [5,10], [15.30], [60,75], [99,35] ]; //First Numer is X axis, Second Numer is y axis
The way to draw a scatter plot is generating lots of circles on svg
, each circle is a point:
//prepare data var dataset = [ [5,10], [115,130], [40,40], [160,100], [199,135] ]; //create svg element var w = 300; //This is pixel var h = 150; var svg = d3.select(document.getElementById('chapter6').getElementsByClassName("4")[0]) .append('svg') .attr('width',w) .attr('height',h); //create circles var circle = svg.selectAll('circle') .data(dataset) .enter() .append('circle'); //set up cx, cy, r circle.attr('cx',function(d){ //Here, d is the single array in array group return d[0]; //note it should be first element in array }).attr('cy',function(d){ return h-d[1]; //y should be second element in array }); //Make area of circle be proportional to data, using A = π*r^2. We just assume y is the area here circle.attr('r',function(d){ return Math.sqrt(d[1]/3.14) + 5; }).attr('fill','pink'); //Add Tags var text = svg.selectAll('text') .data(dataset) .enter() .append('text'); text.text(function(d){ return d[0] + "," + d[1]; }); text.attr('x',function(d){ return d[0]; }); text.attr('y',function(d){ return h-d[1]; });