This article goes through use of the responsive line graph component. As of 2022 it comes in two varieties using either an external datafile or data interally in the script. They work in different ways but each can have their use case. Some other 2022 updates are improved interactivity with the tooltip. Here is the line graph with internal data showing som population data from SSB.
Download the files here:
ResponsiveCurve_2022.zip
- Setting up a common table structure
- Converting the table to a json format
- Loading the json data into d3
- Placing the data internally in the component (2022 update)
Setting up a common table structure
This article will describe how to get data into a responsive curve graph component. A curve graph usually shows the development of a variable over time. It can show stock values, sports results over time, temperatures over time etc. In order to get a nice curve we need a dataset where time is an axis. Time will often be in the top row or the first column. Here is a made up example where time is represented as year intervals in the first column.
| year | banana | apple | cucumber | tomato |
| 1980 | 1 | 2 | 7 | 7 |
| 1981 | 3 | 6 | 5 | 6 |
| 1982 | 5 | 4 | 2 | 5 |
| 1983 | 7 | 7 | 3 | 4 |
You might have to transpose your table
This might change in the future, but currently this curve graph component needs the time variables in the left column as you can see above; the ‘year’ column has all the years in a column. If your dataset looks like the one below where the years are on the top row you need to transpose the data set. That means the contents of each row is converted to a column and vice versa. The reason for this is that this table format results in a very convenient json format from Shan Carter’s Mr. Data converter.
| year | 1980 | 1981 | 1982 | 1983 |
| banana | 1 | 3 | 5 | 7 |
| apple | 2 | 6 | 4 | 7 |
| cucumber | 7 | 5 | 2 | 3 |
| tomato | 7 | 6 | 5 | 4 |
So here is how to transpose it. Copy the table above:
Mark it with your pointing device, then click Ctrl + C (Win) or Cmd + C (Mac).
Open up a new google spreadsheet. Click on the top left cell, right click and choose:
Paste special > Paste values only
That is not transposing it, that is just to get rid of formatting that comes from the table in the browser. It is a good habit to use paste special rather than normal paste. In this case not using paste special can mess up the transposing.
Mark and copy the specially pasted table.
Open a new sheet in your spreadsheet document (+ on bottom tab).
Right click and choose:
Paste special > Paste transposed
The new table that originated from the one above should now have the years in a column on the left.
Convert to json format
Json is a very convenient format for many reasons. For on it is quite readable for a human. Another big advantage is that if json is formatted in a way good way you can make the data easier to access with Javascript code. This is good for app performance because it can save the number of operations necessary to create the graph.
Copy the table at the top which has years in a column by marking it.
Click Ctrl + C on Windows or Cmd + C on Mac. Now follow this link to Mr. Data Converter.
Paste the table in the top text box and observe the json format that comes out of it. The default json format is this:
[{"year":1980,"banana":1,"apple":2,"cucumber":7,"tomato":7},
{"year":1981,"banana":3,"apple":6,"cucumber":5,"tomato":6},
{"year":1982,"banana":5,"apple":4,"cucumber":2,"tomato":5},
{"year":1983,"banana":7,"apple":7,"cucumber":3,"tomato":4}]That’s ok but do we really need to repeat cucumber 4 times? Also numerical data is more convenient as numbers in arrays. Try changing the JSON output on Mr Data converter and see what happens.
Column Arrays is great for this. Each array has a property name that we can use and a nice clean array of numbers. Each array of numbers represents values that we want to draw as a curve spanning the years in the ‘year’ array. This is the current format of the curve graph but more might be added in the future.
{
"year":[1980,1981,1982,1983],
"banana":[1,3,5,7],
"apple":[2,6,4,7],
"cucumber":[7,5,2,3],
"tomato":[7,6,5,4]
}As soon as you have this you can copy paste it into a new file in your code editor. Save it as a .json file, or a .txt file if you are publishing in WordPress (Or any CMS system that refuses the json format).
So now you have the html file with the script. It is a rather long script but here are the parts you need to know to get the fruit and veggie data above into the curve graph.
Loading the external datafile
The following only applies if you are using the line graph with an external datafile
First you have to point to your own data file. Place the .json or .txt file inside the json folder included in the .zip file you just downloaded (Remember to unzip the file by the way!!).
Now you have to point to that file from within the curve component. Open the html file in your favourite code editor and take a look ath the code lines from 439 to 442. Only one d3.json method should be active and the rest should be commented out with ‘//’ at the beginning of the line. The other lines of code are example files you can try. To load your own file point to its filename with the same method.
//d3.json("json/inntekt.txt")
//d3.json("json/befolkning.txt")
d3.json("json/YourFileName.txt")That’s it. Now you can start your virtual server and test the file.
If your file has a different date format than date, year or quarter we need to make a parser that will convert its time format to a Date object. Email me immediately if you need this, it is quick to do but because of the enormous variety of time and date formats we often need to customize the date / time parsing.
Using an internal data source
In 2022 we got some fresh WordPress installations that refused us to upload json files to the media library, even if we renamed them. The simples solution is to place the structured json data in the script. This has some benefits and some drawbacks.
The biggest benefit is that this is easier to publish on a web server. You don’t need to upload an external file to the media library and then point to that uploaded datafile from the d3 component. Just upload the html file with the d3 component script and the data and it is published.
Another advantage as of now is that this file can run locally without using a virtual server. It might require a virtal server for other reasons if the file is modified but it works.
Disadvantages are that this component can not show any form of updated live data. It also adds slightly more mess to the code and if your data is really long it might add a lot. Remember that you can minify sections of the code in Visual Studio to ease your brain.