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
	});