Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="utf-8">
- <style>
- body {
- font: 10px sans-serif;
- }
- .axis path,
- .axis line {
- fill: none;
- stroke: #000;
- shape-rendering: crispEdges;
- }
- .x.axis path {
- display: none;
- }
- .line {
- fill: none;
- stroke: steelblue;
- stroke-width: 1.5px;
- }
- </style>
- <body>
- <script src="d3.v3.js"></script>
- <script>
- 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.time.scale()
- .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) { return x(d.Unixtime); })
- .y(function(d) { return y(d.value); });
- var svg = d3.select("body").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 + ")");
- d3.tsv("streamvalues.tsv", function(error, data) {
- color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Unixtime"; }));
- data.forEach(function(d) {
- d.Unixtime = parseInt(d.Unixtime/1000);
- });
- var cities = color.domain().map(function(name) {
- return {
- name: name,
- values: data.map(function(d) {
- return {Unixtime: d.Unixtime, value: +d[name]};
- })
- };
- });
- x.domain(d3.extent(data, function(d) { return d.Unixtime; }));
- y.domain([
- d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
- d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
- ]);
- svg.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + height + ")")
- .call(xAxis);
- 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("Temperature (ยบF)");
- var city = svg.selectAll(".city")
- .data(cities)
- .enter().append("g")
- .attr("class", "city");
- city.append("path")
- .attr("class", "line")
- .attr("d", function(d) { return line(d.values); })
- .style("stroke", function(d) { return color(d.name); });
- city.append("text")
- .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
- .attr("transform", function(d) { return "translate(" + x(d.value.Unixtime) + "," + y(d.value.value) + ")"; })
- .attr("x", 3)
- .attr("dy", ".35em")
- .text(function(d) { return d.name; });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement