chart = {
const width = 928; // uncomment for responsive width
const height = 200;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
svg
.selectAll("circle")
.data(d3.range(18))
.join("circle")
.attr("cx", d => 30 + d * 50)
.attr("cy", height / 2)
.attr("r", d => Math.random() * 20)
.attr("fill", "#001b42");
return svg.node();
}
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
olympians
data = FileAttachment("3f_vecinal1_pipeline_output.json").json()
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
data
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([34.35, -58.423], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
// Colores por puntaje (1-5)
const colorScale = d3.scaleOrdinal()
.domain([1, 2, 3, 4, 5])
.range(["#d73027", "#fc8d59", "#fee08b", "#91cf60", "#1a9850"]);
for (const d of data) {
const puntaje = +d.respuesta; // q7_answer debe ser número
if (!puntaje || puntaje < 1 || puntaje > 5) continue;
const circle = L.circleMarker([d.lat, d.lng], {
radius: 8,
fillColor: colorScale(puntaje),
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.7
})
.bindPopup(`Puntaje: ${puntaje}`)
.addTo(map);
}
}
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.
