Desde Argentina para el mundo
Published
Edited
Apr 5, 2021
1 star
md`# Pronóstico de temperatura del Servicio Meteorológico Nacional.`
md`Los datos son provistos por el SMN en un .zip, hice un script que convierte estos datos en un formato CSV que luego es leido por este Notebook. Una breve descripción sobre el procesamiento de datos en el [github](https://github.com/wlamagna/viz1/blob/master/clima/README.md).`
visualizeTicks(
d3.scaleTime().domain([parser(data[0].fecha), parser(data[1].fecha)])
)
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis)
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
svg.append("text")
//.attr("transform", "rotate(-90)")
.attr("y", 10)
.attr("x", 60)
.attr("dy", ".1em")
.style("text-anchor", "middle")
.text("Temp. (c)");
// Etiqueta eje X
svg.append("text")
.attr("x", (width/2) )
.attr("y", (height-10) )
.style("text-anchor", "middle")
.text("Fecha y hora");
return svg.node();
}
parser = d3.timeParse("%d/%m/%Y %H:%M")
x.domain(d3.extent(data, function(d) {
return parser(d.fecha);
}))
md`Los datos: una descripción de los datos en mi [blog](https://serverlinux.blogspot.com/2021/04/d3-observable-notas-post-meeting-de-d3.html)`
data = d3.csv("https://raw.githubusercontent.com/wlamagna/viz1/master/clima/BUENOS_AIRES.csv");
line = d3.line()
.x(d => x(parser(d.fecha)))
.y(d => y(d.temp))
margin = ({top: 10, right: 60, bottom: 40, left: 50})
height = 300
width = 800
x = d3.scaleTime()
.domain([parser(data[0].fecha), parser(data[1].fecha)])
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([d3.min(data, d => d.temp), d3.max(data, d => d.temp)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
import {visualizeTicks} from "@d3/continuous-scales"
d3 = require("d3@^6.1")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
