Built with blockbuilder.org
forked from JoseJuan81's block: Clase 1
license: mit |
Built with blockbuilder.org
forked from JoseJuan81's block: Clase 1
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { height:100%;width:100%} | |
</style> | |
</head> | |
<body> | |
<svg></svg> | |
<script> | |
var width = 800 | |
var height = 300 | |
var margin = { top:20, left:20, bottom:20, right:20 } | |
// Parsear data | |
d3.csv("temperature.csv", (err, data) => { | |
data.forEach(d => { | |
d.date = new Date(d.date); | |
++d.temperature | |
}) | |
// data = data.slice(0, 100) | |
// min y max | |
var xExtent = d3.extent(data, d => d.date); | |
var yExtent = d3.extent(data, d => d.temperature); | |
// ejes o scales | |
var xScale = d3.scaleTime() | |
.domain(xExtent) | |
.range([margin.left, width - margin.right]) | |
var yScale = d3.scaleLinear() | |
.domain(yExtent) | |
.range([height - margin.bottom, margin.top]) | |
// crear instancia linear | |
var linear = d3.line() | |
.x(d => xScale(d.date)) | |
.y(d => yScale(d.temperature)) | |
.curve(d3.curveStep); | |
// grafico linear | |
var svg = d3.select('svg') | |
svg.append('path') | |
.attr('d', linear(data)) | |
.attr('fill', 'none') | |
.attr('stroke', 'red'); | |
// ubicar ejes | |
var xAxis = d3.axisBottom() | |
.scale(xScale); | |
var yAxis = d3.axisLeft() | |
.scale(yScale); | |
svg.append('g') | |
.attr('transform', 'translate(' + [0, height] + ')') | |
.call(xAxis); | |
svg.append('g') | |
.attr('transform', 'translate(' + [margin.left, 0] + ')') | |
.call(yAxis); | |
}) | |
</script> | |
</body> |
date | temperature | |
---|---|---|
2011-10-01 | 62.7 | |
2011-10-02 | 59.9 | |
2011-10-03 | 59.1 | |
2011-10-04 | 58.8 | |
2011-10-05 | 58.7 | |
2011-10-06 | 57.0 | |
2011-10-07 | 56.7 | |
2011-10-08 | 56.8 | |
2011-10-09 | 56.7 | |
2011-10-10 | 60.1 | |
2011-10-11 | 61.1 | |
2011-10-12 | 61.5 | |
2011-10-13 | 64.3 | |
2011-10-14 | 67.1 | |
2011-10-15 | 64.6 | |
2011-10-16 | 61.6 | |
2011-10-17 | 61.1 | |
2011-10-18 | 59.2 | |
2011-10-19 | 58.9 | |
2011-10-20 | 57.2 | |
2011-10-21 | 56.4 | |
2011-10-22 | 60.7 | |
2011-10-23 | 65.1 | |
2011-10-24 | 60.9 | |
2011-10-25 | 56.1 | |
2011-10-26 | 54.6 | |
2011-10-27 | 56.1 | |
2011-10-28 | 58.1 | |
2011-10-29 | 57.5 | |
2011-10-30 | 57.7 | |
2011-10-31 | 55.1 | |
2011-11-01 | 57.9 | |
2011-11-02 | 64.6 | |
2011-11-03 | 56.2 | |
2011-11-04 | 50.5 | |
2011-11-05 | 51.3 | |
2011-11-06 | 52.6 | |
2011-11-07 | 51.4 | |
2011-11-08 | 50.6 | |
2011-11-09 | 54.6 | |
2011-11-10 | 55.6 | |
2011-11-11 | 53.9 | |
2011-11-12 | 54.0 | |
2011-11-13 | 53.8 | |
2011-11-14 | 53.5 | |
2011-11-15 | 53.4 | |
2011-11-16 | 52.2 | |
2011-11-17 | 52.7 | |
2011-11-18 | 53.1 | |
2011-11-19 | 49.0 | |
2011-11-20 | 50.4 | |
2011-11-21 | 51.1 | |
2011-11-22 | 52.3 | |
2011-11-23 | 54.6 | |
2011-11-24 | 55.1 | |
2011-11-25 | 51.5 | |
2011-11-26 | 53.6 | |
2011-11-27 | 52.3 | |
2011-11-28 | 51.0 | |
2011-11-29 | 49.5 | |
2011-11-30 | 49.8 | |
2011-12-01 | 60.4 | |
2011-12-02 | 62.2 | |
2011-12-03 | 58.3 | |
2011-12-04 | 52.7 | |
2011-12-05 | 51.5 | |
2011-12-06 | 49.9 | |
2011-12-07 | 48.6 | |
2011-12-08 | 46.4 | |
2011-12-09 | 49.8 | |
2011-12-10 | 52.1 | |
2011-12-11 | 48.8 | |
2011-12-12 | 47.4 | |
2011-12-13 | 47.2 | |
2011-12-14 | 46.1 | |
2011-12-15 | 48.8 | |
2011-12-16 | 47.9 | |
2011-12-17 | 49.8 | |
2011-12-18 | 49.1 | |
2011-12-19 | 48.3 | |
2011-12-20 | 49.3 | |
2011-12-21 | 48.4 | |
2011-12-22 | 53.3 | |
2011-12-23 | 47.5 | |
2011-12-24 | 47.9 | |
2011-12-25 | 48.9 | |
2011-12-26 | 45.9 | |
2011-12-27 | 47.2 | |
2011-12-28 | 48.9 | |
2011-12-29 | 50.9 | |
2011-12-30 | 52.9 | |
2011-12-31 | 50.1 | |
2012-01-01 | 53.9 | |
2012-01-02 | 53.1 | |
2012-01-03 | 49.7 | |
2012-01-04 | 52.7 | |
2012-01-05 | 52.6 | |
2012-01-06 | 49.0 | |
2012-01-07 | 51.0 | |
2012-01-08 | 56.8 | |
2012-01-09 | 52.3 | |
2012-01-10 | 51.6 | |
2012-01-11 | 49.8 | |
2012-01-12 | 51.9 | |
2012-01-13 | 53.7 | |
2012-01-14 | 52.9 | |
2012-01-15 | 49.7 | |
2012-01-16 | 45.3 | |
2012-01-17 | 43.6 | |
2012-01-18 | 45.0 | |
2012-01-19 | 47.3 | |
2012-01-20 | 51.4 | |
2012-01-21 | 53.7 | |
2012-01-22 | 48.3 | |
2012-01-23 | 52.9 | |
2012-01-24 | 49.1 | |
2012-01-25 | 52.1 | |
2012-01-26 | 53.6 | |
2012-01-27 | 50.4 | |
2012-01-28 | 50.3 | |
2012-01-29 | 53.8 | |
2012-01-30 | 51.9 | |
2012-01-31 | 50.0 | |
2012-02-01 | 50.0 | |
2012-02-02 | 51.3 | |
2012-02-03 | 51.5 | |
2012-02-04 | 52.0 | |
2012-02-05 | 53.8 | |
2012-02-06 | 54.6 | |
2012-02-07 | 54.3 | |
2012-02-08 | 51.9 | |
2012-02-09 | 53.8 | |
2012-02-10 | 53.9 | |
2012-02-11 | 52.3 | |
2012-02-12 | 50.1 | |
2012-02-13 | 49.5 | |
2012-02-14 | 48.6 | |
2012-02-15 | 49.9 | |
2012-02-16 | 52.4 | |
2012-02-17 | 49.9 | |
2012-02-18 | 51.6 | |
2012-02-19 | 47.8 | |
2012-02-20 | 48.7 | |
2012-02-21 | 49.7 | |
2012-02-22 | 53.4 | |
2012-02-23 | 54.1 | |
2012-02-24 | 55.9 | |
2012-02-25 | 51.7 | |
2012-02-26 | 47.7 | |
2012-02-27 | 45.4 | |
2012-02-28 | 47.0 | |
2012-02-29 | 49.8 | |
2012-03-01 | 48.9 | |
2012-03-02 | 48.1 | |
2012-03-03 | 50.7 | |
2012-03-04 | 55.0 | |
2012-03-05 | 48.8 | |
2012-03-06 | 48.4 | |
2012-03-07 | 49.9 | |
2012-03-08 | 49.2 | |
2012-03-09 | 51.7 | |
2012-03-10 | 49.3 | |
2012-03-11 | 50.0 | |
2012-03-12 | 48.6 | |
2012-03-13 | 53.9 | |
2012-03-14 | 55.2 | |
2012-03-15 | 55.9 | |
2012-03-16 | 54.6 | |
2012-03-17 | 48.2 | |
2012-03-18 | 47.1 | |
2012-03-19 | 45.8 | |
2012-03-20 | 49.7 | |
2012-03-21 | 51.4 | |
2012-03-22 | 51.4 | |
2012-03-23 | 48.4 | |
2012-03-24 | 49.0 | |
2012-03-25 | 46.4 | |
2012-03-26 | 49.7 | |
2012-03-27 | 54.1 | |
2012-03-28 | 54.6 | |
2012-03-29 | 52.3 | |
2012-03-30 | 54.5 | |
2012-03-31 | 56.2 | |
2012-04-01 | 51.1 | |
2012-04-02 | 50.5 | |
2012-04-03 | 52.2 | |
2012-04-04 | 50.6 | |
2012-04-05 | 47.9 | |
2012-04-06 | 47.4 | |
2012-04-07 | 49.4 | |
2012-04-08 | 50.0 | |
2012-04-09 | 51.3 | |
2012-04-10 | 53.8 | |
2012-04-11 | 52.9 | |
2012-04-12 | 53.9 | |
2012-04-13 | 50.2 | |
2012-04-14 | 50.9 | |
2012-04-15 | 51.5 | |
2012-04-16 | 51.9 | |
2012-04-17 | 53.2 | |
2012-04-18 | 53.0 | |
2012-04-19 | 55.1 | |
2012-04-20 | 55.8 | |
2012-04-21 | 58.0 | |
2012-04-22 | 52.8 | |
2012-04-23 | 55.1 | |
2012-04-24 | 57.9 | |
2012-04-25 | 57.5 | |
2012-04-26 | 55.3 | |
2012-04-27 | 53.5 | |
2012-04-28 | 54.7 | |
2012-04-29 | 54.0 | |
2012-04-30 | 53.4 | |
2012-05-01 | 52.7 | |
2012-05-02 | 50.7 | |
2012-05-03 | 52.6 | |
2012-05-04 | 53.4 | |
2012-05-05 | 53.1 | |
2012-05-06 | 56.5 | |
2012-05-07 | 55.3 | |
2012-05-08 | 52.0 | |
2012-05-09 | 52.4 | |
2012-05-10 | 53.4 | |
2012-05-11 | 53.1 | |
2012-05-12 | 49.9 | |
2012-05-13 | 52.0 | |
2012-05-14 | 56.0 | |
2012-05-15 | 53.0 | |
2012-05-16 | 51.0 | |
2012-05-17 | 51.4 | |
2012-05-18 | 52.2 | |
2012-05-19 | 52.4 | |
2012-05-20 | 54.5 | |
2012-05-21 | 52.8 | |
2012-05-22 | 53.9 | |
2012-05-23 | 56.5 | |
2012-05-24 | 54.7 | |
2012-05-25 | 52.5 | |
2012-05-26 | 52.1 | |
2012-05-27 | 52.2 | |
2012-05-28 | 52.9 | |
2012-05-29 | 52.1 | |
2012-05-30 | 52.1 | |
2012-05-31 | 53.3 | |
2012-06-01 | 54.8 | |
2012-06-02 | 54.0 | |
2012-06-03 | 52.3 | |
2012-06-04 | 55.3 | |
2012-06-05 | 53.5 | |
2012-06-06 | 54.1 | |
2012-06-07 | 53.9 | |
2012-06-08 | 54.4 | |
2012-06-09 | 55.0 | |
2012-06-10 | 60.0 | |
2012-06-11 | 57.2 | |
2012-06-12 | 55.1 | |
2012-06-13 | 53.3 | |
2012-06-14 | 53.4 | |
2012-06-15 | 54.6 | |
2012-06-16 | 57.0 | |
2012-06-17 | 55.6 | |
2012-06-18 | 52.5 | |
2012-06-19 | 53.9 | |
2012-06-20 | 55.3 | |
2012-06-21 | 53.3 | |
2012-06-22 | 54.1 | |
2012-06-23 | 55.2 | |
2012-06-24 | 55.8 | |
2012-06-25 | 56.8 | |
2012-06-26 | 57.5 | |
2012-06-27 | 57.7 | |
2012-06-28 | 56.6 | |
2012-06-29 | 56.4 | |
2012-06-30 | 58.4 | |
2012-07-01 | 58.8 | |
2012-07-02 | 56.4 | |
2012-07-03 | 56.5 | |
2012-07-04 | 55.8 | |
2012-07-05 | 54.8 | |
2012-07-06 | 54.9 | |
2012-07-07 | 54.7 | |
2012-07-08 | 52.8 | |
2012-07-09 | 53.7 | |
2012-07-10 | 53.1 | |
2012-07-11 | 52.7 | |
2012-07-12 | 52.0 | |
2012-07-13 | 53.4 | |
2012-07-14 | 54.0 | |
2012-07-15 | 54.0 | |
2012-07-16 | 54.5 | |
2012-07-17 | 56.7 | |
2012-07-18 | 57.5 | |
2012-07-19 | 57.1 | |
2012-07-20 | 58.1 | |
2012-07-21 | 57.6 | |
2012-07-22 | 56.0 | |
2012-07-23 | 56.6 | |
2012-07-24 | 57.8 | |
2012-07-25 | 57.5 | |
2012-07-26 | 56.4 | |
2012-07-27 | 55.3 | |
2012-07-28 | 55.0 | |
2012-07-29 | 55.6 | |
2012-07-30 | 55.6 | |
2012-07-31 | 55.9 | |
2012-08-01 | 55.4 | |
2012-08-02 | 54.4 | |
2012-08-03 | 53.7 | |
2012-08-04 | 54.1 | |
2012-08-05 | 57.8 | |
2012-08-06 | 58.2 | |
2012-08-07 | 58.0 | |
2012-08-08 | 57.0 | |
2012-08-09 | 55.0 | |
2012-08-10 | 54.8 | |
2012-08-11 | 53.0 | |
2012-08-12 | 52.5 | |
2012-08-13 | 53.3 | |
2012-08-14 | 53.9 | |
2012-08-15 | 56.2 | |
2012-08-16 | 57.1 | |
2012-08-17 | 55.3 | |
2012-08-18 | 56.2 | |
2012-08-19 | 54.3 | |
2012-08-20 | 53.1 | |
2012-08-21 | 53.4 | |
2012-08-22 | 54.5 | |
2012-08-23 | 55.7 | |
2012-08-24 | 54.8 | |
2012-08-25 | 53.8 | |
2012-08-26 | 56.5 | |
2012-08-27 | 58.3 | |
2012-08-28 | 58.7 | |
2012-08-29 | 57.5 | |
2012-08-30 | 55.9 | |
2012-08-31 | 55.4 | |
2012-09-01 | 55.7 | |
2012-09-02 | 53.1 | |
2012-09-03 | 53.5 | |
2012-09-04 | 52.5 | |
2012-09-05 | 54.5 | |
2012-09-06 | 56.3 | |
2012-09-07 | 56.4 | |
2012-09-08 | 56.5 | |
2012-09-09 | 56.4 | |
2012-09-10 | 55.4 | |
2012-09-11 | 56.2 | |
2012-09-12 | 55.7 | |
2012-09-13 | 54.3 | |
2012-09-14 | 55.2 | |
2012-09-15 | 54.3 | |
2012-09-16 | 52.9 | |
2012-09-17 | 54.8 | |
2012-09-18 | 54.8 | |
2012-09-19 | 56.8 | |
2012-09-20 | 55.4 | |
2012-09-21 | 55.8 | |
2012-09-22 | 55.9 | |
2012-09-23 | 52.8 | |
2012-09-24 | 54.5 | |
2012-09-25 | 53.3 | |
2012-09-26 | 53.6 | |
2012-09-27 | 52.1 | |
2012-09-28 | 52.6 | |
2012-09-29 | 53.9 | |
2012-09-30 | 55.1 |