Skip to content

Instantly share code, notes, and snippets.

@cjhin
cjhin / README.md
Last active Dec 27, 2016
Burgernomics
View README.md
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.triangle-gold {
fill: gold;
}
.triangle-flashing {
fill: white;
transition: fill 1.5s ease;
@cjhin
cjhin / README.md
Last active Feb 13, 2021
D3 Day/Week/Month Line Chart
View README.md

D3 Time Series Day/Week/Month

Wanted to create a (daily) time series chart with automatic rollups to weekly/monthly lines AND nice transitions

Solution

The solution I ended up going with is a bit of an optical illusion.

All three views are technically backed by "daily" data.

View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bird {
stroke: grey;
stroke-width: 2;
fill: none;
}
</style>
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.zipcode {
stroke: steelblue;
fill: #FFF;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
@cjhin
cjhin / README.md
Last active Jul 24, 2016
Major League Soccer
View README.md

Major League Soccer season data (1996 - 2015)

I originally wanted to do a ranked bump chart but ended up finding the point spread to be more interesting/legible.

How To:

  • Hover over a point to view data for that club/season.
  • Click on a point to highlight all data points for that club.
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<svg width=960 height=500></svg>
</body>
<script src="//d3js.org/d3.v3.min.js"></script>
@cjhin
cjhin / Violations-2012.csv
Last active Aug 4, 2016
health violations
View Violations-2012.csv
violation_id inspection_id violation_category violation_date violation_date_closed violation_type
204851 261019 Garbage and Refuse 2012-01-03 00:00:00 2012-02-02 00:00:00 Refuse Accumulation
204852 261019 Unsanitary Conditions 2012-01-03 00:00:00 2012-02-02 00:00:00 Unsanitary conditions, not specified
204853 261023 Garbage and Refuse 2012-01-03 00:00:00 2012-01-17 00:00:00 Refuse Accumulation
204854 261023 Garbage and Refuse 2012-01-03 00:00:00 2012-01-17 00:00:00 Refuse Accumulation
204858 261029 Garbage and Refuse 2012-01-03 00:00:00 2012-03-12 00:00:00 Refuse Accumulation
204859 261029 Animals and Pests 2012-01-03 00:00:00 2012-03-12 00:00:00 Animals and Pests, not specified
207746 264687 Animals and Pests 2012-02-08 00:00:00 2012-04-02 00:00:00 Animals and Pests, not specified
205869 262387 Garbage and Refuse 2012-01-13 00:00:00 2012-01-17 00:00:00 Refuse Accumulation
207417 264347 Garbage and Refuse 2012-01-11 00:00:00 2012-01-13 00:00:00 Refuse Accumulation
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<canvas id="canvas" width="960" height="500"></canvas>
</body>
<script>
/*
Basically playing around with a couple of graphics things with the canvas:
@cjhin
cjhin / README.md
Last active Jul 24, 2016
fun (small) chart datasets
View README.md