2d:null 2e:["$","title",null,{"children":"1.4 Selecciones en D3 | Emmanuel Iarussi | Observable"}] 33:[] 31:{"id":"5cc5be46ee404986","slug":"1-4-selecciones-en-d3","title":"1.4 Selecciones en D3","thumbnail":"d6d4769d2eb29b1253203cbc5986f34351b2f8785e237e71b3ed4400c28b8a4e","access_level":"public","create_time":"$D2020-09-25T23:23:11.111Z","update_time":"$D2025-04-02T14:56:34.057Z","view_time":null,"first_public_time":"$D2020-09-25T23:37:30.780Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":"pro_2024"},"version":187,"publish_version":187,"role":null,"authored":false,"authors":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null}],"members":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":31,"collection":{"id":"dba3f16f1821c155","slug":"dataviz2025_clase_1","title":"DataViz2025_MiM","owner":{"id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi"}},"type":"notebook","body":{"title":"1.4 Selecciones en D3","cells":[{"id":0,"value":"md`# 1.4 Selecciones en D3\n\nLas selecciones de D3 nos permiten seleccionar elementos DOM para hacer algo con ellos, ya sea cambiar de estilo, modificar sus atributos, realizar uniones de datos o insertar / eliminar elementos.\n\nPor ejemplo, dados estos 5 círculos:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\") //D3v5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// 4 círculos, el componente g agrupa todos los elementos\nhtml``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`Mirá lo que pasa cuando descomentas y ejecutas el contenido de esta celda. Recordá volver a ejecutar la primera celda para recuperar el estado original (todos círculos negros). ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// Descomentá este código para ver el efecto\n/*\nd3.selectAll('circle')\n .style('fill', 'orange')\n .attr('r', function() {\n return 10 + Math.random() * 40;\n });\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`Lo que está pasando es que D3 se encarga de buscar todos los componentes cuyo tag es \\`\\`\\` \\`\\`\\` y actualizar sus atributos de la manera en que lo indicamos. \n\nD3 tiene dos funciones para realizar las selecciones \\`\\`\\`d3.select\\`\\`\\` y \\`\\`\\`d3.selectAll\\`\\`\\`. \\`\\`\\`d3.select\\`\\`\\` selecciona el primer elemento que coincida con el tag y \\`\\`\\`d3.selectAll\\`\\`\\` selecciona todos los elementos que coincidan. Veamos el efecto de \\`\\`\\`d3.select\\`\\`\\`:\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Descomentá este código para ver el efecto\n/*\nd3.select('circle')\n .style('fill', 'orange')\n .attr('r', function() {\n return 10 + Math.random() * 40;\n });\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`Una vez que hacemos una selección, podemos modificar los elementos que contiene usando las siguientes funciones:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Nombre	Comportamiento	Ejemplo
.style	Actualizar estilo	d3.selectAll('circle').style('fill', 'red')
.attr	Actualizar atributo	d3.selectAll('rect').attr('width', 10)
.classed	Agregar/remover un atributo de clase	d3.select('.item').classed('selected', true)
.property	Actualizar una propiedad	d3.selectAll('.checkbox').property('checked', false)
.text	Actualizar contenido de texto	d3.select('div.title').text('Texto nuevo')
.html	Cambiar contenido HTML	d3.select('.legend').html('<div class=\"block\"></div><div>0 - 10</div>')

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`También podemos agregar a una selección usando \\`\\`\\`.append\\`\\`\\` e \\`\\`\\`.insert\\`\\`\\`, o eliminar usando \\`\\`\\`.remove\\`\\`\\`. \n\n### .append\n\nEn primer lugar, la función \\`\\`\\`.append\\`\\`\\` agrega un componente determinado *a los hijos* de cada elemento de la selección. Por ejemplo, si tenemos tres círculos:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`Podemos agregar un nuevo componente a cada elemento de la selecció. En este caso agregamos un componente de texto:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"d3.selectAll('g.item') // Selecciono grupos de clase item\n .append('text')\n .text(function(d, i) {\n return i + 1;\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### .insert\n\nLa función \\`\\`\\`.insert\\`\\`\\` es similar a \\`\\`\\`.append\\`\\`\\` pero nos permite agregar un elmento *antes* de cada uno de los seleccionados. Por ejemplo, volviendo al ejemplo de nuestros tres círculos (notar que cambiamos la opacidad de algunos componentes poder ver detrás de cada círculo): `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"d3.selectAll('g.iteminsert')\n .insert('text', 'circle')\n .text(function(d, i) {\n return i + 1;\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`### .remove\n\nPor último, la función \\`\\`\\`.remove\\`\\`\\` elimina todos los elementos de una selección. Por ejemplo, dados algunos círculos, podemos eliminarlos usando: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"d3.select('g.itemremove') // Remuevo el primero\n .remove();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"