Skip to content

Instantly share code, notes, and snippets.

@JoseJuan81

JoseJuan81/.block

Created March 28, 2020 19:52
Show Gist options
  • Save JoseJuan81/bc210470592ba9767dedad40ff99d177 to your computer and use it in GitHub Desktop.
Save JoseJuan81/bc210470592ba9767dedad40ff99d177 to your computer and use it in GitHub Desktop.
Download ZIP
Clase 1
Raw
.block
license: mit
Raw
index.html
<!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
})
// 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])
// grafico
var svg = d3.select('svg')
var rect = svg.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('width', 15)
.attr('height', d => height - yScale(d.temperature))
.attr('x', d => xScale(d.date))
.attr('y', d => yScale(d.temperature))
.attr('fill', 'blue')
.attr('stroke', 'white');
// 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>
Raw
temperature.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment