Skip to content

Instantly share code, notes, and snippets.

@chelm

chelm/index.html

Created December 5, 2015 05:02
Show Gist options
  • Save chelm/7cc9d69f56f4061b0448 to your computer and use it in GitHub Desktop.
Save chelm/7cc9d69f56f4061b0448 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
}
.rcp45-line {
fill: none;
stroke: #aa0;
stroke-width: .25px;
}
.rcp85-bar {
fill: #0aa;
stroke: #fff;
stroke-width: .25px;
}
.line:hover {
stroke: #f00;
stroke-width: .75px;
}
</style>
</head>
<body>
<div id="form"></div>
<div id="slider"></div>
<div id="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var lat = 40.375;
var lon = -105.625;
function runSearch(){
var text = d3.select('#search')[0][0].value;
d3.json('https://search.mapzen.com/v1/search?text='+text+'&api_key=search-6mpTzX0', function(err, result) {
var coords = result.features[0].geometry.coordinates;
lon = coords[0];
lat = coords[1];
load( update );
});
}
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d, i) { return x(i); })
.y(function(d) { return y(d); });
var search = d3.select("#form").append("input")
.attr('type', 'text')
.attr('value', 'Paris')
.attr('id', 'search');
var submit = d3.select("#form").append("button")
.attr('type', 'text')
.html('search')
.on('click', function() { runSearch(); } );
var host = "http://bigmappers.com:8080";
var model = "rcp85";
var temperature = 30;
var timer;
function renderSlider(){
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 360 - margin.left - margin.right,
height = 50 - margin.bottom - margin.top;
var x = d3.scale.linear()
.domain([-30, 50])
.range([0, width])
.clamp(true);
var brush = d3.svg.brush()
.x(x)
.extent([temperature, temperature])
.on("brush", brushed);
var svg = d3.select("#slider").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height / 2 + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d) { return d + "°"; })
.tickSize(0)
.tickPadding(12))
.select(".domain")
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "halo");
var slider = svg.append("g")
.attr("class", "slider")
.call(brush);
slider.selectAll(".extent,.resize")
.remove();
var handle = slider.append("circle")
.attr("class", "handle")
.attr("transform", "translate(0," + height / 2 + ")")
.attr("r", 9);
slider
.call(brush.event)
function brushed() {
var value = brush.extent()[0];
if (d3.event.sourceEvent) { // not a programmatic event
value = x.invert(d3.mouse(this)[0]);
brush.extent([value, value]);
}
handle.attr("cx", x(value));
//d3.select("body").style("background-color", d3.hsl(value, .8, .8));
if (timer) {
clearTimeout( timer );
}
timer = setTimeout(function() {
temperature = Math.floor(value);
if (tasmax) update();
}, 200);
}
}
var tasmax;
function load( callback ){
d3.json(host+"/gddp/rcp85/tasmax?lat="+lat+"&lon="+lon+ "&group=daily&startDate=1950&endDate=2100", function(error, data) {
if (error) throw error;
tasmax = data;
if ( callback ) {
callback();
}
});
}
function update(){
var ddays = [];
tasmax.rcp85.tasmax.forEach(function( year ) {
var yearCount = 0;
year.forEach(function(t){
if ( t.value >= temperature ) {
yearCount++;
}
});
ddays.push(yearCount);
});
d3.selectAll("#chart svg").remove();
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain([ 0, ddays.length ]);
y.domain([0, 365]);//d3.max(ddays)]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", -5)
.attr("x", width / 2)
.attr("dy", "3em")
.style("text-anchor", "end")
.text("Day of Year");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(ddays)
.enter().append("rect")
.attr("class", "rcp85-bar")
.attr("x", function(d, i) { return x(i); })
.attr("width", 5)
.attr("y", function(d) { return y(d); })
.attr("height", function(d) { return height - y(d); });
}
renderSlider();
load( update );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment