Jonathan Soma jsoma

Setting the style for the MapBox GL map template

Using a color scale

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"]],

Hosting your site on GitHub Pages

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!

Data Studio Charting Checklist

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.

Communicating successfully

Story

You can make a design critique request using this Google form

Critique: Ministers leaving under Theresa May (line chart)

Fixing text/font issues on ai2html exports

Using ai2html-config.json to specify fonts

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:

Putting multiple ai2html exports onto the same HTML 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.

Step 1: Make your 3 files

Each graphic should be in a different file. Keep them in the same folder, though.

How to understand the margin convention and axes in d3+svg

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

	#
	# 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!