Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Plotting temperature data from a CSV using d3 - http://www.samansari.info/2015/12/using-d3-to-plot-logged-temperature.html
// Generate an SVG bar plot of temperatures with axes
var dataset; // global dataset populated by d3.csv, used by plotData
function plotData()
{
//Width and height
var w = 800;
var h = 400;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var barPadding = 0;
var padding = 30;
// Scales
var xScale = d3.time.scale()
.domain([d3.min(dataset, function(d){return new Date(d.datetime+"-07:00");}),
d3.max(dataset, function(d){return new Date(d.datetime+"-07:00");})])
.range([padding,w-padding]);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d){return d.out_temperature;}),
d3.max(dataset, function(d){return d.out_temperature;})])
.rangeRound([h-padding,padding])
.clamp(true);
// Bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {return xScale(new Date(d.datetime+"-07:00"));})
.attr("y", function(d) {return yScale(d.out_temperature);})
.attr("width", function(d) {return (w-padding*2)/dataset.length;})
.attr("fill", function(d) {
return "rgb(0, 0, " + Math.round((d.out_temperature * 155)+100) + ")";
})
.attr("height", function(d) {return h-padding-yScale(d.out_temperature);})
;
// Axes
var datetimeFormatter = d3.time.format("%a %b %d %I:%M %p");
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(datetimeFormatter)
.ticks(4);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
// Mouse Overlay
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", w)
.attr("height", h)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
bisectDate = d3.bisector(function(d) { return new Date(d.datetime+"-07:00"); }).left;
function mousemove() {
var x0 = xScale.invert(d3.mouse(this)[0]),
i = bisectDate(dataset, x0, 1),
d0 = dataset[i - 1],
d1 = dataset[i],
d = x0 - d0.datetime > d1.datetime - x0 ? d1 : d0;
focus.attr("transform",
"translate(" + xScale(new Date(d.datetime+"-07:00")) + "," + yScale(d.out_temperature) + ")");
focus.select("text").text(
datetimeFormatter(new Date(d.datetime+"-07:00")) +
" - " + d.out_temperature+"°C");
}
}
// Load data from CSV
d3.csv('../data/R2015_06_13.csv', function(data) {
dataset = data;
plotData();
});
// queue()
// .defer(d3.csv, "../data/R2015_06_12.csv")
// .defer(d3.csv, "../data/R2015_06_13.csv")
// .defer(d3.csv, "../data/R2015_06_14.csv")
// .await(combine);
// function combine(error, big_data_1, big_data_2, big_data_3) {
// if (error) {
// console.log(error);
// }
// dataset = d3.merge([big_data_1, big_data_2, big_data_3]);
// plotData();
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.