Skip to content

Instantly share code, notes, and snippets.

@curran

curran/README.md

Last active May 17, 2016 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save curran/de831e1e04057147f612456460047df4 to your computer and use it in GitHub Desktop.
Save curran/de831e1e04057147f612456460047df4 to your computer and use it in GitHub Desktop.
Download ZIP
Temperature Around Bangalore
Raw
README.md
Raw
data.json
{"code":200,"result":[{"id":"1","__rssi":"25","t":"31.0","__net":"smshub","address":"Girinigar","tsUnix":"1463326401143","p":"91643.0","serialNumber":"ainvvy0","rh":"45.0","longitude":"77.54362","latitude":"12.939099","rain":"69","__rtc":"150516,205939"},{"RH":"62.0","WS":"3.1","tsUnix":"1463497347587","LWS":"43","serialNumber":"gkvk001","SDP":"5.0","__rssi":"30","id":"2","T":"26.8","ST":"32.0","address":"GKVK Campus","P":"90389.0","longitude":"77.579504","latitude":"13.086479","Rain":"0"},{"id":"3","__rssi":"31","T":"27.7","RH":"61.0","address":"IISC - Campus","tsUnix":"1463497471842","P":"90322.0","serialNumber":"iisc001","longitude":"77.570733","latitude":"13.017016","Rain":"0","__rtc":"230100,004748"},{"id":"4","__rssi":"31","T":"27.0","RH":"66.0","address":"Public Affairs Center, Jigani - Bommasandra Link Road,","tsUnix":"1463492566279","P":"90538.0","serialNumber":"pacaws1","longitude":"77.661561","latitude":"12.799788","Rain":"0"},{"id":"5","__rssi":"31","T":"26.71","RH":"59.96","address":"Hebbal (Godrej woodsman)","tsUnix":"1463497349648","P":"89857.33","serialNumber":"paws001","longitude":"77.597181","latitude":"13.055438","Rain":"0"},{"id":"6","__rssi":"31","T":"27.57","RH":"60.28","address":"4B Block, Jayanagar","tsUnix":"1463497451988","P":"90243.66","serialNumber":"paws002","longitude":"77.580222","latitude":"12.929648","Rain":"0"},{"id":"7","__rssi":"31","T":"27.2","RH":"62.0","address":"Sarjapura (Rainbow Drive)","tsUnix":"1463493913980","P":"0.0","serialNumber":"rainbow","longitude":"77.687196","latitude":"12.907983","Rain":"0","__rtc":"170516,193416"},{"id":"8","__rssi":"31","T":"27.6","RH":"60.0","address":"Indira Nagar (HAL-II)","tsUnix":"1463497500455","P":"90880.0","serialNumber":"ramkris","longitude":"77.646694","latitude":"12.968259","Rain":"0","__rtc":"170516,202955"},{"id":"9","__rssi":"28","T":"0.0","RH":"0.0","address":"spoorthi Nagar (Uttarahalli)","tsUnix":"1463497297540","P":"0.0","serialNumber":"sandesh","longitude":"77.540946","latitude":"12.911357","Rain":"0"},{"id":"10","__rssi":"31","T":"27.2","RH":"61.0","address":"Electronics City (Huskur Road)","tsUnix":"1463497395746","P":"0.0","serialNumber":"thejesh","longitude":"77.684429","latitude":"12.835487","Rain":"0"},{"id":"11","__rssi":"31","T":"28.2","RH":"57.0","WS":"0.4","address":"HSR Layout (sector-4)","tsUnix":"1463497302905","P":"0.0","serialNumber":"yuktix1","longitude":"77.638493","latitude":"12.914647","Rain":"0","wdc":"NN"},{"id":"12","__rssi":"31","T":"27.1","RH":"61.0","address":"Vidyaranyapura","tsUnix":"1463497447046","P":"0.0","serialNumber":"zenrain","longitude":"77.561276","latitude":"13.084885","Rain":"0","__rtc":"170516,201835"},{"id":"7719","__rssi":"28","T":"27.1","RH":"62.0","address":"IIHS (Sadashiv Nagar)","tsUnix":"1463497439321","P":"0.0","serialNumber":"iihs001","longitude":"77.580927","latitude":"13.005875","Rain":"0","__rtc":"170516,203236"},{"id":"12856","__rssi":"20","T":"25.3","RH":"70.0","address":"Hunsur - Mysore","tsUnix":"1463497410892","P":"91030.0","Lux":"0.98","serialNumber":"itc0001","longitude":"76.304687","latitude":"12.307031","Rain":"0"},{"id":"13375","__rssi":"10","T":"26.0","RH":"85.0","address":"Kothegala,Mysore","tsUnix":"1463497331961","P":"91706.0","Lux":"0.98","serialNumber":"itc0002","longitude":"76.233867","latitude":"12.336308","Rain":"0"},{"RH":"40.0","WS":"2.3","tsUnix":"1462282883939","pyra":"257","serialNumber":"iihs002","LWS":"69","SDP":"4.0","wdc":"SS","__rssi":"31","id":"13409","T":"32.4","ST":"38.0","address":"IIHS (Kengeri campus)","P":"91922.0","longitude":"77.43869","latitude":"12.917989","Rain":"0"},{"id":"20313","__rssi":"18","pmx":"4.9","address":"Public Affairs Centre (Air Quality)","tsUnix":"1463053178536","serialNumber":"pacaq02","CO2":"192","longitude":null,"CO":"156","latitude":null},{"id":"20314","__rssi":"19","pmx":"7.9","address":"Wipro EC (Air Quality)","tsUnix":"1462141387941","serialNumber":"pacaq03","CO2":"158","longitude":"77.6572082","CO":"174","latitude":"12.839581"},{"id":"20322","__rssi":"27","T":"27.3","RH":"60.0","address":"Wipro EC (Weather)","tsUnix":"1463497141637","P":"90300.0","pyra":"0","serialNumber":"wipro01","longitude":"77.6572082","latitude":"12.839581","Rain":"0"},{"RH":"64.0","WS":"0.4","tsUnix":"1463497490759","pyra":"0","serialNumber":"iihr001","LWS":"73","SDP":"6.0","wdc":"NN","__rssi":"27","id":"50005","T":"26.4","ST":"32.3","address":"ICAR - IIHR Bengaluru","P":"91138.0","longitude":"77.4897909","latitude":"13.1337731","Rain":"0"},{"pmy":"0.2","pmx":"0.8","tsUnix":"1463497370974","CO2":"179","serialNumber":"iihraq1","NH3":"16","__rssi":"26","id":"50026","address":"IIHR Observatory (AQ)","longitude":"77.4897909","CO":"166","latitude":"13.1337731","AN":"0"}]}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<style>
.axis text {
font-family: 'Playfair Display', serif;
font-size: 13pt;
}
.axis .label {
font-size: 28pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.y.axis path, .y.axis line {
stroke: none;
}
.tooltip {
font-family: 'Playfair Display', serif;
font-size: 24pt;
/* This trick adds a heavy white shadow around the text. */
text-shadow:
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white;
/* This eliminates the possibility of flickering tooltips. */
pointer-events: none;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 393, top: 0, right: 15, bottom: 108 };
var barPadding = 0.2;
var barPaddingOuter = 0.1;
var xColumn = "T";
var yColumn = "address";
var xAxisLabelText = "Temperature (°C)";
var xAxisLabelOffset = 80;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")")
var xAxisLabel = xAxisG.append("text")
.style("text-anchor", "middle")
.attr("x", innerWidth / 2)
.attr("y", xAxisLabelOffset)
.attr("class", "label")
.text(xAxisLabelText);
var yAxisG = g.append("g")
.attr("class", "y axis");
var tooltip = svg.append("text").attr("class", "tooltip");
var xScale = d3.scale.linear().range([0, innerWidth]);
var yScale = d3.scale.ordinal().rangeRoundBands([0, innerHeight], barPadding, barPaddingOuter);
// Use D3's number format that generates SI prefixes for the X axis.
// See also http://en.wikipedia.org/wiki/Metric_prefix#List_of_SI_prefixes
var siFormat = d3.format("s");
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.ticks(5)
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.outerTickSize(0);
var tooltipFormat = d3.format(",");
function showTooltip(d){
tooltip.text(tooltipFormat(d[xColumn]) + " °C")
.attr("x", d3.event.pageX + 20)
.attr("y", d3.event.pageY);
}
function hideTooltip(){
tooltip.text("");
}
function render(data){
data.sort(function (a, b){
return b[xColumn] - a[xColumn];
});
xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
yScale.domain( data.map( function (d){ return d[yColumn]; }));
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var bars = g.selectAll("rect").data(data);
bars.enter().append("rect")
.attr("height", yScale.rangeBand())
.on("mouseover", showTooltip)
.on("mousemove", showTooltip)
.on("mouseout", hideTooltip);
bars
.attr("x", 0)
.attr("y", function (d){ return yScale(d[yColumn]); })
.attr("width", function (d){ return xScale(d[xColumn]); });
bars.exit().remove();
}
d3.json("data.json", function (data){
// Unpack the response.
data = data.result;
// Only include entries with temperature.
data = data.filter(function (d){
return d.T;
})
// Parse temperature to a number.
data.forEach(function (d){
d.T = +d.T;
});
render(data);
//console.log(JSON.stringify(data, null, 2));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment