D3 and JSON
FREE     Duration: 8:44
Part of Course: Introductory D3 Course
 

Takeaways:

  • JSON, which stands for JavaScript Object Notation, is a text-based open standard designed for human-readable data interchange
  • JSON is used to represent data structures and associative arrays, called objects
  • JSON uses double quotes around the keys of the key value pairs
  • D3 comes with Associative Array Utilities like d3.keys, d3.values, and d3.entries
  • d3.keys returns an array containing the property key names of the specified associative array
  • d3.values returns an array containing the property values of the specified associative array
  • d3.entries returns an array containing the property keys and values of the specified associative array
  • The D3 Data Operator can take in an array of associative arrays and bind each associative array to a DOM element

Resources:

D3 Video Tutorial Lessons:

Transcript:

D3 and JSON

JSON Revisited

JSON = JavaScript Object Notation

JSON is a text-based open standard designed for human-readable data interchange.

It was initially based on JavaScript Objects

It is derived from the JavaScript for representing simple data structures and associative arrays, called objects.

It is now an open standard that is programming language independent.


JavaScript Object

var margin = {top: 20, right: 20, bottom: 30, left: 50};


JSON Object

var margin = {"top": 20, "right": 20, "bottom": 30, "left": 50};

As you can see, the difference comes from double quotes around the keys.

This will come in very handy as we construct more complicated Data Visualizations using D3.


Programming Languages able to parse/generate JSON: ASP, Ada, Bash, BlitzMax, C, C++, C#, Ciao, Clojure, Cobol, ColdFusion, D, Dart, Delphi, E, Erlang, Fantom, Go, Haskell, haXe, Java, JavaScript, Lisp, LotusScript, Lua, LabVIEW, M, Matlab, Objective C, OCaml, OpenLaszlo, Perl, PHP, Pike, PL/SQL, pljson, PowerShell, Prolog, Puredata, Python, Qt, R, Racket, Rebol, RPG, Ruby, Scala, Scheme, Squeak, Symbian, Tcl, Visual Basic, Visual FoxPro, and many more...


We use JSON to get comfortable with the Data Interchange Format.

As of the time of this recording, these are all the programming languages that are able to parse and generate JSON data structures.



D3 Associative Array Operators

var margin = {"top": 20, "right": 20, "bottom": 30, "left": 50};

Margin is a JSON object because of the double quotes around the keys.

That said, it is still a JavaScript Object Literal.

Which also means that it is an Associative Array.


D3 Associative Array Utilities

  • d3.keys(object)
  • d3.values(object)
  • d3.entries(object)

Much like D3 provides additional Methods to the JavaScript Array Methods

D3 also provides additional Methods to the JavaScript Associative Array Methods

These methods are d3.keys, d3.values and d3.entries.


Basic D3 Associative Array Utilities

  • d3.keys(object) ** HIGHLIGHT GREEN **
  • d3.values(object)
  • d3.entries(object)

D3.keys returns an array containing the property key names of the specified associative array.

The order of the returned array is undefined.


Let's look at an example in the JavaScript Console

var margin = {"top": 20, "right": 20, "bottom": 30, "left": 50};

d3.keys(margin);

First, we define our margin JSON Object / JavaScript Object / Associative Array.

Then we pass this object into the D3.Keys operator.

As you can see, D3 returns the keys of each key,value pair in the Associative Array.

var margin = {"top": 20, "right": 20, "bottom": 30, left: 50};

// BROWSER - Arrow up to get command and replace quotations

d3.keys(margin);

Note, even if we remove the quotation marks from the left key, making it a regular javascript object,

D3.keys still returns each of the keys in quotes inside of an array.


Basic D3 Associative Array Utilities

  • d3.keys(object)
  • d3.values(object) ** HIGHLIGHT GREEN **
  • d3.entries(object)


Let's look at an example in the JavaScript Console

var margin = {"top": 20, "right": 20, "bottom": 30, "left": 50};
d3.values(margin);

First, we define our margin JSON Object /"slash" JavaScript Object /"slash" Associative Array.

Then we pass this object into the D3.Values operator.

As you can see, D3 returns the values of each key,value pair in the Associative Array.

var margin = {"top": 20, "right": 20, "bottom": 30, "left": "50"};

// BROWSER - Arrow up to get command and add quotations around the number 50

d3.values(margin);

Note, if we put quotation marks around the number 50.

D3.values will return the array of values with the "50" as a string with quotations.

It is worth noting that when you receive a JSON Data Structure, you cannot assume that the values will be strings or numbers.

You will have to check the values to make sure they are what you are expecting, and convert if necessary.


Basic D3 Associative Array Utilities

  • d3.keys(object)
  • d3.values(object)
  • d3.entries(object) ** HIGHLIGHT GREEN **

D3.entries returns an array containing the property keys and values of the specified associative array.

The order of the returned array is undefined.


Let's look at an example in the JavaScript Console

var margin = {"top": 20, "right": 20, "bottom": 30, "left": 50};

