2b:null 2c:["$","title",null,{"children":"Iniciciativas Populares de Norma | Ernesto Laval | Observable"}] 31:T48d,{ const plotData = _.chain(data) .filter((d) => +d.apoyos > 1000) .value(); const domain = _.chain(plotData) .sortBy((d) => d.apoyos) .map((d) => d.id) .value(); const refId = domain[domain.length / 2]; const labelData = [ { refId: refId, refValue: 28000, label: dataXGrupos.data15K.length }, { refId: refId, refValue: 12000, label: dataXGrupos.data10K.length }, { refId: refId, refValue: 7500, label: dataXGrupos.data5K.length }, { refId: refId, refValue: 2000, label: dataXGrupos.data1K.length } ]; return Plot.plot({ marginLeft: 80, marginBottom: 80, width: width, height: width / 2, y: { zero: true }, x: { tickRotate: 90, domain: domain }, marks: [ Plot.ruleY([15000, 10000, 5000]), Plot.dot(plotData, { y: "apoyos", x: "id", r: 6, fill: "comision" }), Plot.text(labelData, { x: "refId", y: "refValue", text: (d) => `${d.label} iniciativas`, fontSize: 32 }) ] }); }32:T13e8,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/bubble-chart function BubbleChart( data, { linkTarget = "_blank", // the target attribute for links, if any width = 640, // outer width, in pixels height = width, // outer height, in pixels padding = 3, // padding between circles margin = 1, // default margins marginTop = margin, // top margin, in pixels marginRight = margin, // right margin, in pixels marginBottom = margin, // bottom margin, in pixels marginLeft = margin, // left margin, in pixels colors = d3.schemeTableau10, // an array of colors (for groups) fill = "#ccc", // a static fill color, if no group channel is specified fillOpacity = 0.7, // the fill opacity of the bubbles stroke, // a static stroke around the bubbles strokeWidth, // the stroke width around the bubbles, if any strokeOpacity // the stroke opacity around the bubbles, if any } = {} ) { // Construct scales. const color = d3.scaleOrdinal(comisiones, colors); // Compute layout: create a 1-deep hierarchy, and pack it. const root = d3 .pack() .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .padding(padding)(d3.hierarchy({ children: data }).sum((d) => d.apoyos)); const svg = d3 .create("svg") .attr("width", width) .attr("height", height + 500) .attr("viewBox", [-marginLeft, -marginTop, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("fill", "currentColor") .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("xmlns:xhtml", "http://www.w3.org/1999/xhtml"); const chartContainer = svg.append("g"); const tooltipContainer = svg.append("g"); const tooltip = tooltipContainer .append("foreignObject") .style("display", "none") .attr("x", 100) .attr("y", 0) .attr("width", width - 200) .attr("height", width / 4) .attr("fill", "yellow"); const tooltipBody = tooltip .append("xhtml:body") .attr("class", "body") .attr("xmlns", "http://www.w3.org/1999/xhtml"); { const tt = d3.select(tooltipTemplate).clone(true).attr("id", "template"); tooltipBody.html(""); tooltipBody.node().appendChild(tt.node()); } //tooltipBody.append("xhtml:div").classed("titulo", true); function showLabel(node) { const nodeData = node.datum(); tooltip .select("#titulo") .text(`${nodeData.data.id} - ${nodeData.data.titulo}`); tooltip.select("#apoyos").text(nodeData.data.apoyos); tooltip.select("#autor").text(nodeData.data.autor); tooltip.select("#comision").text(nodeData.data.comision); tooltip.select("#tema").text(nodeData.data.tema); tooltip.select("#organización").text(nodeData.data.organizacion); tooltip.style("display", null); const tooltipHeight = tooltipBody.node().getBoundingClientRect().height; if (nodeData.y > width) { tooltip.attr( "transform", `translate(${0},${nodeData.y - nodeData.r - tooltipHeight})` ); } else { tooltip.attr("transform", `translate(${0},${nodeData.y + nodeData.r})`); } const textWidth = this.tooltip.select("text").node().getBBox().width; } function hideLabel(node) { tooltip.style("display", "none"); } const leaf = chartContainer .selectAll("a") .data(root.leaves(), (d) => { return d.data.id; }) .join("a") .attr("xlink:href", (d) => d.data.url) .attr("target", linkTarget) .attr("transform", (d) => `translate(${d.x},${d.y})`); leaf .append("circle") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("fill", (d) => color(d.data.comision)) .attr("fill-opacity", fillOpacity) .attr("r", (d) => d.r); //leaf.append("title").text((d) => `${d.data.titulo}`); leaf .on("mouseover", function (d) { const myNode = d3.select(this); myNode.select("circle").attr("r", (d) => d.r); myNode.select("circle").attr("stroke", "yellow").attr("stroke-width", 2); showLabel(myNode); }) .on("mouseout", function (d) { const myNode = d3.select(this); myNode.select("circle").attr("stroke", "none").attr("stroke-width", 2); hideLabel(myNode); }); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; leaf .append("clipPath") .attr("id", (d) => `${uid}-clip-${d.data.id}`) .append("circle") .attr("r", (d) => d.r); leaf .append("text") .attr("class", "label") .attr("dy", 5) .attr( "clip-path", (d) => `url(${new URL(`#${uid}-clip-${d.data.id}`, location)})` ) .selectAll("tspan") .data((d) => { return `${d.data.apoyos}`.split(/\n/g); }) .join("tspan") .attr("x", 0) .attr("y", 0) .text((d) => d3.format(",d")(d)); return Object.assign(svg.node(), { scales: { color } }); }33:[] 2f:{"id":"31253f00e907ebf5","slug":"iniciciativas-populares-de-norma","title":"Iniciciativas Populares de Norma","thumbnail":"1e4052be376c84a2633efb1cef14033d7310516468fcd62a5fb83fe2d2b6ff3b","access_level":"public","create_time":"$D2022-01-16T17:18:17.842Z","update_time":"$D2022-01-26T12:55:49.637Z","view_time":null,"first_public_time":"$D2022-01-17T02:31:49.033Z","fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"0843f5dc42ca68a0","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":"starter_2024"},"version":767,"publish_version":767,"role":null,"authored":false,"authors":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null}],"members":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Iniciciativas Populares de Norma","cells":[{"id":0,"value":"# Iniciciativas Populares de Norma","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"viewof comisionSeleccionada = {\n const opcionesComisiones = _.chain(data)\n .groupBy((d) => d.comision)\n .map((items, comision) => ({\n label: comision,\n num: items.length\n }))\n .filter((d) => d.num > 0)\n .sortBy((d) => -d.num)\n .value();\n\n const opciones = _.concat(\n [{ label: \"Todas\", num: data.length }],\n opcionesComisiones\n );\n\n return Inputs.select(opciones, {\n format: (d) => `${d.label} (${d.num})`,\n label: \"Comisión\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof temaSeleccionado = {\n const dataFiltrada = _.chain(data)\n .filter((d) =>\n comisionSeleccionada.label == \"Todas\"\n ? true\n : d.comision == comisionSeleccionada.label\n )\n .value();\n\n const temas = _.chain(dataFiltrada)\n .groupBy((d) => d.tema)\n .map((items, tema) => ({\n label: tema,\n num: items.length\n }))\n .filter((d) => d.num > 0)\n .sortBy((d) => -d.num)\n .value();\n\n return Inputs.select(\n _.concat([{ label: \"Todos\", num: dataFiltrada.length }], temas),\n {\n format: (d) => `${d.label} (${d.num})`,\n label: \"Tema\"\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof textoABuscar = Inputs.text({\n label: \"Texto a buscar en título o autor\",\n placeholder: \"Ej. Salud\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"\n

Resumen

\n\n \n \n \n \n \n

15 mil apoyos o más	${dataXGrupos.data15K.length} iniciativas
10 a 15 mil apoyos	${dataXGrupos.data10K.length} iniciativas
5 a 10 mil apoyos	${dataXGrupos.data5K.length} iniciativas
Mil a 5 mil apoyos	${dataXGrupos.data1K.length} iniciativas
Bajo mil apoyos	${dataXGrupos.dataBajo1K.length} iniciativas

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":454,"value":"{\n const dataSet = dataXGrupos.data15K;\n return html`

Hay ${\n dataSet.length\n } iniciativas que ya tienen 15 mil apoyos

\n${buildTable(dataSet)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"{\n const dataSet = dataXGrupos.data10K;\n return html`

Hay ${\n dataSet.length\n } iniciativas que tienen entre 10 y 15 mil apoyos

\n${buildTable(dataSet)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"{\n const dataSet = dataXGrupos.data5K;\n return html`

Hay ${\n dataSet.length\n } iniciativas que tienen entre 5 y 10 mil apoyos

\n${buildTable(dataSet)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"{\n const dataSet = dataXGrupos.data1K;\n return html`

Hay ${\n dataSet.length\n } iniciativas que tienen entre mil y 5 mil apoyos

\n${buildTable(dataSet)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"

Hay ${\n dataXGrupos.dataBajo1K.length\n } iniciativas con menos de 1000 apoyos

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":672,"value":"viewof limitarItems = Inputs.radio(\n [\"Mostrar 100 con mayor apoyo\", \"Mostrar todas\"],\n { value: \"Mostrar 100 con mayor apoyo\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"{\n const dataSet = dataXGrupos.dataBajo1K.filter((d, i) =>\n limitarItems == \"Mostrar 100 con mayor apoyo\" ? i < 100 : true\n );\n\n return html`${buildTable(dataSet)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"

Representación gráfica de las iniciativas

Tamaño del círculo y etiqueta representa la cantidad de apoyos y el color representa la comisión respectiva

Al pasar el mouse sobre el círculo respectivo - o mantener presionado el dedo en una pantalla táctil - se muestra recuadro con datos de la iniciativa

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"chart = {\n const searchRegExp = new RegExp(textoABuscar, \"i\");\n const dataFiltrada = _.chain(data)\n .filter(\n (d) =>\n (comisionSeleccionada.label == \"Todas\"\n ? true\n : d.comision == comisionSeleccionada.label) &&\n (temaSeleccionado.label == \"Todos\"\n ? true\n : d.tema == temaSeleccionado.label) &&\n (textoABuscar ? d.titulo.match(searchRegExp) : true)\n )\n .value();\n\n //return dataFiltrada;\n\n return BubbleChart(dataFiltrada, {\n label: (d) => `${d.id}\\n${d.titulo}\\n${d.apoyos}`,\n value: (d) => d.apoyos,\n group: (d) => d.comision,\n groups: comisiones,\n title: (d) => `${d.titulo}`,\n link: (d) =>\n `https://plataforma.chileconvencion.cl/m/iniciativa_popular/o/${d.id}`,\n width: 1152\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"key = Swatches(chart.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"

Autores con 3 o más iniciativas

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"{\n return html`${dataPorAutor\n .filter((d) => d.numItems >= 3)\n .map(\n (itemAutor) => `\n

${itemAutor.autor} (${itemAutor.numItems} iniciativas)

\n ${buildTable(itemAutor.items)}\n `\n )}`;\n /*\n const dataSet = dataXGrupos.dataBajo1K;\n return html`

Hay ${\n dataSet.length\n } inicativas con menos de 1000 apoyos

\n\n${buildTable(dataSet)}`;*/\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"dataFiltrada = {\n const searchRegExp = new RegExp(textoABuscar, \"ig\");\n\n return _.chain(data)\n .filter(\n (d) =>\n (comisionSeleccionada.label == \"Todas\"\n ? true\n : d.comision == comisionSeleccionada.label) &&\n (temaSeleccionado.label == \"Todos\"\n ? true\n : d.tema == temaSeleccionado.label) &&\n (textoABuscar && textoABuscar.length > 2\n ? d.titulo.match(searchRegExp) ||\n d.id.match(searchRegExp) ||\n d.autor.match(searchRegExp)\n : true)\n )\n .value();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"dataXGrupos = {\n const data = dataFiltrada;\n const data15K = _.chain(data)\n .filter((d) => +d.apoyos >= 15000)\n .sortBy((d) => -d.apoyos)\n .value();\n\n const data10K = _.chain(data)\n .filter((d) => +d.apoyos >= 10000 && +d.apoyos < 15000)\n .sortBy((d) => -d.apoyos)\n .value();\n\n const data5K = _.chain(data)\n .filter((d) => +d.apoyos >= 5000 && +d.apoyos < 10000)\n .sortBy((d) => -d.apoyos)\n .value();\n\n const data1K = _.chain(data)\n .filter((d) => +d.apoyos >= 1000 && +d.apoyos < 5000)\n .sortBy((d) => -d.apoyos)\n .value();\n\n const dataBajo1K = _.chain(data)\n .filter((d) => +d.apoyos < 1000)\n .sortBy((d) => -d.apoyos)\n .value();\n\n return {\n data15K: data15K,\n data10K: data10K,\n data5K: data5K,\n data1K: data1K,\n dataBajo1K: dataBajo1K\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"tooltipTemplate = html`\n\n

Título

Apoyos: Apoyos

Comisión: Comisión

Tema: Tems

Autor: Autor

Organización: Organización

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"function buildTable(data) {\n return `\n\n\n\n\n\n\n\n ${data\n .map(\n (d) => `\n\n\n\n\n\n`\n )\n .join(``)}\n

Apoyos	Iniciativa	Autor	Organización
${d3.format(\",d\")(d.apoyos)}	${d.id} - ${\n d.titulo\n } ${d.comision}	${d.autor}	${d.organizacion}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"style_bootstrap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"import { style_bootstrap } from \"@elaval/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"comisiones = _.chain(data)\n .map((d) => d.comision)\n .uniq()\n .sortBy()\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"dataPorAutor = _.chain(data)\n .groupBy((d) => d.autor)\n .map((items, autor) => ({ autor, numItems: items.length, items: items }))\n .sortBy((d) => -d.numItems)\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.json(\n \"https://plataforma.chileconvencion.cl/m/iniciativa_popular/iniciativas.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"es_ES = ({\n decimal: \",\",\n thousands: \".\",\n grouping: [3],\n currency: [\"$\", \"\"],\n dateTime: \"%a %b %e %X %Y\",\n date: \"%d/%m/%Y\",\n time: \"%H:%M:%S\",\n periods: [\"AM\", \"PM\"],\n days: [\n \"Domingo\",\n \"Lunes\",\n \"Martes\",\n \"Miércoles\",\n \"Jueves\",\n \"Viernes\",\n \"Sábado\"\n ],\n shortDays: [\"Dom\", \"Lun\", \"Mar\", \"Mi\", \"Jue\", \"Vie\", \"Sab\"],\n months: [\n \"Enero\",\n \"Febrero\",\n \"Marzo\",\n \"Abril\",\n \"Mayo\",\n \"Junio\",\n \"Julio\",\n \"Agosto\",\n \"Septiembre\",\n \"Octubre\",\n \"Noviembre\",\n \"Diciembre\"\n ],\n shortMonths: [\n \"Ene\",\n \"Feb\",\n \"Mar\",\n \"Abr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Ago\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dic\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"d3.formatDefaultLocale(es_ES)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"