coleccion_de_circulos = [
{"eje_x":50 , "eje_y":45, "radio":22, "color":"#ffbe0b"},
{"eje_x":40, "eje_y":125, "radio":32, "color":"#fb5607"},
{"eje_x":180, "eje_y":155, "radio":43, "color":"#ff006e"},
{"eje_x":160, "eje_y":50, "radio":32, "color":"#8338ec"},
{"eje_x":110, "eje_y":100, "radio":22, "color":"#3a86ff" }
];
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos)
.enter()
.append("circle");
// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo
// para setear las propiedades cx, cy, r y fill del componente HTML circle
circulos.attr("cx", function(d) {return d.eje_x;} )
.attr("cy", function(d) {return d.eje_y;} )
.attr("r" , function(d) {return d.radio;} )
.style("fill", function(d) { return d.color;})
// Tenemos que definir 3 funciones para poder hacer efectivo el drag-and-drop
// d3 se encarga de asociar estas funciones internamente a cada componente
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
// 4. Retornamos el canvas
return svg.node();
}
// Acción al iniciar el drag, en este caso, cambiar el color y el ancho del borde del círculo
// .rise() tra el elemento al frente. Prueben qué ocurre si eliminan el .rise()
function dragstarted(d) {
d3.select(this).raise().attr("stroke", "#FFFFFF").attr("stroke-width",3).attr("stroke-dasharray",4);
}
// Acción durante el drag, en este caso, cambiar la posición del círculo. Noten que estamos cambiando el arreglo de datos con la información proveniente del evento del mouse d3.event.x / d3.event.y
function dragged(d) {
d3.select(this).attr("cx", d.eje_x = d3.event.x).attr("cy", d.eje_y = d3.event.y);
}
// Acción al finalizar el drag, en este caso, borrar la línea punteada que creamos alrededor del círculo para indicar al usuario que tenía el control sobre su posición
function dragended(d) {
d3.select(this).attr("stroke", null);
}
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos)
.enter()
.append("circle");
// 3. Le decimos al área de dibujo que queremos poder hacer zoom con los círculos.
// d3.zoom() facilita la tarea de agregar esta funcionalidad:
svg.call(d3.zoom()
.extent([[0, 0], [width, height]]) // El área zoomeable
.scaleExtent([1, 8]) // Minimo y máximo factor de escala posible
.on("zoom", function() {
circulos.attr("transform", d3.event.transform); // d3.event contiene la información del evento actual y el .transform aplica la transformación: al punto (x,y) le aplica la escala seleccionada
}));
// 4. Le decimos a d3 cómo utilizar la información disponible en el arreglo
// para setear las propiedades cx, cy, r y fill del componente HTML circle
circulos.attr("cx", function(d) {return d.eje_x;} )
.attr("cy", function(d) {return d.eje_y;} )
.attr("r" , function(d) {return d.radio;} )
.style("fill", function(d) { return d.color;})
// Tenemos que definir 3 funciones para poder hacer efectivo el drag-and-drop
// d3 se encarga de asociar estas funciones internamente a cada componente
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
// 5. Retornamos el canvas
return svg.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.