d3 = require("d3@5")
height = width
dataset = await d3.json("https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json")
grafica = {
// Crea el SVG - width esta definida por default
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
// la zona donde vamos a dibujar la grafica
const bounds = svg.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
// circulos
drawDots(dataset, "#19267C", bounds)
// Axes
const xAxis = bounds.append("g")
.call(xAxisGenerator)
.style("transform", `translate(0, ${dimensions.boundedHeight}px`)
const xAxisLabel = xAxis.append("text")
.attr("x", dimensions.boundedWidth / 2)
.attr("y", dimensions.margin.bottom - 10)
.attr("fill", "black")
.style("font-size", "1.4em")
.html("Dew Point (°F)")
const yAxis = bounds.append("g")
.call(yAxisGenerator)
const yAxisLabel = yAxis.append("text")
.attr("x", -dimensions.boundedHeight / 2)
.attr("y", -dimensions.margin.left + 10)
.attr("fill", "black")
.style("font-size", "1.4em")
.text("Relative humidity")
.style("transform", "rotate(-90deg)")
.style("text-anchor", "middle")
const title = bounds.append("g").append("text")
.attr("x", 0)
.attr("y", 0)
.attr("fill", "black")
.attr("font-size", "1.6em")
.text("Probando algo...")
.style("text-anchor", "left")
return svg.node()
}
yAccessor = d => d.dewPoint
xAccessor = d => d.humidity
colorAccessor = d => d.cloudCover
dimensions = ({
width: width,
height: width,
margin: ({
top: 30,
right: 10,
bottom: 50,
left: 50
})
})
dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom
dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
xScale = d3.scaleLinear()
.domain(d3.extent(dataset, xAccessor))
.range([0, dimensions.boundedWidth])
.nice()
yScale = d3.scaleLinear()
.domain(d3.extent(dataset, yAccessor))
.range([dimensions.boundedHeight, 10])
.nice()
colorScale = d3.scaleLinear()
.domain(d3.extent(dataset, colorAccessor))
.range(["skyblue", "darkslategrey"])
function drawDots(dataset, color, bounds) {
const dots = bounds.selectAll("circle").data(dataset)
dots.join("circle")
.attr("cx", d => xScale(xAccessor(d)))
.attr("cy", d => yScale(yAccessor(d)))
.attr("r", 5)
.attr("fill", d => colorScale(colorAccessor(d)))
}
xAxisGenerator = d3.axisBottom()
.scale(xScale)
.ticks(dimensions.boundedWidth / 50)
yAxisGenerator = d3.axisLeft()
.scale(yScale)
.ticks(4)
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.
