6 |
Scatter Plot With Trend Lines
7 |
8 |
Creating a scatter plot is pretty straightforward, but adding trend lines can be a little tricky. Lets tackle that with Chartbuilder.
9 |
We'll start by importing our data. Select Scatter Plus Line Chart as your chart type, then upload a tsv file containing data for the density of MRI units in the US vs other countries from 1995-2010 by clicking Add Existing Data -> Upload. The tsv file has some basic time series data that Chartbuilder will convert into groups for editing.
10 |
11 |
Scatter charts allow you to change the size and shape for the data point markers from the live edit table view. After that we can make a few more tweaks if we like. I've added text and scaled the y-axis to show 0-40.
12 |
13 |
Now comes the tricky part. The charting library doesn't do the calculations for the trend line automatically, so we'll have to do it ourselves, and input in the two special data group fields: slope and intercept. Slope can be calculated by via a simple equation:
y1 - y2 / x1 - x2 (You can use different points if you want to adjust the trend line.)
Intercept is the point on the Y-axis where the line intersects at x = 0. So for this data it's actually a little odd since we're using the numerical point values of the year. Finding the intercept:
[slope] x [-xmin] or 1.3052941176470592 x -1995
for the second line in our data. This calculation is imperfect, so we can nudge the intercept manually until we get the line in the right place. I settled on
-2593. Be aware that if you change the Datatype of your axis, the calculation may change eg choosing
Date for the X-axis would necessitate using the timestamp value in that calculation instead.
14 |
{{ tutorial2.meta.title }}
15 |
{{ tutorial2.meta.subtitle }}
16 |
17 |
{{ tutorial2.meta.caption }}
18 |
{{ tutorial2.meta.attribution }}
19 |
21 |
Line Chart with Two Highlight Lines
22 |
23 |
This one is a little different, since we only want to highlight two lines, but still show the rest. This is the chart we want to match:
24 |
25 |
26 |
27 |
28 |
There are some things we can't do with Chartbuilder, yet, like adding the persistent labels to a line, or adding a generic label. The chart we build is going to be a little different, and will supplement the plot lines with an interactive tooltip.
29 |
30 |
First, let's import data. In the csv file for this example we have years and percentages for several countries. The first column is a standard four digit year, the second is a formatted percentage. Upload the csv data to Chartbuilder by clicking Add Existing Data -> Upload. Now we have values populated in our data groups, and some plotted lines. To get these to plot properly for our line graph, we'll need to set the datatypes and formatters for our axis. For the first column, we set x-Axis Datatype to Date. This attempts to parse dates from the values in the first column, and handles most common date formats, like this four digit year as well as 2005-12-14, etc. Now the graph knows we are making a time series, and will plot accordingly. We can also use the available time formatters to make our axis label look like it should. xAxis -> Tick Formatter has a few available options. We'll pick Year (YYYY). As for the y-Axis, since our percent values are already formatted, we can use the default y-Axis Datatype of Y, and set the y-Axis Tick Formatter to Percent (unmultiplied). Other percent formatters take raw decimal data and multiply it to get percentages, but we don't need to do that here.
31 |
32 |
Next we want to adjust our scale, so that the y-Axis goes from 0 to 18%. Use the y-Axis Endpoints option to set 0 (the start) and 1 (the end) to 0 and 18.
33 |
34 |
To smooth the lines, set Interpolate to bundle.
35 |
36 |
Since we're using custom colors in this chart, click Enable Live Edit, and go through each data series to associate highlight colors with United States and Comparable Country Average, and a grey for the other comparison countries. Enable useInteractiveGuideline for a nice tooltip that tracks the mouse on the x-Axis and summarizes the value group.
37 |
38 |
It's not exact, but we have replicated the data plot for this graph, and have a nice interactive tooltip for line values instead of the static line labels. This graph is also responsive and can be styled to match your site's theme.
39 |
40 |
{{ tutorial1.meta.title }}
41 |
{{ tutorial1.meta.subtitle }}
42 |
43 |
{{ tutorial1.meta.caption }}
44 |
{{ tutorial1.meta.attribution }}
45 |
