Skip to content

This is an example of what you should be able to do once the major browsers implement some seriously cool features in the CSS3 draft spec as of April, 2016:

  1. [CSS variables][vars], using the --name: value assignment and var(--name) accessor syntax. (Already implemented by Chrome, Firefox, and Webkit!)
  2. [CSS3 calc()][calc], which gives us calculated values between different units, e.g. subtracting a value in px or em from a percentage. (Partially implemented in Chrome, Firefox, and Safari.)
  3. [CSS3 attr()][attr], which grants the function the ability to parse values in specific units in the form attr(attr-name units). (Not yet implemented in any major browser.)

Together, these features would enable us to use HTML element attribute values as the basis for calculated values in CSS on a per-element basis, and define (then change) which property the values are applied to. This would open up possibilities for more data-driven design entirely in CSS, without the need for JavaScript.

Note: I've

View markdown.html
{% capture markdown %}{% include {{ include.content }}.md %}{% endcapture %}
{{ markdown | markdownify }}

BEA API RegionalProduct dataset / IndustryId values

1All industry total [State Annual SIC]
2Private industries [State Annual SIC]
3Agriculture, forestry, and fishing [State Annual SIC]
4Farms [State Annual SIC]
5Agricultural services, forestry, and fishing [State Annual SIC]
6Mining [State Annual SIC]
7Metal mining [State Annual SIC]
8Coal mining [State Annual SIC]
9Oil and gas extraction [State Annual SIC]
10Nonmetallic minerals, except fuels [State Annual SIC]
11Construction [State Annual SIC]
12Manufacturing [State Annual SIC]
13Durable goods manufacturing [State Annual SIC]
14Lumber and w


This is an attempt to get Leaflet working with D3's Albers USA projection.

This first stab works deceptively well: the coordinates are at least self-consistent, so centering, panning and zooming work as expected. There are some problems, though:

  1. The d3.geo.albersUsa() projection appears to return null for coordinates that don't fall within its parallels, which Leaflet doesn't like.
  2. Likely related, something in Leaflet's bounding box calculation for the US GeoJSON produces NaNs and fails.
  3. The D3 projection's scale(.25) is a stab in the dark that makes the US approximately the right size at zoom 3, but is most certainly wrong.

In general, it's not clear whether we should be transforming D3's projection (which, according to the docs, doesn't support translation anyway) or Leaflet's transformation (currently a noop).

View lib.js
export default function foo() {
return 'foo';
export function bar() {
return 'bar';
View form-save.js
// NOTE: the '#form-id' selector below will most certainly be different
// for whatever page you're on. Remember to change it in both instances!
// run this in the terminal to save the state of your form
// in your browser's LocalStorage:
[]'#form-id').elements, function(el) {
localStorage.setItem(, el.value);
// then refresh the page and run this to restore your form values:
View data.yaml
# fields is a map, the keys of which are the output columns
# the simplified form just maps an output column to an input column
# internally, this should still be represented as a hash with
# the minimum set of useful metadata with reasonable defaults
name: CITNM
# the more descriptive form provides column metadata:
View index.html
<!DOCTYPE html>
<html lang="en">
<script src=""></script>
<script src=""></script>
body {
margin: 0;
padding: 1em;

This is a fork of the Mike Bostock's World Tour with an additional bitmap for doing point-in-polygon lookups with unique colors, as described in this stackoverflow answer.

Move your mouse over the countries to highlight them with their corresponding bitmap color.


ASCII California

  1. If you don't have Node yet, get it.
  2. Run npm install to get geotype.
  3. Run this to get your own ASCII California:
Something went wrong with that request. Please try again.