Skip to content

Instantly share code, notes, and snippets.

@hanjoes

hanjoes/.block

Last active March 7, 2016 03:20
Show Gist options
  • Save hanjoes/ca69b46379da73240f46 to your computer and use it in GitHub Desktop.
Save hanjoes/ca69b46379da73240f46 to your computer and use it in GitHub Desktop.
Download ZIP
Bar Chart
Raw
.block
scrolling: yes
Raw
coal.csv
date
1 1851.20260095825
2 1851.63244353183
3 1851.96919917864
4 1851.97467488022
5 1852.31416837782
6 1852.34702258727
7 1852.35797399042
8 1852.38535249829
9 1852.97672826831
10 1853.19575633128
11 1853.22861054073
12 1853.3189596167
13 1853.49965776865
14 1854.13483915127
15 1856.39630390144
16 1856.50581793292
17 1856.53867214237
18 1856.61806981519
19 1857.13826146475
20 1857.4038329911
21 1857.58179329227
22 1858.09103353867
23 1858.15400410678
24 1858.40588637919
25 1858.94524298426
26 1860.12525667351
27 1860.16906228611
28 1860.59069130732
29 1860.8507871321
30 1860.91923340178
31 1860.97125256674
32 1861.18480492813
33 1861.73785078713
34 1861.83641341547
35 1862.13757700205
36 1862.8932238193
37 1862.9370294319
38 1863.17796030116
39 1863.79397672827
40 1863.93908281999
41 1863.98562628337
42 1865.45859000684
43 1865.97056810404
44 1866.0636550308
45 1866.3401779603
46 1866.45242984257
47 1866.83299110199
48 1866.94798083504
49 1866.95071868583
50 1867.63518138261
51 1867.85420944559
52 1867.86242299795
53 1868.74948665298
54 1868.90280629706
55 1868.98767967146
56 1869.25051334702
57 1869.44216290212
58 1869.55441478439
59 1869.8090349076
60 1869.87474332649
61 1870.12388774812
62 1870.51540041068
63 1870.55920602327
64 1870.63312799452
65 1871.02737850787
66 1871.15058179329
67 1871.16700889801
68 1871.73648186174
69 1871.81587953457
70 1872.12251882272
71 1872.24024640657
72 1872.76865160849
73 1873.13552361396
74 1874.28542094456
75 1874.54551676934
76 1874.88774811773
77 1874.98083504449
78 1875.32854209446
79 1875.92539356605
80 1875.93086926762
81 1875.93086926762
82 1876.96577686516
83 1877.0643394935
84 1877.1054072553
85 1877.19028062971
86 1877.77891854894
87 1877.8090349076
88 1878.18412046543
89 1878.19507186858
90 1878.23613963039
91 1878.43326488706
92 1878.69609856263
93 1879.03559206023
94 1879.17248459959
95 1879.50102669405
96 1880.05681040383
97 1880.53867214237
98 1880.68925393566
99 1880.94387405886
100 1881.1054072553
101 1881.96783025325
102 1882.12936344969
103 1882.29637234771
104 1882.29911019849
105 1882.33470225873
106 1882.85215605749
107 1883.79671457906
108 1883.8514715948
109 1884.07323750856
110 1884.85626283368
111 1885.16837782341
112 1885.46406570842
113 1885.9787816564
114 1886.6167008898
115 1886.69336071184
116 1886.75359342916
117 1886.92060232717
118 1887.13415468857
119 1887.4052019165
120 1888.2977412731
121 1889.05065023956
122 1889.19849418207
123 1889.79260780287
124 1890.10198494182
125 1890.18959616701
126 1891.25188227242
127 1891.66529774127
128 1892.65366187543
129 1893.50787132101
130 1894.47707049966
131 1895.31759069131
132 1896.07049965777
133 1896.28405201916
134 1896.33059548255
135 1899.62970568104
136 1901.39288158795
137 1902.67145790554
138 1905.05612594114
139 1905.18754277892
140 1905.52429842574
141 1906.77275838467
142 1908.13620807666
143 1908.27036276523
144 1908.62902121834
145 1909.1273100616
146 1909.82546201232
147 1910.35660506502
148 1910.96988364134
149 1912.51950718686
150 1913.78439425051
151 1914.40862422998
152 1916.61533196441
153 1918.03080082136
154 1922.52908966461
155 1922.67693360712
156 1923.56947296372
157 1927.16153319644
158 1928.11430527036
159 1930.15400410678
160 1930.74811772758
161 1931.07665982204
162 1931.8295687885
163 1931.88432580424
164 1932.06502395619
165 1932.86447638604
166 1932.87542778919
167 1933.88295687885
168 1934.7234770705
169 1935.64339493498
170 1935.69541409993
171 1936.5961670089
172 1937.49965776865
173 1938.35386721424
174 1939.82135523614
175 1940.21834360027
176 1940.42368240931
177 1941.42026009582
178 1941.52156057495
179 1941.5735797399
180 1942.0006844627
181 1942.12936344969
182 1942.48254620123
183 1946.94524298426
184 1947.02464065708
185 1947.61875427789
186 1947.6379192334
187 1947.68720054757
188 1951.4052019165
189 1957.88295687885
190 1960.4893908282
191 1962.21971252567
Raw
d3.tip.v0.6.3.js
// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations
// Public - contructs a new tooltip
//
// Returns a tip
d3.tip = function() {
var direction = d3_tip_direction,
offset = d3_tip_offset,
html = d3_tip_html,
node = initNode(),
svg = null,
point = null,
target = null
function tip(vis) {
svg = getSVGNode(vis)
point = svg.createSVGPoint()
document.body.appendChild(node)
}
// Public - show the tooltip on the screen
//
// Returns a tip
tip.show = function() {
var args = Array.prototype.slice.call(arguments)
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
var content = html.apply(this, args),
poffset = offset.apply(this, args),
dir = direction.apply(this, args),
nodel = d3.select(node), i = 0,
coords
nodel.html(content)
.style({ opacity: 1, 'pointer-events': 'all' })
while(i--) nodel.classed(directions[i], false)
coords = direction_callbacks.get(dir).apply(this)
nodel.classed(dir, true).style({
top: (coords.top + poffset[0]) + 'px',
left: (coords.left + poffset[1]) + 'px'
})
return tip
}
// Public - hide the tooltip
//
// Returns a tip
tip.hide = function() {
nodel = d3.select(node)
nodel.style({ opacity: 0, 'pointer-events': 'none' })
return tip
}
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
//
// n - name of the attribute
// v - value of the attribute
//
// Returns tip or attribute value
tip.attr = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).attr(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.attr.apply(d3.select(node), args)
}
return tip
}
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
//
// n - name of the property
// v - value of the property
//
// Returns tip or style property value
tip.style = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).style(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.style.apply(d3.select(node), args)
}
return tip
}
// Public: Set or get the direction of the tooltip
//
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
// sw(southwest), ne(northeast) or se(southeast)
//
// Returns tip or direction
tip.direction = function(v) {
if (!arguments.length) return direction
direction = v == null ? v : d3.functor(v)
return tip
}
// Public: Sets or gets the offset of the tip
//
// v - Array of [x, y] offset
//
// Returns offset or
tip.offset = function(v) {
if (!arguments.length) return offset
offset = v == null ? v : d3.functor(v)
return tip
}
// Public: sets or gets the html value of the tooltip
//
// v - String value of the tip
//
// Returns html value or tip
tip.html = function(v) {
if (!arguments.length) return html
html = v == null ? v : d3.functor(v)
return tip
}
function d3_tip_direction() { return 'n' }
function d3_tip_offset() { return [0, 0] }
function d3_tip_html() { return ' ' }
var direction_callbacks = d3.map({
n: direction_n,
s: direction_s,
e: direction_e,
w: direction_w,
nw: direction_nw,
ne: direction_ne,
sw: direction_sw,
se: direction_se
}),
directions = direction_callbacks.keys()
function direction_n() {
var bbox = getScreenBBox()
return {
top: bbox.n.y - node.offsetHeight,
left: bbox.n.x - node.offsetWidth / 2
}
}
function direction_s() {
var bbox = getScreenBBox()
return {
top: bbox.s.y,
left: bbox.s.x - node.offsetWidth / 2
}
}
function direction_e() {
var bbox = getScreenBBox()
return {
top: bbox.e.y - node.offsetHeight / 2,
left: bbox.e.x
}
}
function direction_w() {
var bbox = getScreenBBox()
return {
top: bbox.w.y - node.offsetHeight / 2,
left: bbox.w.x - node.offsetWidth
}
}
function direction_nw() {
var bbox = getScreenBBox()
return {
top: bbox.nw.y - node.offsetHeight,
left: bbox.nw.x - node.offsetWidth
}
}
function direction_ne() {
var bbox = getScreenBBox()
return {
top: bbox.ne.y - node.offsetHeight,
left: bbox.ne.x
}
}
function direction_sw() {
var bbox = getScreenBBox()
return {
top: bbox.sw.y,
left: bbox.sw.x - node.offsetWidth
}
}
function direction_se() {
var bbox = getScreenBBox()
return {
top: bbox.se.y,
left: bbox.e.x
}
}
function initNode() {
var node = d3.select(document.createElement('div'))
node.style({
position: 'absolute',
opacity: 0,
pointerEvents: 'none',
boxSizing: 'border-box'
})
return node.node()
}
function getSVGNode(el) {
el = el.node()
if(el.tagName.toLowerCase() == 'svg')
return el
return el.ownerSVGElement
}
// Private - gets the screen coordinates of a shape
//
// Given a shape on the screen, will return an SVGPoint for the directions
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
// sw(southwest).
//
// +-+-+
// | |
// + +
// | |
// +-+-+
//
// Returns an Object {n, s, e, w, nw, sw, ne, se}
function getScreenBBox() {
var targetel = target || d3.event.target,
bbox = {},
matrix = targetel.getScreenCTM(),
tbbox = targetel.getBBox(),
width = tbbox.width,
height = tbbox.height,
x = tbbox.x,
y = tbbox.y,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
point.x = x + scrollLeft
point.y = y + scrollTop
bbox.nw = point.matrixTransform(matrix)
point.x += width
bbox.ne = point.matrixTransform(matrix)
point.y += height
bbox.se = point.matrixTransform(matrix)
point.x -= width
bbox.sw = point.matrixTransform(matrix)
point.y -= height / 2
bbox.w = point.matrixTransform(matrix)
point.x += width
bbox.e = point.matrixTransform(matrix)
point.x -= width / 2
point.y -= height / 2
bbox.n = point.matrixTransform(matrix)
point.y += height
bbox.s = point.matrixTransform(matrix)
return bbox
}
return tip
};
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scatter Plot Matrix</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.tip.v0.6.3.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Montserrat', sans-serif;
}
h3 {
color: gray;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-size: 8pt;
}
.bars {
fill: orange;
}
.bars:hover {
fill: orangered;
}
.axis .label {
font-size: 22pt;
font-weight: bold;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<h2>Coal Mine Disasters by Year</h2>
<h3>Bar-chart showing both density and intensity.</h3>
<script>
var m = {t:50,b:100,l:100,r:50},
w = 1000 - m.l - m.r,
h = 500 - m.t - m.b,
px = 0.035;
op = 1;
var xLabelOffset = 60;
var yLabelOffset = 60;
var svg = d3.select("body").append("svg")
.attr("width", w + m.l + m.r)
.attr("height", h + m.t + m.b)
.append("g")
.attr("transform", "translate(" + m.l + "," + m.t + ")");
var x = d3.scale.ordinal().rangeBands([0,w], px, op);
var y = d3.scale.linear().range([h,0]);
var xa = d3.svg.axis().scale(x).orient("bottom"),
ya = d3.svg.axis().scale(y).orient("left").ticks(5);
var xag = svg.append("g").attr("class","axis")
.attr("transform", "translate(0," + h + ")")
var yag = svg.append("g").attr("class","axis")
var xal = xag.append("text")
.style("text-anchor", "middle")
.attr("class", "label")
.attr("transform", "translate(" + w / 2 + "," + xLabelOffset + ")")
.text("Years");
var yal = yag.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(-" + yLabelOffset + "," + (h / 2) + ") rotate(-90)")
.attr("class", "label")
.text("Num Disasters");
d3.csv("coal.csv",
function(d) {
d["date"] = Math.floor(+d["date"]);
return d;
},
function(input) {
var nested = d3.nest()
.key(function(d) { return d["date"]; })
.entries(input);
var years = []
var processed = [];// play around with function hoisting..
nested.forEach(function(o) {
years.push(+o.key);
processed.push({year:+o.key,num:o.values.length});
});
x.domain(years);
y.domain(d3.extent(processed, function(p) { return p.num; }));
xa.tickValues(x.domain().filter(function(d, i) { return i % 3 == 0; }))
xag.call(xa);
yag.call(ya);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Disasters:</strong> <span style='color:red'>" + d.num + " cases.</span>"
})
svg.call(tip);
var rects = svg.selectAll("rect").data(processed);
rects.enter().append("rect").attr("class", "bars");
rects.attr("x", function(p) { return x(p.year); })
.attr("y", function(p) { return y(p.num); })
.attr("width", x.rangeBand())
.attr("height", function(p) { return h - y(p.num); })
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment