| # | |
| # 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! |
| {"mail.google.com":{"_enabled":true,"_rules":{".Cp":{"margin":"0 50px"},".aeJ, .no, .gb_7d.gb_Ce.gb_fe":{"background":"#f2f2f2"},".aia":{"margin":"0 auto","max-width":"840px"},".nK .byN":{"box-shadow":"none"},".oZ-jc.T-Jo.J-J5-Ji":{"margin-left":"0","padding-left":"0"},".oZ-x3::before":{"display":"none"},".zA":{"background":"#fff"},".zt":{"box-shadow":"0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24)"},"body":{"font-family":"'Helvetica Neue',Helvetica,Arial,sans-serif"},"comment0":{"comment":"/* Background and general styles */"},"comment1":{"comment":"/* Spacing and groups */"},"comment2":{"comment":"/* Checkbox */"},"comment3":{"comment":"/* View All */"},"comment4":{"comment":"/* Date */"},"comment5":{"comment":"/* click-all/settings bar etc thingies */"},"div > div:nth-child(6) > div:nth-child(1) > .BltHke.nK .byN":{"display":"none"},"div.D.E.G-atb:not(.bP)":{"comment6":{"comment":"/*display: none; */"}},"div.nJ.A2":{"border-color":"#616161","font-size":"100%","font-weight":"normal","m |
If you have a property called rating that goes from 0-10, this code will fill in your shape based on it. 1 will be a very light blue, 5 will be a slightly darker blue, and 10 will be even more dark. Numbers in between will be estimated (interpolated). Note that including the 5 level was not necessary - if rating were 5, MapBox GL would have guessed a color in between the 1 color and the 10 color.
'fill-color': [
'interpolate', ['linear'],
["to-number", ["get", "rating"]], We're going to start by creating a new repository using GitHub Pages.
And we're going to name is after ourselves! My github username is jsoma, so I'm going to call my repository jsoma.gitub.io.
Name your repository
YOURUSERNAME.github.io. Double-check what your GitHub username is. If you do this part wrong, you'll be sad!
You can see a few suggestions at http://designingviz.com/ which may or may not be reasonable. I also really recommend The Wall Street Journal Guide to Information Graphics, a pretty tiny book that is remarkably helpful at helping you not screw things up.
Micro-tutorials for Illustrator can be found at http://jonathansoma.com/lede/data-studio/, including how to open your Python files in Illustrator. Longer, detailed Illustrator tutorials can be found on Lynda.com, accessed for free through the Columbia portal.
| .DS_Store |
You can make a design critique request using this Google form
Sometimes when you're working on a graphic with ai2html, your exported graphic might have issues with text.
For example, this one has text that runs off the side of the page:
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 walkthrough uses Homework 5: Question 10 as a base, but if you're just a random person from the internet it might still make sense
Let's say we do the totally normal height = and width = thing, and the totally normal svg = d3.select thing.
var height = 400
var width = 400