Visualizing web page views using D3js

Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

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.

"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"

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

For Json Data

d3.json(“data.json”, function (data) {code…})

For csv Data

d3.csv(“data.csv”, function (data) {code…})

For tsv Data

d3.tsv(“data.tsv”, function (data) {code…})

Here is the data visualization in a line chart and the complete code. .

<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>

2 thoughts on “Visualizing web page views using D3js

  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.

Leave a Reply

Your email address will not be published. Required fields are marked *


− five = 3