Jonathan Soma jsoma

Installing R in Jupyter notebooks without Anaconda

You need to already have Jupyter installed! If you don't have Python+Jupyter set up, you could use Python Wrangler or you can honestly just go install Anaconda to get started more quickly.

Download R

You can find it at https://cloud.r-project.org. It’s hard to figure out where exactly to go, so here are direct links that might be out of date:

OS X: https://cloud.r-project.org/bin/macosx/R-3.6.3.pkg
Windows: https://cloud.r-project.org/bin/windows/base/R-3.6.3-win.exe

Install all of your "real" geo dependencies using homebrew

brew install proj
brew install geos
brew install gdal

Create your pipenv

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.

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.

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.

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

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.

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:

	{
	"Version":"2012-10-17",
	"Statement":[
	{
	"Sid":"PublicRead",
	"Effect":"Allow",
	"Principal": "*",
	"Action":["s3:GetObject","s3:GetObjectVersion"],
	"Resource":["arn:aws:s3:::YOUR_BUCKET_NAME_GOES_HERE/*"]
	}

	<CORSConfiguration>
	<CORSRule>
	<AllowedOrigin>*</AllowedOrigin>
	<AllowedMethod>GET</AllowedMethod>
	</CORSRule>
	</CORSConfiguration>