D3 JSON Data
We will cover previous examples, how to bind JSON objects to the __data__ attribute and how we can use JSON to clean up the code for easier comprehension.
The JSON is a collection of name/value pairs.
In JSON, the name must always be in double quotes. As an example:
This allows us to get specific information from our variable using a "dot" by writing secretAgent.number
This makes referencing code and data much easier.
Array of JSON Objects
As we discussed at the top of this section - Arrays can hold any type of information, even JSON.
Going back to our circle examples in a previous section (Using the SVG Coordinate Space With D3.js), we could write all the necessary data to visualize our circles are an array of circle objects:
We can see that jsonCircles is an array of three objects:
Let's rewrite our jsonCircles variable with lots of blank spaces and make the definitions more compact so that we can compare across lines:
Now we can get data from any JSON object in the array of JSON objects.
We can also get data from a key value pair out of a specific JSON object.
The result is:
The result is:
The result is:
This will be extremely useful in the next and subsequent sections for use inside of functions when using D3.js operators and methods.
Previous Example of Three Circles
In the Using the SVG Coordinate Space With D3.js section, we created and styled three circles using D3.js using the following D3 code:
This example used the data to set the cx, cy and style fill for each circle.
However, as you probably noticed, the cx and cy units were the same.
Also - perhaps more dangerous, was that the if statements had hard coded values ("green", "purple", "red").
Hard coded values are never a good idea, because if our data changes, then we would have to change our code in several places.
Binding JSON Objects to the __data__ Attribute
Using our example above (the three circles) and the JSON notation, we could write our data structure as JSON :
Note that we have moved our color from the if ... then functions in the D3.js code to our data.
This will not always be possible. For now, we will assume it is possible and deal with other cases later.
Which gives us this in the webpage:
This circles variable will contain the D3 selection containing the SVG Circle elements.
This gives us:
We then click into it and scroll down to look for the __data__ property:
As you can see the first JSON data element from the jsonCircles data structure was bound to the first SVG Circle element.
Which is fantastic!
Before we had been able to bind a single number to the __data__ attribute.
Now we have bound a JSON object to the __data__ attribute.
And because the object is bound to the __data__ attribute, it means that D3.js can use it within its operator and methods!
Use Bound JSON Objects to Alter SVG Elements
We will now use the bound JSON Objects in the __data__ attribute to alter the SVG Circles.
Above, we covered how JSON objects allow us to use their name/value pair to call specific data from them:
Combining these two pieces of knowledge, allows us to write the following anonymous functions that use JSON Object key value pairs to get data in D3.js:
Where name is the name associated with the specific name/value pair in the JSON Object.
In our case, using our jsonCircles JSON data array that we re-wrote above to make it easier to compare across lines, we have:
Remember that the extra spaces in the JSON definition don't matter as long as they are outside of the double quotes.