This is a reusable graph for implementing a slopegraph, a type of graph introduced by Edward Tufte, best for comparing changes across different keys. The goal of this gist is to be a quick substitute to transform a typical table with numbers to a table like structure with numbers but also lines to quickly see trends.
The graph expects data in the form of a CSV, where the first column is a 'key' variable (e.g. Cancer Types) and the rest of the columns are numbers. You only need to specify the SVG ID, the path to the data file, as well as the names for your table headers.
The first example is from Tufte's Beautiful Evidence. The dataset itself is from Hermann Brenner, "Long-term survival rates of cancer patients achieved by the end of the 20th century: a period analysis," The Lancet, 360 (October 12, 2002), 1131-1135.
The second example is just a dataset I had from scraping metadata of Harry Potter fan fictions. This graph should only be treated as a notional example of switching data out and getting a working graph without any modifications. Actually comparing the data in that graph would be inaccurate, since the 'canon percentage' is on a different scale than the 'fan fiction percentage' (canon is how many times a character was mentioned in a book out of all character mentions, fan fiction is the percentage of times a character is tagged as a main character in a fan fiction).
Possible improvements:
- A lot of room to add interactivity
- The code prepares enough space for the worst case scenario, where the span between all data values is the max possible. While the spans for the cancer set are relatively similar, the spans for the Harry Potter set are more ranging- we can see that the difference between canon Voldemort and fan fiction Voldemort is much smaller than the difference between canon Draco Malfoy and fan fiction Draco Malfoy. The code prepares the graph so that every character can have as much space as a Draco Malfoy if necessary. This leads to the extra space at the bottom since many of the characters do not need that much space. An improvement would be to dynamically determine proper space ratios.
- Could have another type of slopegraph that has all values on the same axis, as described by Dave Nash in this thread.