You'd like to use the data from the graph to support your research...but you don't have access to it; moreover, you refuse to use the rather ugly graph you stumbled upon.
Problem? Nah. WebPlotDigitizer (data extraction), Plotly, and a little artistic flair to the rescue...!
Step 1: Take a Screenshot of the Original Graph
Step 2: Head Over to WebPlotDigitzer (http://arohatgi.info/WebPlotDigitizer/app/)
Step 3: Define Your Axes
You'll want to hit the "Define Axes" tab on the top of the app (1)
select 2D (X-Y) Plot (2),
Align Axes (3),
and then Proceed (4).
If you've done that correctly, your graph should once again be front and center and your mouse pointer now a cross-hair as you run it over the graph.
We will now align the x-axis; to do this, click any known point toward the bottom of the axis (say, 1950) and another toward the top (say, 2010). Be sure to get your cross-hair aligned as closely as possible to the graph ticks before you click.
If that was done right, you should see two small blue circles on the graph, one at 1950 and another at 2010.
You'll want to do the same thing once more, but this time for two points along the y-axis. I'll pick 50 for my bottom point and 150 for my top point.
Once you select both points, the "X and Y Axes Calibration" screen should appear. For the x-axis fields, input 1950/01 for point 1 and 2010/01 for point 2 (/01 for January of 1950/2010 ~ WebPlotD is smart with dates!). For the y-axis fields, input 50 for point 1 and 150 for point 2.
When you are done, hit "OK."
Step 4: Acquire Data!
The pop up should disappear and your cross-hair should be back. Next, you will want to place the cross-hair along one of the lines; let's choose the "Productivity" line first. Make sure the cross-hair is on a portion of the line, and then click. This will specify the foreground color; when I do this, I receive an RGB value of (58, 58, 58). Yours may be somewhat different depending on which portion of the line you clicked.
Now that WebPlotD knows what color you are looking for, you are now 100% ready to pull the data.
Select "Pen" on the right panel (1)
Since the line you are pulling data from is thin, notch down the stroke width of the pen (do this at the top panel of the app) (2)
Begin tracing the Productivity line on the graph; the line should become yellow as you draw over it (3)
Go all the way to the end of the line at the top of the graph; utilize the zoomed window at the top right of the app to be precise (4)
When you've finished tracing the line, click "Extract!" on the right panel. Fine tune the graph so that the line is close to solid. You can do these by playing with the "Color Distance." I used a color distance of 120 in my example. After this, hit "Get Points."
Finally, click "Create .CSV" along the right panel and select "Graph in Plotly." Once you do that, Plotly will load with your line, front, and center!
Wash - rinse - repeat for the "Median Family Real Income" line.
Step 5: Starting With Plotly
Step 6: Making a Plot
Voila! There is your graph, and it already looks a heck of a lot nicer than the original and you have even styled it yet.
Step 7: Styling Your Graph
If you aren't familiar with Plotly, I suggest that you explore all the styling menus at the top panel: Traces, Layout, Axes, Notes, and Legend to see what's what...
My first step was to shrink the size of the graph - think tall, not wide, so that the data spreads out. In the Layout menu, I made my width "700" and Height "550." While we are here, lets take a peek at the fonts. Among the Plotly selection, my personal favorite is 'Georgia.' It is a sophisticated font that is easy to read and not too large or small. Let's also change the font color from pure black to (33, 33, 33) -- a steel color that isn't as harsh on the eyes. Feel free to play with the Plot Color if you'd like; I kept mine the default white. Inside the "Margins" tab, turn your Plot Padding to 0. This eliminates unnecessary space and makes your graph look more professional.
We can now move over to the "Axes" tab. First step, select "X Axis" in the drop down menu and head to the "lines tab." I suggest turning the axis line off and the mirror off. This has a freeing effect on the graph and removes the semi-ugly black encasement. I also turned my X Axis grid lines off; Plotly's interactive display eliminates the need to keep them. To the Y Axis...you can turn the Axis Line and mirror off here as well. I kept my Y Axis grid lines on.
Now head over to the "Ticks" tab. You can select "All Axes" in the drop down menu; turn all ticks off. Since we removed the axis lines and mirrors on this graph, ticks are unnecessary. Your graph now looks more professional!
Let's zip over to the "TRACES" tab. Hit the "Style" tab. Plotly has awesome default colors. Select your favorites.
Lastly, hit up the "Legend" tab. I suggest making the "Background" and "Border" opaque (move color slider all the way to the left). You can also make the legend background a color that complements the lines of your graph. In this case, I chose to make my background a light grey to create contrast.
Be sure to title your graph, axis, and legend. Cite your source!
That's it! You have an awesome graph now and the data from the original is forever freed!