d3.entries(margin);

First, we define our margin JSON Object / JavaScript Object / Associative Array.

Then we pass this object into the D3.Entries Operator.

As you can see, each element in the returned Array is an Object.

BROWSER - Open the objects

D3 returns the values of each key,value pair in the Associative Array inside an object.

Each object has two entries

An entry called key and an entry called value.

d3.entries(margin)[0];

Because this is an array, let's look at the first object

d3.entries(margin)[0]["key"];

d3.entries(margin)[0]["value"];

Because this object is an Associative Array, we can call the key or values by name to get the data.



D3 Data Operator Revisited

d3.selection.data([values[, key]])

This is the D3 Data Operator.

We have seen it before when we gave it values to bind to the selection.

The Data Operator joins the specified array of data with the current selection.

d3.selection.data([1,2,3,4,5]);

First, we defined the data inside of the D3 Data Operator.

Though when we first talked about the D3 Data Operator, we also covered that the values passed in could be an array of data values, such as an array of numbers or objects, or even a function that returns an array of values.

var myData = [...]

d3.selection.data(myData);

Then we moved to make things more modular and easier to read

And defined the array of numbers outside the data operator before feeding in the array into the D3 Data Operator.

obj1 = { ... };

obj2 = { ... };

obj3 = { ... };

var myData = [ obj1, obj2, obj3];

d3.selection.data(myData);

Now, instead of filling the array with numbers, we can fill it with objects.

The D3 Data Operator can take in an array of data values that contains objects.

So we can use objects to store and bind a great deal more data to each of the DOM Elements.



JSON in the D3 Data Operator

obj1 = { ... };

obj2 = { ... };

obj3 = { ... };

var myData = [ obj1, obj2, obj3]

d3.selection.data(myData);

What is great about doing this is that we can be very descriptive about the properties in each object

Both in the keys of the object as well as the values.

betterMargins = [ { "direction":"top",    "units":"20" },
                  { "direction":"right",  "units":"20" },
                  { "direction":"bottom", "units":"30" },
                  { "direction":"left",   "units":"50" } ];

Let's look at an example in the JavaScript Console

We start with an Array of JavaScript Object Literals

The array contains 4 JSON objects

Each JSON Object contains a direction and a number of units

If we look at the first row

The keys of that object are direction and units

The values of that object are "top" and "20"

Also note, that the spaces are added for readability.


Next, let's bind the data to HTML paragraph elements.

var paragraphs = d3.select("body").selectAll("p").data(betterMargins).enter().append("p");

This code should be familiar to you now.

We select the body element

We select all the paragraph elements

Next, we pass in betterMargins - an array of JSON Objects - into the D3 data operator.

We grab the .enter() selection with the JavaScript Object placeholder elements for each data element in the array

Then we merge the .enter() selection and the .update() selection by appending paragraph elements to each placeholder element.

BROWSER - Click on the tag to expand

BROWSER - Hover over all the data elements


As you can see, this created 4 paragraph elements.

paragraphs;

BROWSER - Click into the array, then the first element.

BROWSER - Highlight the __data__: Object

BROWSER - Click into the data object

BROWSER - Highlight the direction and units.

Each of those paragraph elements now contains a JSON object in the __data__ property.


Let's play around with the paragraphs now.

paragraphs.text( function (d,i) { return d; });

Using the D3 text operator, we write an anonymous function to return the thing attached to the __Data__ property.

As you can see, it returned a JavaScript Object

paragraphs;

BROWSER - HIGHLIGHT the first object in the Webpage

If we look at the variable and click into the arrays, we can see that the thing attached to the __Data__ property for each paragraph is indeed a JavaScript Object.

paragraphs.text( function (d,i) { return d.direction; });

BROWSER - User arrow up to get the last command and then add the .direction


Next, we can use the associative array functionality to get the direction from the object.

BROWSER - Hover over the paragraph elements in the actual website window

As you can see, the paragraphs now contain the text of each of the directions

paragraphs.text( function (d,i) { return d.units; });

BROWSER - User arrow up to get the last command and then add the .units


Next, we can use the associative array functionality to get the units from the object.

BROWSER - Hover over the paragraph elements in the actual website window

As you can see, the paragraphs now contain the text of each of the units

paragraphs.text( function (d,i) { return d.direction + ": " + d.units; });

BROWSER - User arrow up to get the last command and then add the d.direction + ": " + d.units

Because we are writing an anonymous function

We can do anything we want inside because it is a JavaScript Function

BROWSER - Hover over the paragraph elements in the actual website window

As you can see, the paragraphs now contain the text of each of the directions and the number of units for each direction.

obj1 = { ... };

obj2 = { ... };

obj3 = { ... };

var myData = [ obj1, obj2, obj3]

d3.selection.data(myData);

The great thing about this is that you can specify as many key,value pairs inside of an object as you want.

Which means you can attach a treasure trove of data to each DOM element.

Which you can then get out using the anonymous functions or named functions.

<< Back To D3 Screencast and Written Tutorials Index