Skip to content

Instantly share code, notes, and snippets.

View typeofgraphic's full-sized avatar

PB typeofgraphic

5 followers · 11 following
  • London, UK
View GitHub Profile
@typeofgraphic
typeofgraphic / README.md
Last active August 29, 2015 14:09 — forked from lmullen/README.md

Learning to create a reusable chart function for a scatter plot, following Mike Bostock's "Towards Reusable Charts." Also includes a random data generator.

@typeofgraphic
typeofgraphic / colorz.js
Last active August 29, 2015 14:06 — forked from brendansudol/colorz.js
var width = 660,
height = 600;
var color = d3.scale.linear()
.domain([0, width/4, width/4 * 2, width/4 * 3, width])
.range(["#fb000f", "#6e00fb", "#00fbec", "#8dfb00", "#fb3c00"])
.interpolate(d3.interpolateHsl);
var svg = d3.select("#colorz").append("svg")
.attr("width", width)
@typeofgraphic
typeofgraphic / data.csv
Last active December 13, 2015 18:18
Multi-line chart based on Bostock's (http://bl.ocks.org/3884955). The data file is CSV with (discreet) integer values for the x axis, where the original was a tsv with dates for the x axis. There is an error (i think) between Line 66 (the Pages function) and Line 105 which attempts to parse the Pages values to the line path. However, it is not h…
Occurance a b c d d f g h i j
1 166292 30212 123040 27224 5992 276200 80 4408 246852 34932
2 87256 22004 33608 16004 3316 125656 252 5120 147444 15652
3 48932 20280 40816 11872 1948 72856 188 4588 99108 9016
@typeofgraphic
typeofgraphic / mapD3JsonGeocode.html
Created January 4, 2013 23:47
Adaptation of Google Maps + D3.js Data file looks like this: [ {"country": "eth", "city": "adis abeba", "time": "2012-12-04T04:00:00", "count": 5}, {"country": "deu", "city": "munich", "time": "2012-12-04T19:00:00", "count":21}, {"country": "chn", "city": "wuhan", "time": "2012-12-04T18:00:00", "count": 1}, {"country": "usa", "city": "winthrop",…
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<style type="text/css">
html, body, #map {
width: 100%;