In the template we've been using, I used @media CSS queries to tell the page which to use at which size. This won't work for larger numbers of graphics (at least without effort), so we're going back to using the JavaScript I used in the YouTube walkthrough.
Each graphic should be in a different file. Keep them in the same folder, though.
This doesn't work that well if we don't set up a node project first.
First, open up the homework folder in your text editor, not just the files individually. This is just because it makes life a lot easier, not necessarily because you need to (although... maybe you do?)
On the command line, cd into the folder that your work is in. Or try using View > Terminal from the upper menu to make a terminal open up in VSCode.
Since we live in a future that involves cool modern JavaScript and build systems like webpack and Parcel, you might sometimes have a little trouble installing or using JavaScript or D3 libraries. Let's take a look at two, and how we adapt them for our code (specifically with sawhorse).
d3-tip has been around since the earth was formed.
To use d3-tip, we first install it. It's easy.
So, you need to add an ai2html graphic to your sawhorse-driven page. Let's do it!
First, start with your .ai Illustrator file. You can start with something you exported already, but you can run into a lot of problems, so let's just start from the .ai.
Open your Illustrator file up in Illustrator.
| [ | |
| { | |
| "AllowedHeaders": [ | |
| "*" | |
| ], | |
| "AllowedMethods": [ | |
| "GET" | |
| ], | |
| "AllowedOrigins": [ | |
| "*" |
| # | |
| # WAIT!!! | |
| # WAIT!!! | |
| # You probably don't need this any more! Newer versions of matplotlib | |
| # can do this with built-in magic. See these StackOverflow answers: | |
| # | |
| # https://stackoverflow.com/questions/41296313/stacked-bar-chart-with-centered-labels/60895640#60895640 | |
| # https://stackoverflow.com/questions/28931224/adding-value-labels-on-a-matplotlib-bar-chart/67561982#67561982 | |
| # | |
| # Big thanks to @trenton3983 for keeping us all up to date! |
| open | high | low | close | date | |
|---|---|---|---|---|---|
| $407.00 | $424.70 | $377.00 | $424.70 | 1996-12-09T00:00:00 | |
| $426.00 | $450.50 | $395.00 | $411.40 | 1997-01-02T00:00:00 | |
| $408.50 | $421.50 | $382.10 | $383.50 | 1997-02-03T00:00:00 | |
| $386.00 | $389.70 | $355.00 | $380.50 | 1997-03-03T00:00:00 | |
| $378.00 | $417.50 | $376.50 | $403.10 | 1997-04-01T00:00:00 | |
| $401.90 | $404.40 | $370.10 | $380.50 | 1997-05-01T00:00:00 | |
| $387.50 | $393.10 | $347.10 | $378.00 | 1997-06-02T00:00:00 | |
| $380.60 | $380.90 | $332.00 | $343.70 | 1997-07-01T00:00:00 | |
| $342.00 | $365.90 | $341.10 | $356.70 | 1997-08-01T00:00:00 |
| ai2html-html | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script> | |
| <style> | |
| .hidden { visibility: hidden; } | |
| </style> |