Loading JSON

Tutorial

What is JSON Data? JSON stands for Javascript Object Notation. It is a commonly used data interchange format. It is convenient to use in Javascript because it can store exactly the same types of data that Javascript supports. We've alread seen JSON data, but here is an example covering the various types of data it represents:

{
  graphType: "bar",
  color: "orange",
  numberOfBars: 20,
  percentAwesome: .75,
  xAxisLabels: ["abc", "def", "hij"],
  nestedObject: { "field with spaces": "value"  },
  isObject: true
}

As expected you can store all of the types of data you are used to storing in Javascript including: strings, integers, decimals, arrays, booleans and nested objects. The format is "key : value".

Typically when JSON is used to represent many pieces of data, it is stored as an array of JSON objects, which looks like a standard Javascript array.

[ 
  { letter: "a", count: 10 }, 
  { letter: "b", count: 20 },
  { letter: "z", count: 2 } 
]

Loading JSON into D3

The d3.json() function is used to load JSON data. Like the d3.csv() function, it takes two parameters, a json file to load and a callback of the form function(error, data). Below is an example of it in use.

// This is the callback function
function draw(error, data) {
  if (error !== null) 
  { 
    // it's always a good idea to handle the case where you're data doesn't load!
    alert("error loading data: " + error);
  }
  // create the table
  var tbl = d3.select("#example2").append("table");

  // create the table headers
  tbl.append("tr")
    .selectAll("th")
    .data(["Position Title", "Start Date"])
    .enter()
    .append("th")
    .text(function (d) { return d; });

  // Use neseting to create a tr for each record and a td for position title and start date.
  tbl.selectAll(".data tr")
    .data(data)
    .enter()
    .append("tr")
    .classed("data", true)
    .selectAll("td")
    .data(function(d) 
      {
        // I create a new data array from the existing data
        // This new data is the columns I want to create for each tr
        return [d.position_title, d.start_date];
      })
    .enter()
    .append("td")
    .text(function (d) { return d; });
}

d3.json("govt_software_jobs.json", draw);

For reference one record of "govt_software_jobs.json" is below. I've formatted it to make it easy to read.

{
  "id":"usajobs:385676000",
  "position_title":"Software Developer/Engineer",
  "organization_name":"U. S. Sentencing Commission",
  "rate_interval_code":"PA",
  "minimum":75621,
  "maximum":138136,
  "start_date":"2014-11-04",
  "end_date":"2015-11-03",
  "locations":["Washington, DC"],
  "url":"https://www.usajobs.gov/GetJob/ViewDetails/385676000"
}

The United States government has a Job Search API that returns JSON data. I have cached the results of a search for "software" jobs and displayed some of the data in the table above. The terms of service for their API require that I state "USA.gov and the federal government cannot vouch for the data or analyses derived from these data after the data have been retrieved from USA.gov." The search I used was http://api.usa.gov/jobs/search.json?query=software and I retrieve the data on January 5th, 2015. The results are stored in the file "govt_software_jobs.json".

Quiz

{  
  a=1,
  b=2
}
The above is valid JSON. True/False.

In the callback passed to d3.json, the first parameter is the data 
and the second is the error object. True/False

Things to do

We're going to use "govt_software_jobs.json" to create a list of links to USA Government job detail pages.

Create a callback function draw(error, data). It should append a "p" element for each data point passed in. Set the text to be that of the data point. Test it by calling draw([], [1,2,3]) after defining it.
Call draw using d3.json() using "govt_software_jobs.json" instead of the test harness.
Change draw so that each "p" element contains an "a" element. Set the "href" attribute to the posting's URL. Set the text to be the minimum amount offered and the position title. Use the money function to format the minumum amount to look pretty.

Extra Credit