Skip to content

Instantly share code, notes, and snippets.

View johan's full-sized avatar

Johan Sundström johan

253 followers · 8 following
View GitHub Profile
@johan
johan / 2011-10-26.csv
Created November 8, 2011 10:14 — forked from johan/README.md
Page load time histograms
page time count
root 2 80
root 4 38
root 6 16
root 8 3
root 10 2
root 12 1
root 14 1
root 16 3
root 20 2
@johan
johan / index.html
Created November 11, 2011 09:32 — forked from johan/index.html
Google Maps + D3 + USGS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>Earthquakes &gt; 1.0 the past week</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
<script src="http://mbostock.github.com/d3/d3.csv.js?2.5.0"></script>
<script src="http://mbostock.github.com/d3/d3.time.js?2.5.0"></script>
<style type="text/css">
@johan
johan / index.html
Created November 25, 2011 00:24 — forked from johan/dnd.js
Animated Draggable Spinny Globe
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>d3.js Spinny Globe from Mike Bostock's SVG Open 2011 keynote</title>
<script src="http://mbostock.github.com/d3/d3.js"></script>
<script src="http://mbostock.github.com/d3/d3.geo.js"></script>
<link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/style.css"/>
<link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css"/>
<style type="text/css">
@johan
johan / dnd.js
Created November 25, 2011 06:55 — forked from johan/index.html
Spinny Globe with drag-and-drop-geojson-file support
// http://www.html5rocks.com/en/tutorials/file/dndfiles/
d3.select('svg')
.on('dragover', handleDragOver)
.on('drop', handleFileSelect)
;
function handleFileSelect() {
var event = d3.event
, files = event.dataTransfer.files // FileList object
, about = []
@johan
johan / dnd.js
Created December 4, 2011 22:03 — forked from johan/dnd.js
Drag and drop geo-json feature files to paint your planet!
// http://www.html5rocks.com/en/tutorials/file/dndfiles/
d3.select('svg')
.on('dragover', handleDragOver)
.on('drop', handleFileSelect)
;
function handleFileSelect() {
var event = d3.event
, files = event.dataTransfer.files // FileList object
, about = []
@johan
johan / lines.json
Created May 20, 2012 18:20 — forked from johan/map_lines.js
Swiss railroad geography as pure JSON, c/o swisstrains.ch 2012-05-19
{ "1": [[46.727144, 6.579807, 0], [46.746532, 6.607534, 3112]]
, "4": [[46.806329, 6.642031, 0], [46.850339, 6.722199, 7992]]
, "5": [[46.850339, 6.722199, 0], [46.877512, 6.757468, 4303]]
, "6": [[46.877512, 6.757468, 0], [46.899357, 6.781262, 3120]]
, "7": [[46.899357, 6.781262, 0], [46.929504, 6.811392, 4120]]
, "8": [[46.929504, 6.811392, 0], [46.959745, 6.835334, 4036]]
, "9": [[46.959745, 6.835334, 0], [46.966751, 6.847635, 1237]]
, "11": [[46.979883, 6.877393, 0], [46.985642, 6.908226, 2479]]
, "14": [[47.014811, 6.982413, 0], [47.038340, 7.023455, 4200]]
, "15": [[47.038340, 7.023455, 0], [47.051921, 7.039871, 1987]]
@johan
johan / lines.json
Created May 20, 2012 18:45 — forked from johan/lines.json
Swiss railroad detail geography JSON, c/o swisstrains.ch 2012-05-19
This file has been truncated, but you can view the full file.
{ "1": [ [46.727144, 6.579807, 0]
, [46.728009, 6.580875, 126.15]
, [46.728987, 6.58204, 266.7]
, [46.730101, 6.583268, 422.13]
, [46.731077, 6.584301, 556.36]
, [46.732324, 6.585232, 712.29]
, [46.733661, 6.586194, 878.24]
, [46.73493, 6.587092, 1035.24]
, [46.735995, 6.587862, 1167.56]
, [46.736744, 6.588539, 1265.64]
@johan
johan / CHE.geo.json
Created May 20, 2012 19:13 — forked from johan/lines.json
Swiss railroad detail geo-JSON, c/o swisstrains.ch 2012-05-19
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@johan
johan / google-map-marker-with-shadow.js
Created May 21, 2012 17:02 — forked from simonw/google-map-marker-with-shadow.js
google-map-marker-with-shadow.js
/* Here's how to add a coloured marker to a Google Map with a shadow in the
right place.
The pin itself used to be dynamically generated via Google Charts:
//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|3491FF|000000
documented here:
https://developers.google.com/chart/image/docs/gallery/dynamic_icons
Note however that this API was marked as deprecated on April 20th 2012
although it's not clear when or if it will be turned off.
@johan
johan / index.html
Created June 14, 2012 19:49 — forked from mbostock/.block
SVG Path Cleaning
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<svg viewBox="0 0 2000 1625.4" width="960" height="500">
<path fill="#52ade5" d="m2e3 192.42c-73.58 32.64-152.67 54.69-235.66 64.61 84.7-50.78 149.77-131.19 180.41-227.01-79.29 47.03-167.1 81.17-260.57 99.57-74.84-79.75-181.48-129.57-299.5-129.57-226.6 0-410.33 183.71-410.33 410.31 0 32.16 3.63 63.48 10.63 93.51-341.02-17.11-643.37-180.47-845.74-428.72-35.32 60.6-55.56 131.09-55.56 206.29 0 142.36 72.44 267.95 182.54 341.53-67.26-2.13-130.54-20.59-185.85-51.32-.04 1.71-.04 3.42-.04 5.16 0 198.8 141.44 364.64 329.15 402.34-34.43 9.38-70.68 14.4-108.1 14.4-26.44 0-52.15-2.58-77.2-7.36 52.22 163.01 203.75 281.65 383.3 284.95-140.43 110.06-317.35 175.66-509.6 175.66-33.12 0-65.79-1.95-97.88-5.74 181.59 116.42 397.27 184.36 628.99 184.36 754.73 0 1167.46-625.24 1167.46-1167.47 0-17.79-.41-35.48-1.2-53.08 80.18-57.86 149.74-130.12 204.75-212.41"/>
</svg>
<script>
var svg = d3.select("svg"),
path = svg.select("path")