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.


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

For csv Data

[code language=”javascript”]
d3.csv(“data.csv”, function (data) {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=””].

[code language=”javascript”]
<script src=””></script>
<script src=””></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()

var yAxis = d3.svg.axis()

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 =“body”).append(“svg”)
.attr(“width”, width + margin.left + margin.right)
.attr(“height”, height + + margin.bottom)
.attr(“transform”, “translate(” + margin.left + “,” + + “)”);;

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

.attr(“class”, “x axis”)
.attr(“transform”, “translate(0,” + height + “)”)

.attr(“class”, “y axis”)
.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); });

.attr(“class”, “line”)
.attr(“d”, line(data));

.attr(“class”, “dot”)
.attr(“cx”, function (d) { return x(d.MonthName); })
.attr(“cy”, function (d) { return y(d.PageViews); })
.attr(“r”, 4.5)
.on(‘mouseout’, tip.hide);



Leave a Reply

Close Menu