viewof areaColor = color({
description: "Color del área",
value: "#19267c"
})
viewof metrica = select({
title: "Metricas",
description: "Escoge una metrica",
options: metrics,
value: "humidity"
})
histograma(metrica)
d3 = require("d3@5")
dataset = await d3.json("https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json")
histograma = metric => {
// Accessors
const metricAccessor = d=> d[metric]
const yAccessor = d => d.length
// dimensiones
const height = width * 0.50
const dimensions = ({
width: width,
height: height,
margin: ({
top: 30,
right: 20,
bottom: 50,
left: 20
})
})
dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom
dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
// Escalas
const xScale = d3.scaleLinear()
.domain(d3.extent(dataset, metricAccessor))
.range([0, dimensions.boundedWidth])
.nice()
// bins
const binsGenerator = d3.histogram()
.domain(xScale.domain())
.value(metricAccessor)
.thresholds(12)
const bins = binsGenerator(dataset)
// tenemos que hacer `bins` antes de la escala Y
const yScale = d3.scaleLinear()
.domain([0, d3.max(bins, yAccessor)])
.range([dimensions.boundedHeight, 0])
.nice()
// detalles
const barPadding = 1
const mean = d3.mean(dataset, metricAccessor)
// viz
const wrapper = d3.select(DOM.svg(width,height))
// donde ponemos la grafica
const bounds = wrapper.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
// agregamos figuras
const binGroup = bounds.append("g")
const binGroups = binGroup.selectAll("g")
.data(bins)
.enter().append("g")
// rectangulos
const barRects = binGroups.append("rect")
.attr("x", d => xScale(d.x0) + barPadding / 2)
.attr("y", d => yScale(yAccessor(d)))
.attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]))
.attr("height", d => dimensions.boundedHeight - yScale(yAccessor(d)))
.attr("fill", areaColor)
// etiquetas
const barText = binGroups.filter(yAccessor)
.append("text")
.attr("x", d => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
.attr("y", d => yScale(yAccessor(d)) - 5)
.text(yAccessor)
.style("text-anchor", "middle")
.attr("fill", "darkgrey")
.attr("font-size", "12px")
.attr("font-family", "sans-serif")
// promedio
const meanLine = bounds.append("line")
.attr("x1", xScale(mean))
.attr("x2", xScale(mean))
.attr("y1", -15)
.attr("y2", dimensions.boundedHeight)
.attr("stroke", "maroon")
.attr("stroke-dasharray", "2px 4px")
const meanLabel = bounds.append("text")
.attr("x", xScale(mean) + 3)
.attr("y", -1)
.text("promedio")
.attr("fill", "maroon")
.style("font-size", "12px")
.style("text-anchor", "left")
// Ejes
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
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")
.attr("font-size", "1.4em")
.text(`${metric}`)
.style("text-transform", "capitalize")
return wrapper.node()
}
metrics = [
"windSpeed",
"moonPhase",
"dewPoint",
"humidity",
"uvIndex",
"windBearing",
"temperatureMin",
"temperatureMax"
]
histograma(metrics[0])
histograma(metrics[1])
import {color} from "@jashkenas/inputs"
import {select} from "@jashkenas/inputs"
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.
