Skip to content

Instantly share code, notes, and snippets.

View enjalot's full-sized avatar

Ian Johnson enjalot

View GitHub Profile
Year ValueLandOcean ValueLand ValueOcean MeanLandOcean MeanLand MeanOcean
1914 -0.19 -0.08 -0.23 13.9 8.5 16.1
1915 -0.11 -0.07 -0.13 13.9 8.5 16.1
1916 -0.31 -0.37 -0.28 13.9 8.5 16.1
1917 -0.34 -0.52 -0.27 13.9 8.5 16.1
1918 -0.24 -0.36 -0.18 13.9 8.5 16.1
1919 -0.26 -0.32 -0.23 13.9 8.5 16.1
1920 -0.24 -0.3 -0.22 13.9 8.5 16.1
1921 -0.17 -0.06 -0.21 13.9 8.5 16.1
1922 -0.26 -0.24 -0.27 13.9 8.5 16.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cleaning Up</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;

This example is the second of three in the Path Transitions tutorial; see the previous example for context.

The desired pairing of numbers for path interpolation is like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M xl, y0 L x0, y1 L x1, y2 L x2, y3 L x3, y4

Where xl is some negative value off the left side, and xr is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xl,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to the left. Likewise, the incoming point ⟨xr,y4⟩ is interpolated to ⟨x3,y4⟩.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state {
fill: #ccc;
}
.county-border {
fill: none;
GEO.id GEO.id2 GEO.display-label HD01_VD01 HD02_VD01
1400000US36001000100 36001000100 Census Tract 1, Albany County, New York 2235 294
1400000US36001000200 36001000200 Census Tract 2, Albany County, New York 5412 792
1400000US36001000300 36001000300 Census Tract 3, Albany County, New York 6421 740
1400000US36001000401 36001000401 Census Tract 4.01, Albany County, New York 2412 188
1400000US36001000403 36001000403 Census Tract 4.03, Albany County, New York 4540 500
1400000US36001000404 36001000404 Census Tract 4.04, Albany County, New York 4902 544
1400000US36001000501 36001000501 Census Tract 5.01, Albany County, New York 3481 476
1400000US36001000502 36001000502 Census Tract 5.02, Albany County, New York 3747 370
1400000US36001000600 36001000600 Census Tract 6, Albany County, New York 3864 543

such force

drag me!

@enjalot
enjalot / crime.csv
Created November 11, 2013 18:12 — forked from ejs06003/crime.csv
Crime Count
Family Dispute 2724
Simple Assault 2408
M/V Violations 2280
Suspicious Activity 2003
Threatening 1296
Criminal Mischief 877
Other Investigation 847
Found Property 824
Mental Cases 823
@enjalot
enjalot / README.md
Last active December 22, 2015 10:18 — forked from milroc/README.md

Sparkline Directive for Angular with d3.js

The reusable chart pattern makes it easy to make components responsive to changes in data as well as dimension.

Integrating with Angular based on code by @milr0c: Angular.js + d3.js

Miles' talk on reusable charts with MV* Frameworks:Video

Shirley discusses a very similar pattern with Backbone: Video

@enjalot
enjalot / README.md
Last active December 22, 2015 09:58 — forked from milroc/README.md

Sparkline Directive for Angular with d3.js

The reusable chart pattern makes it easy to make components responsive to changes in data as well as dimension.

Integrating with Angular based on code by @milr0c: Angular.js + d3.js

Miles' talk on reusable charts with MV* Frameworks:Video

Shirley discusses a very similar pattern with Backbone: Video