Public
Edited
Nov 4, 2023
data = [
{ nombre: "ML", lat: 4.602709933777083, long: -74.06480043172927, categoriaNominal: "A" },
{ nombre: "W", lat: 4.602121697628483, long: -74.06501650095342, categoriaNominal: "A" },
{ nombre: "URBANA", lat: 40.10944250025892, long: -88.20356328657509, categoriaNominal: "B"}
];
dataA = data.filter(d => d.categoriaNominal === "A")
dataB = data.filter(d => d.categoriaNominal === "B")
mutable test = ""
pathGenerator = d3.geoPath(projection)
topojson = require("topojson-client@3")
{
const ancho = 500;
const alto = 300;
const zoom = d3.zoom().scaleExtent([1, 32]).on("zoom", updateZoom);
const miLienzo = d3.create("svg").attr("width", ancho).attr("height", alto);
miLienzo.call(zoom);
const datos = [10, 30, 50];
const circulos = miLienzo.selectAll("circle")
.data(datos)
.join("circle")
.attr("r", d => d)
.attr("cx", (d,i) => 100 + (100 * i))
.attr("cy", alto / 2)
.attr("fill", "red")
.on("mouseover", function(e) {
const circulo = d3.select(e.target);
circulo
.transition()
.attr("r", d => d * 2);
})
.on("mouseout", function(e) {
const circulo = d3.select(e.target);
circulo
.transition()
.attr("r", d => d);
})
function updateZoom({transform}) {
circulos.attr("transform", transform);
}
return miLienzo.node()
}
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.
