Visualizing web page views using D3js

In this post I am going to show you a Data Visualization using web page view data which is the number of web page views in every month for the year 2014. I have downloaded the data in a csv format and after a bit of cleansing the data file, it looks as below.

[code]
“MonthName”,”PageViews”
“Jan”,”1646″
“Feb”,”1143″
“Mar”,”1643″
“Apr”,”1591″
“May”,”1645″
“Jun”,”2082″
“Jul”,”2633″
“Aug”,”3035″
“Sep”,”2882″
“Oct”,”2900″
“Nov”,”2780″
“Dec”,”2448″
[/code]

When it comes to load the data to your D3 project you can use the following preferred way.

For Json Data

[code language=”javascript”]
d3.json(“data.json”, function (data) {code…})
[/code]

For csv Data

[code language=”javascript”]
d3.csv(“data.csv”, function (data) {code…})
[/code]

For tsv Data

[code language=”javascript”]d3.tsv(“data.tsv”, function (data) {code…})[/code]

Here is the data visualization in a line chart and the complete code. [iframe width=”100%” height=”500″ src=”http://mund-consulting.com/Blog/mc-page-views-line-chart-tool-tip.html”].

[code language=”javascript”]
<script src=”http://d3js.org/d3.v3.min.js”></script>
<script src=”http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js”></script>
<script>
var margin = { top: 40, right: 20, bottom: 30, left: 40 },
width = 900,
height = 400;

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient(“bottom”);

var yAxis = d3.svg.axis()
.scale(y)
.orient(“left”);

var tip = d3.tip()
.attr(‘class’, ‘d3-tip’)
.offset([-10, 0])
.html(function (d) {
return “<strong>”+d.MonthName+”: </strong>
<span style=’color:black’>” + d.PageViews + “</span>”;
})

var svg = d3.select(“body”).append(“svg”)
.attr(“width”, width + margin.left + margin.right)
.attr(“height”, height + margin.top + margin.bottom)
.append(“g”)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);

svg.call(tip);

d3.csv(“mc_monthly_pageview_2014.csv”, function (error, data) {
x.domain(data.map(function (d) { return d.MonthName; }));
y.domain([0, d3.max(data, function (d) { return d.PageViews; })]);

svg.append(“g”)
.attr(“class”, “x axis”)
.attr(“transform”, “translate(0,” + height + “)”)
.call(xAxis);

svg.append(“g”)
.attr(“class”, “y axis”)
.call(yAxis)
.append(“text”)
.attr(“transform”, “rotate(-90)”)
.attr(“y”, 6)
.attr(“dy”, “.71em”)
.style(“text-anchor”, “end”)
.text(“Page Views”);

var line = d3.svg.line()
.x(function (d) { return x(d.MonthName); })
.y(function (d) { return y(d.PageViews); });

svg.selectAll(“path.line”)
.data(data)
.enter()
.append(“path”)
.attr(“class”, “line”)
.attr(“d”, line(data));

svg.selectAll(“circle”)
.data(data)
.enter().append(“circle”)
.attr(“class”, “dot”)
.attr(“cx”, function (d) { return x(d.MonthName); })
.attr(“cy”, function (d) { return y(d.PageViews); })
.attr(“r”, 4.5)
.on(‘mouseover’, tip.show)
.on(‘mouseout’, tip.hide);
});

</script>

[/code]

This Post Has 2 Comments

  1. Hi,

    Really it’s very useful to me. All other d3.js blocks are having the year format axis only. So it was very difficult to me to find out the example without parsedate. Thank you very much for the wonderful article.

  2. But the data points are not correctly pointed out in the graph. Could you please say the suggestions.

Leave a Reply

Close Menu