d3 = require("d3@5")
dataset = await d3.json("https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json")
grafica = {
// width esta definida por default en Observable.
const svg = d3.create("svg")
.attr("viewBox", [0,0,width,height]);
// Cuando se congela el agua
// No se ve porque en Tijuana nunca esta tan frio
const freezingTempPlacement = yScale(0)
svg.append("rect")
.attr("x", margin.left)
.attr("width", boundedWidth - margin.left)
.attr("y", freezingTempPlacement)
.attr("height", boundedHeight - freezingTempPlacement)
.attr("fill", "#E0F3F3")
// Y Axis
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxisGenerator)
// X Axis
svg.append("g")
.attr("transform",`translate(0,${boundedHeight})`)
.call(xAxisGenerator)
// Línea
svg.append("path")
.attr("d", lineGenerator(dataset))
.attr("fill","none")
.attr("stroke", "#19267c")
.attr("stroke-width", 1.2)
return svg.node();
}
height = 500
yAccessor = d => (d.temperatureMax - 32) * 5/9
dateParser = d3.timeParse("%Y-%m-%d")
xAccessor = d => dateParser(d.date)
margin = ({
top: 15,
right: 15,
bottom: 10,
left: 25
})
boundedWidth = width - margin.left - margin.right
boundedHeight = height - margin.top - margin.bottom
yScale = d3.scaleLinear()
.domain(d3.extent(dataset, yAccessor))
.range([boundedHeight, margin.top])
.nice()
xScale = d3.scaleTime()
.domain(d3.extent(dataset, xAccessor))
.range([margin.left, boundedWidth])
lineGenerator = d3.line()
.x(d => xScale(xAccessor(d)))
.y(d => yScale(yAccessor(d)))
yAxisGenerator = d3.axisLeft()
.scale(yScale)
.ticks(boundedHeight / 50)
xAxisGenerator = d3.axisBottom()
.scale(xScale)
.ticks(width / 50)
d3.timeFormatDefaultLocale(mx_ES);
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.
