How to use an API array to create a bar chart in D3.js

Question

I'm new to D3.js. I found a small tutorial to generate the bar chart. But it's using some array values. How can I append the following array value format to generate the bar chart?

{
  "data": [
    {
      "id": "md",
      "totalHits": 12,
      "uniqueHits": 8,
      "lastHitDate": "20140425124618"
    },
    {
      "id": "us",
      "totalHits": 3,
      "uniqueHits": 2,
      "spiderHits": 1,
      "lastHitDate": "20140424144343"
    },
    {
      "id": "ie",
      "totalHits": 1,
      "spiderHits": 1,
      "lastHitDate": "20140416111004"
    }
  ]
}

I got this from an API.

This is the D3 code.

<script>
                            var dataArray = [12, 3, 3, 1];
                            var width = 400;
                            var height = 300;
                            var widthScale = d3.scale.linear()
                                            .domain([0,60])
                                            .range([0, width]);
                            var axis = d3.svg.axis()
                                        .scale(widthScale);


                            var canvas = d3.select("#diagram1")
                                        .append("svg")
                                        .attr("width", width)
                                        .attr("height", height)
                                        .append("g")
                                        .attr("transform", "translate(20, 0)");

                            var bars = canvas.selectAll("select")
                                        .data(dataArray)
                                        .enter()
                                            .append("rect")
                                            .attr("fill", "#484848")
                                            .attr("width", function(d) {return widthScale(d);})
                                            .attr("height", 50)
                                            .attr("y", function(d, i){return i*70;});

                            canvas.append("g")
                                .attr("transform", "translate(0,280)")
                                .call(axis);

I need to use the totalHits for creating the Bar chart. Please help me.

Answer 1

You are actually quite close to a working solution! What was missing was to use the totalHits part of the data.

You can use d3.json() to load in the data from your api.

d3.json('/api/endpoint', function (error, results) {    
  var bars = canvas.selectAll("select")
    .data(results.data)
    .enter()
      .append("rect")
      .attr("width", function(d) { return widthScale(d.totalHits); })
      .attr("height", 50)
      .attr("y", function(d, i){return i*70;});
}

See this jsfiddle for a full example using you data above: http://jsfiddle.net/willeeklund/YG7Bc/2/

Sidenotes:

• When you load in data using the .data() method, the input should be an array.
• Inside the .width method you can try to log out the d variable for debugging.

Best of luck!

/Wille