Learn D3 step by Step
It’s always good to read and follow the instruction manual first when you’re learning new language or tool set. Also you can google for good tutorials and more.
D3 (Data-Driven Documents) is a JS library that helps you to visualize your data using HTML, SVG and CSS.
First step include D3 library into your HTML file
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script>
#main selector
d3.select(“selector”) or d3.selectAll(“selector”)
define a selector element
var body = d3.select(“body”)
Now you can use
body.select(“selector”) or body.selectAll(“selector”)
Also you can use append() function like
body.append("h1").text("Hello World from D3!")
Set this in new variable
var h1 = body.select(“h1”)
Now we can apply different attributes by using attr()
h1.attr("id", "d3-header");
Alternatively
h1.attr({ id: "idValue", "class": "classValue"});
Also we can apply style method same as attrribute method
h1.style({"font-family":"sans-serif", "color":"blue"});
classed() function and usage
h1.classed(“className”, true) will add a className into h1 selector without deleting previews className.
if you apply h1.attr(“class”, “className”) it will replace the previews class
h1.classed(“className”, false) will remove a className from h1 selector
Also we can use html() method
h1.html(“ Hello from D3”);
append() applies after the element. So if we want to insert something before the element?
We can use insert() for insert element before the selected element.
body.insert("the Element you trying to add", "before this Element").text("Ssome value");
body.insert("p", "h1").text("Some text value");
Inserting <p> element before <h1> element.
And we can use remove() method
h1.remove();
#SVG Introduction
SVG stands for Scalable Vector Graphic basically graphical version of HTML. We can create basic svg by using
<svg width="400" height="400">
<rect x="" y="" width="" height="" fill="">
<circle cx="" cy="" r="" style="fill: color; stroke-width: 2;">
<ellipse cx="" cy="" rx="" ry="" >
<text x="" y="" style="text-anchor: middle">Hello world</text>
<line x1 y1 x2 y2 stroke-width="numberValue" stroke="colorValue">
<polygon points="40, 50 200,220 320, 170 90, 87" fill="colorValue">
<polyline points="" fill="colorValue">i
<path d="M 100 100 L 100 200 L 200 100 z" fill="rgba(100, 100, 100 0.5)">
</svg>
This are the basic SVG elements and you can create more advanced SVGs.
Let’s back to the D3 and how we can select SVG element on D3
Due to select a SVG element, we need to define svg first
var svg = d3.select("svg");
Now you can select the element and append the value
svg.append('circle').attr({cx: 250, cy: 260, r: 220, fill: '#ff00ee'});
#Start using a Basic Data
Make sure we have created the HTML first and include D3 & the data file as well
Basic data file
//The basic data value
var dataset = [3, 23, 45, 12, 23];
//The basic data value
var dataset = [3, 23, 45, 12, 23];
//Create SVG element
svg = d3.select("body").append("svg").attr({
width: 300,
height: 300
});
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr({
x: function(d, i) {return i * 51; },
y: function(d, i) { return 300 - (d * 5)},
width: 50,
height: function(d) { return d * 5; },
fill: 'orange'
});
The code below that represents how to create basic rectangle graph
#Lets start using scales
Scales gives you more flexible injection into the graph elemnts that you’re working on.
d3.scale.linear uses the Linear Algebra method like y = mx + b.
var a = d3.scale.linear()
.domain([0, 100])
.range(["0px", "10px"]);
On the example we know that min value 0 and max value 100.
Ex: If we set a(5) then the return will be (“0.5px”). In here the scale function does the math and it return the string value.
val colorScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range(["green", "red"]);
In the is example scale function return color schema between red and green.
Let’s see if we can create a graphic that fits in your window screen using scale function and it’s range.
var svg = d3.select(".scale").append("svg").attr({
/* use this 2 lines to fit on screen
width: window.innerWidth,
height: window.innerHeight
*/
width: 720,
height: 300
});
var data = [1, 5, 2, 4, 3, 7];
var heightScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, height - 40]);
var color = d3.scale.linear()
.domain([0, d3.max(data)]),
.range("green", "red")
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr({
width: 100,
height: heightScale,
x: function(d) { return i * 101; },
y: 20,
fill: color
});