Skip to content

Instantly share code, notes, and snippets.

@djhume
Created July 12, 2013 00:41
Show Gist options
  • Save djhume/5980505 to your computer and use it in GitHub Desktop.
Save djhume/5980505 to your computer and use it in GitHub Desktop.
Tributary inlet
{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"},{"name":"queue","url":"http://d3js.org/queue.v1.min.js"},{"name":"topojson","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"price.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
var slider = d3.select("#slider").selectAll("div")
.data(d3.entries({epsilon: 200}))
.enter().append("div")
.attr("id", function(d) { return d.key; });
var width = 2460,
height = 3180;
var priceById =d3.map();
var projection = d3.geo.mercator()
.scale(10000)
.translate([width,-height/0.50])
.rotate([-180,0]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg")
//.attr("width", width)
//.attr("height", height);
.attr("viewBox", "0 0 " + width + " " + height )
.attr("preserveAspectRatio", "xMidYMid meet");
queue()
.defer(d3.json, "/nz_gxp.json")
.defer(d3.csv, "price.csv",function(d) {priceById.set(d.id,+d.price); })
.await(ready);
function ready(error, nz_gxp) {
var quantize = d3.scale.quantize()
//Playing with suitable scales, to a max of log(400)
//.domain([d3.min(d3.values(priceById))-(d3.min(d3.values(priceById))*0.125), d3.max(d3.values(priceById))+(d3.max(d3.values(priceById))*0.01)])
//.domain([Math.log(d3.min(d3.values(priceById))), Math.log(d3.max(d3.values(priceById)))])
.domain([Math.log(d3.min(d3.values(priceById))), Math.log(400)])
//.domain([0, Math.log(400)])
.range(d3.range(35).map(function(i) { return "q" + i + "-35"; }));
console.log(Math.log(d3.max(d3.values(priceById))))
//console.log(Math.log(d3.min(d3.values(priceById))))
svg.append("g")
.attr("class","GXP_WGS84")
.selectAll("path")
.data(topojson.feature(nz_gxp, nz_gxp.objects.GXP_WGS84).features)
.enter().append("path")
.attr("class", function(d) { return quantize(Math.log(priceById.get(d.id)));})
//.attr("class", function(d) { console.log(Math.log(priceById.get(d.id)));})
.attr("d", path);
svg.selectAll("path").on('mouseover', function(d) {
//console.log(d.properties.name + '(' + d.id + ') $' + priceById.get(d.id));
//Update the tooltip position and value
d3.select("#tooltip")
//.style("left", 300 + "px")
//.style("top", 400 + "px")
.select("#value")
.text(d.properties.name + '(' + d.id + ') = $' + priceById.get(d.id));
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
});
}
id price
ABY0111 57.38
ADD0111 60.05
ADD0661 59.87
ALB0331 66.06
ALB1101 66.74
APS0111 56.18
ARA2201 61.74
ARG1101 61.11
ARI1101 63.66
ARI1102 65.91
ASB0331 58.45
ASB0661 58.26
ASY0111 62.01
ATI2201 62.92
ATU1101 62.60
AVI2201 56.50
BAL0331 54.25
BDE0111 52.77
BEN2201 56.94
BEN2202 56.94
BLN0331 62.29
BOB0331 66.37
BOB1101 66.27
BPD1101 57.18
BPE0331 61.57
BPE0551 61.61
BPE2201 61.48
BPT1101 57.06
BRB0331 67.23
BRK0331 62.18
BRY0111 59.65
BRY0661 59.21
BWK1101 52.86
CBG0111 65.71
CLH0111 54.74
CML0331 53.77
COB0661 56.65
COL0111 53.77
COL0661 53.74
CPK0111 61.62
CPK0331 61.49
CST0331 63.03
CUL0331 60.03
CUL0661 60.17
CYD0331 53.11
CYD2201 53.08
DOB0331 63.18
DOB0661 63.08
DVK0111 61.32
EDG0331 63.08
EDN0331 52.55
FHL0331 63.02
FKN0331 54.40
GFD0331 60.67
GIS0501 68.94
GLN0331 65.45
GLN0332 65.21
GOR0331 53.03
GYM0661 62.66
GYT0331 61.41
HAM0111 65.08
HAM0331 65.13
HAM0551 65.01
HAM2201 64.90
HAY0111 60.92
HAY0331 60.89
HAY1101 60.51
HAY2201 60.41
HEN0331 65.68
HEN2201 65.58
HEP0331 65.69
HIN0331 65.61
HKK0661 58.35
HLY0331 64.62
HLY2201 64.56
HOR0331 58.48
HOR0661 58.34
HTI0331 67.53
HUI0331 63.46
HWA0331 62.30
HWA0332 62.31
HWA1101 62.22
HWA1102 62.22
HWB0331 53.08
HWB0332 53.34
HWB2201 53.03
INV0331 51.87
INV2201 51.84
INV2202 51.84
ISL0331 59.46
ISL0661 59.71
ISL2201 59.39
KAI0111 61.50
KAW0111 62.83
KAW0112 62.63
KAW0113 63.01
KAW1101 62.71
KAW2201 62.94
KEN0331 68.68
KIK0111 60.73
KIN0111 64.61
KIN0112 64.14
KIN0113 64.79
KIN0331 64.37
KMO0331 63.91
KOE1101 69.54
KPA1101 62.24
KPO1101 65.17
KPU0661 66.61
KUM0661 59.08
KWA0111 61.14
LFD1101 63.97
LFD1102 63.97
LTN0331 61.42
MAN2201 49.14
MAT1101 62.51
MAT1102 61.27
MCH0111 61.22
MDN1101 67.63
MDN2201 67.12
MER0331 66.93
MGM0331 61.26
MHO0331 60.51
MKE1101 63.31
MLG0111 61.05
MLG0331 61.17
MLN0661 59.82
MLN0664 59.82
MNG0331 65.52
MNG1101 65.27
MNI0111 63.34
MOT0111 60.75
MPE1101 68.49
MPI0661 58.31
MST0331 61.78
MTI2201 63.47
MTM0331 64.62
MTN0331 61.87
MTO0331 69.01
MTR0331 65.01
NAP2201 61.45
NAP2202 61.45
NMA0331 51.61
NPK0331 67.81
NPL0331 62.91
NPL1101 62.85
NPL2201 62.78
NSY0331 55.06
OAM0331 57.93
OHA2201 56.69
OHB2201 56.73
OHC2201 56.70
OHK2201 62.69
OKI2201 61.31
OKN0111 67.60
ONG0331 67.13
OPK0331 62.92
ORO1101 62.05
ORO1102 62.23
OTA0221 65.64
OTA1101 65.40
OTA1102 65.22
OTA2201 65.24
OTA2202 65.24
OTI0111 56.66
OWH0111 63.63
PAK0331 65.28
PAL0331 54.27
PAO1101 65.58
PEN0221 66.24
PEN0251 65.81
PEN0331 66.18
PEN1101 65.94
PNI0331 60.92
PPI2201 62.02
PRM0331 61.31
RDF0331 62.84
RDF2201 62.55
RFN1101 61.93
RFN1102 61.93
ROS0221 65.60
ROS1101 65.65
ROT0111 64.72
ROT0331 64.00
ROT1101 63.59
ROX1101 52.13
ROX2201 52.55
RPO2201 60.97
SBK0331 61.41
SDN0331 53.21
SFD0331 62.56
SFD2201 62.51
SPN0331 60.28
SPN0661 60.17
STK0331 61.21
STK2201 61.05
STU0111 57.99
SVL0331 66.12
SWN2201 65.31
TAK0331 65.20
TGA0111 64.27
TGA0331 64.28
THI2201 62.03
TIM0111 58.24
TKA0111 56.54
TKA0331 56.79
TKB2201 57.03
TKH0111 67.01
TKR0331 60.78
TKU0331 63.15
TKU2201 63.06
TMI0331 63.81
TMK0331 58.31
TMN0551 63.63
TMU0111 65.64
TMU1101 65.57
TNG0111 61.29
TNG0551 61.28
TRK0111 63.42
TRK2201 63.33
TUI0111 61.44
TUI1101 61.26
TWC2201 61.35
TWH0331 64.96
TWI2201 52.08
TWZ0331 56.81
UHT0331 60.68
WAI0111 63.74
WDV0111 60.92
WDV1101 60.88
WEL0331 69.59
WGN0331 62.59
WHI0111 62.48
WHI2201 62.43
WHU0331 65.91
WIL0331 60.70
WIR0331 65.93
WKM2201 63.73
WKO0331 66.19
WPA2201 63.44
WPR0331 59.89
WPR0661 59.50
WPT0111 62.43
WPW0331 62.14
WRA0111 61.66
WRD0331 66.74
WRK0331 61.37
WRK2201 61.77
WTK0111 56.22
WTK0331 56.77
WTK2201 56.45
WTU0331 62.69
WVY0111 62.80
WWD1102 60.51
WWD1103 60.63
<style>
/*----------------------------
Default slider
-----------------------------*/
#defaultSlider{
width:200px;
margin-bottom:20px;
}
<!--.gxp {
fill: gray;
}
var colors = ["#ADDD8E","#78C679","#41AB5D","#238443","#006837","#004529","#000000","#EF3B2C"];
-->
.q0-9 { fill:rgb(173,221,142); }
.q1-9 { fill:rgb(120,198,121); }
.q2-9 { fill:rgb(65,171,93); }
.q3-9 { fill:rgb(35,132,67); }
.q4-9 { fill:rgb(0,104,61); }
.q5-9 { fill:rgb(0,69,41); }
.q6-9 { fill:rgb(0,0,0); }
.q7-9 { fill:#EF3B2C; }
<!-- .q8-9 { fill:rgb(8,48,107); } -->
.q0-35 { fill:rgb(254,254,154); }
.q1-35 { fill:rgb(206,234,147); }
.q2-35 { fill:rgb(173,221,142); }
.q3-35 { fill:rgb(151,211,137); }
.q4-35 { fill:rgb(138,206,132); }
.q5-35 { fill:rgb(130,202,129); }
.q6-35 { fill:rgb(125,200,125); }
.q7-35 { fill:rgb(120,198,121); }
.q8-35 { fill:rgb(111,194,116); }
.q9-35 { fill:rgb(100,190,110); }
.q10-35 { fill:rgb(88,184,105); }
.q11-35 { fill:rgb(75,178,99); }
.q12-35 { fill:rgb(64,170,92); }
.q13-35 { fill:rgb(56,163,87); }
.q14-35 { fill:rgb(49,155,81); }
.q15-35 { fill:rgb(44,147,75); }
.q16-35 { fill:rgb(39,139,71); }
.q17-35 { fill:rgb(35,131,66); }
.q18-35 { fill:rgb(29,125,63); }
.q19-35 { fill:rgb(24,119,60); }
.q20-35 { fill:rgb(19,114,58); }
.q21-35 { fill:rgb(14,109,56); }
.q22-35 { fill:rgb(10,104,55); }
.q23-35 { fill:rgb(6,98,53); }
.q24-35 { fill:rgb(3,92,51); }
.q25-35 { fill:rgb(2,85,48); }
.q26-35 { fill:rgb(0,77,45); }
.q27-35 { fill:rgb(0,68,40); }
.q28-35 { fill:rgb(0,58,35); }
.q29-35 { fill:rgb(0,47,29); }
.q30-35 { fill:rgb(0,36,22); }
.q31-35 { fill:rgb(0,25,16); }
.q32-35 { fill:rgb(0,15,10); }
.q33-35 { fill:rgb(0,6,4); }
<!--.q34-35 { fill:rgb(0,0,0); }-->
.q34-35 { fill:#EF3B2C; }
#tooltip {
position: absolute;
width: 600px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 26px;
line-height: 30px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment