D3 And JavaScript: Working With JSON

Description

This example covers the basics of how to use JSON when working with D3 and JavaScript.

Example

Why Working With JSON Is Important:

JSON is a human readable data interchange format.

JSON makes moving data around your JavaScript Application/Data Visualization easier.

This helps you get the benefit of organizing your data as well as the benefits of interoperability and openness.


The Concept Behind JSON

The concept behind JSON is that it is a lightweight data exchange format.

It consists of a collection of name / value pairs.

Each value can be a string, number, array or another JSON object.

Because you can nest JSON objects within JSON objects, you can highly complex data objects.

Here is an example of a JSON object representing the 1972 movie "The Godfather":

In the above example the keys are in blue font color.

The values are in red font color (except for the number 1972 which is in green).

Notice that the blue writing is always double quoted.

This is one of the things that designates a JavaScript Object Literal a JSON object.

Notice that the keys in blue color are camel-cased - there are no spaces between words and each word (other than the first) has starts with a capital letter.

For example the variable for the year filmed is written as "yearFilmed".

The letter Y is lower case, there is no space between the two words and the letter F is upper case.

This is a JavaScript coding convention that started with the creators of JavaScript.

The other thing to notice about keys is that no spaces are used in between words.

This will make it much easier to work with when we use D3 and JavaScript to work with this JSON object.

Next, lets assign this JSON object to a JavaScript Variable

This variable can now be used to pass the JSON object around as well as to get and set information from the object.

Which is great because rather than having a specific variable for each character, novel author, year filmed, director and title - we are able to encapsulate all of the information within one easy to use and access variable.

This is why JSON has done so well - because it is an easy to read data interchange format.


How To Work With JSON

Now that we have a JSON variable we can use D3 and JavaScript to work with the JSON object.

The whole JSON object has been assigned to the JavaScript variable "theGodfatherMovie".

In the JavaScript console, we assign the variable and then extract the title of the movie from the variable.

D3 and JavaSCript Working With JSON Console Picture 001

Note that we extract the title of the movie in two ways:

First - we treat the variable as if it was a dictionary.

We pass it the word title in double quotes and it returns the definition which is "The Godfather".

Second - we treat the variable as if it was an object.

We tell the variable we want the title property by appending a ".title" on it.

It responds with "The Godfather".

Though both are ways to access the same information from the JSON object with JavaScript, the preferred convention is to ask the object variable for the property we want.

This is why we do not put spaces or any kind of punctuation in the JSON keys.

Because if there were spaces in the JSON keys, then we would not be able to get the object property by appending the property name to the end of the variable after a period.

Next, we briefly talk using JSON objects with D3.js.

D3.js likes the data you feed into it to be arrays of data.

The data inside of the arrays can be functions, numbers, strings or objects.

Because we can put objects into the array we feed to D3.js, we can use JSON objects.

The nested nature of the objects, then allows us to do some really interesting things.

In this next example we will use the main characters key value pair of the JSON object to generate paragraphs that have the character names.

D3 and JavaSCript Working With JSON Console Picture 002

Here you can see that first we define the variable.

Then we use JavaScript to get the mainCharacters property from the JSON object.

The JSON Object returns the value of the "mainCharacters" key which is the array of main characters.

We are able to use this array to bind each interior JSON object to paragraph elements using D3.js.

It is important to note that in the array of objects, none of the keys have any data in them.

This is why each object has two key, value pairs - the characterName and actor name.

This is because when you work with JSON for use in JavaScript and D3, you never want to have any data in the keys - you want to keep the keys as generic as possible.

Once we have this array of JSON objects, we bind each on to an HTML paragraph element using the D3.js pattern.

Lastly, we can use the JSON objects that have now been bound to each HTML paragraph element.

We do this by using the D3.js text operator and an anonymous JavaScript function to go through all of the paragraph objects, get the data attribute attached (which is a JSON object), get the characterName property and then set the text of the paragraph element as that returned value.

As you can probably guess, not only can we set the text value of the HTML paragraph element, we could also set any kind of the paragraph attributes by this same methodology.

This is where the power of using D3.js and JavaScript to work with JSON objects comes from - from the the nesting and the way we can have JSON objects which have arrays as values where each of those arrays contain JSON objects inside of them.

This allows us to encapsulate our data in a very easy to read data interchange format that is very helpful for creating Data Visualizations and JavaScript programs.


Working With JSON In The Real World

Once you start working with a web server and doing XHR AJAX calls, the best data interchange format to use is JSON.

It is simple, human readable and almost every programming language out there has parsers and generators for the data format.

When working in an environment with D3.js and JavaScript - it is very helpful to use it both for ajax requests (d3.json(...)) as well as when defining variables at the top of your program.

If you look at the D3.js Margin Convention (http://bl.ocks.org/mbostock/3019563), you will see that one of the basic building blocks of making D3.js Data Visualizations is a JSON object that contains margins for the four sides of the SVG Viewport.

Between this basic example of how to use JSON when working with D3 and JavaScript as well as the D3.js Margin Convention example found in that link, you should now have a good idea of how to use JSON in the real world.

Want to better understand this D3 Example?
Check out these super-useful D3.js Screencast Videos (1 in 3 are free...)
=> D3 Screencasts Videos