jsoma

Install all of your "real" geo dependencies using homebrew

brew install proj
brew install geos
brew install gdal

Create your pipenv

jsoma

Using ai2html and sawhorse: A walkthrough

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.

Exporting from Illustrator

Open your Illustrator file up in Illustrator.

jsoma

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

d3-tip has been around since the earth was formed.

Installing d3-tip

To use d3-tip, we first install it. It's easy.

jsoma

Using eslint and prettier to make your code perfect and beautiful and help you catch bugs while you're writing it

Setting up a node project

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.

jsoma

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

jsoma

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.

jsoma

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:

jsoma

You can make a design critique request using this Google form

Critique: Ministers leaving under Theresa May (line chart)

jsoma

.DS_Store

jsoma

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