{"id":40392,"date":"2016-09-22T12:27:40","date_gmt":"2016-09-22T06:57:40","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=40392"},"modified":"2016-09-22T12:27:40","modified_gmt":"2016-09-22T06:57:40","slug":"creating-customized-line-chart-using-d3-js","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/creating-customized-line-chart-using-d3-js\/","title":{"rendered":"Creating customized line chart using d3.js"},"content":{"rendered":"

D3<\/a> (Data-Driven Documents) is a JavaScript library to create\u00a0custom visualizations. It\u00a0combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.<\/p>\n

D3.js graphs are for those who want to create complex, customized graphs.<\/p>\n

Installing :<\/strong>
\nIf you are using NPM, then you can install d3 by using the following command
\n<\/span><\/span><\/p>\n

[java]npm install d3[\/java]<\/p>\n

or,
\nyou can simply download the <\/span>latest version<\/a> and include it in your page.<\/span><\/p>\n

Drawing a Line Chart :<\/strong><\/p>\n

Step 1 :\u00a0First, we\u2019ll need some data to plot. We\u2019re going to use the following data.<\/p>\n

[java] var lineData = [{a: 1, y: 5}, {a: 20, b: 20}, …… , {a: 100, b: 60}]; [\/java]<\/p>\n

Step 2 : Create an empty div which will enclose the chart<\/p>\n

[java]
\n<div id="chartArea"><\/div>
\n[\/java]<\/p>\n

Step 3\u00a0: Creating SVG\u00a0element<\/p>\n

[java]
\nvar margin =\u00a0{top: 30, left:30, right:30, bottom:30},\u00a0width = 800,\u00a0height = 500;
\nvar svg = d3.select("#chartArea").append("svg")
\n.attr(‘id’, ‘mychart’)
\n.attr("width", width)
\n.attr("height", height)
\n.style(‘border’, ‘1px solid #ccc’);<\/p>\n

[\/java]<\/p>\n

Step 4 :\u00a0Define scale and axes<\/p>\n

[java]
\nvar xScale = d3.scale.linear().range([margin.left, width – margin.right])
\n.domain([0, 100]),
\nyScale = d3.scale.linear().range([height – margin.top, margin.bottom])
\n.domain([0, 100]);\u00a0<\/p>\n

var xAxis = d3.svg.axis().scale(xScale),
\nyAxis = d3.svg.axis().scale(yScale).orient(‘left’);
\n \/\/ y-axis it needs to be oriented to the left
\n[\/java]<\/p>\n

Here,\u00a0domain defines the minimum and maximum values displayed on the graph. Range is the area of the SVG we\u2019ll be covering.
\nScales are functions that map from an input domain to an output range.<\/p>\n

Step 5\u00a0: \u00a0Append both the axis to the SVG and apply the transformation<\/p>\n

[java]
\nvar mySVG = d3.select(‘#mychart’) \/\/selects element with id equals to mychart, currently pointing to the above created SVG element.
\nmySVG.append("g") \/\/g element is used to group SVG shapes together
\n .attr("class", "x-axis")
\n .attr("transform", "translate(0," + (height – margin.bottom) + ")") \/\/The transforms are SVG transforms
\n .call(xAxis)
\n .append("text")
\n .attr("y", ‘3em’)
\n .attr("x", "30em")
\n .text("Quantity");<\/p>\n

mySVG.append("g") \/\/We create an SVG Group Element to hold all the elements that the axis function produces.
\n .attr("class", "y-axis")
\n .attr("transform", "translate(" + (margin.left) + ",0)")
\n .call(yAxis)
\n .append("text")
\n .attr("y", "16em")
\n .attr("x", "-5.5em")
\n .text("Price ($)");<\/p>\n

[\/java]<\/p>\n

Here, the translate() function takes one or two values which specify the horizontal and vertical translation values, respectively.
\ntx represents the translation value along the x-axis and\u00a0ty represents the translation value along the y-axis.<\/p>\n

We have transformed both the axes, keeping the defined margins in view so that the axes don\u2019t touch the SVG margins.<\/p>\n

Step 6 : Next we are going to plot coordinates and draw a line.<\/p>\n

[java]<\/p>\n

var lineFunc = d3.svg.line().x(function(obj) {return xScale(obj.quantity)})
\n.y(function(obj) {return yScale(obj.price);});<\/p>\n

var path = svg.append("path")
\n.attr("d", lineFunc(lineData))
\n.attr("stroke", ‘#87CEEB’)
\n.attr("stroke-width", 3)
\n.attr("fill", "none");<\/p>\n

[\/java]<\/p>\n

d3.svg.line() constructs a new line generator with the default x and y accessor functions. The
\nreturned function generates path data for an open piece-wise linear curve.<\/p>\n

Now, we have successfully created a line chart, its time to\u00a0add some customization.<\/p>\n

Highlighting the path on hover<\/strong><\/p>\n

Let’s change the color of the line, when user hovers it.<\/p>\n

[java]<\/p>\n

path.on(‘mouseover’, function(obj) {
\n d3.select(this).attr(‘stroke’, ‘#00688B’);
\n}).on(‘mouseout’, function(obj) {
\n d3.select(this).attr(‘stroke’, ‘#87CEEB’);
\n});
\n[\/java]<\/p>\n

Adding tooltips<\/strong><\/p>\n

Step 1 : Create a empty div<\/p>\n

[java]<\/p>\n

var tooltipDiv = d3.select("body").append("div")
\n .attr("class", "tooltip")
\n .style("opacity", 0)
\n .style("position", "absolute")
\n .style("text-align", "center")
\n .style("width", "90px")
\n .style("height", "45px")
\n .style("padding", "2px")
\n .style("background", "beige")
\n .style("pointer-events", "none");
\n[\/java]<\/p>\n

Step 2 :\u00a0Plot circles.<\/p>\n

[java]<\/p>\n

var circles =\u00a0svg.selectAll("circle")
\n .data(lineData)
\n .enter().append("circle")
\n .style("fill", ‘#00688B’)
\n .attr("r", 5)
\n .attr("cx", function(obj) {
\n return xScale(obj.quantity);
\n })
\n .attr("cy", function(obj) {
\n return yScale(obj.price);
\n });<\/p>\n

[\/java]<\/p>\n

Step 3. Finally,\u00a0show\u00a0tooltip on hover<\/p>\n

[java]<\/p>\n

circles.on("mouseover", function(obj) {
\n tooltipDiv.transition().duration(200)style("opacity", .9);
\n tooltipDiv.html("Quantity : " + obj.quantity + "<br\/>Price : " + obj.price)
\n .style("left", (d3.event.pageX) + "px")
\n .style("top", (d3.event.pageY – 28) + "px");
\n }).on("mouseout", function(obj) {
\n tooltipDiv.transition().duration(500).style("opacity", 0);
\n });<\/p>\n

[\/java]<\/p>\n

And we’re done. I’ve also created a JsFiddle<\/a>\u00a0for the same.<\/p>\n","protected":false},"excerpt":{"rendered":"

D3 (Data-Driven Documents) is a JavaScript library to create\u00a0custom visualizations. It\u00a0combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data. D3.js graphs are for those who want to create complex, customized graphs. […]<\/p>\n","protected":false},"author":79,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1],"tags":[1669,4021,4023,4006,4022],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/40392"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=40392"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/40392\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=40392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=40392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=40392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}