27:null 28:["$","title",null,{"children":"Tests | Ismael | Observable"}] 2d:Ta6d,radioSelector = (context, conf) => { let config = { domain: [0, 1], color: { hover: 'lightblue', active: 'tomato', inactive: 'none' }, fontSize: { hover: 7, }, spacing: 20, orient: 'vertical', reverse: false, initialSelectedIndex: 0, value: null, onClick: () => console.log('clicked'), ...conf } const domain = config.domain const orient = config.orient === 'horizontal' ? 'x' : 'y' const orientComplement = orient === 'x' ? 'y' : 'x' const initialSelectedIndex = domain.includes(config.value) ? domain.indexOf(config.value) : 0 const setInitialSelected = (d, i) => ( d.selected = i === initialSelectedIndex ? true: false ) const orderedDomain = config.reverse ? domain.reverse() : domain const values = orderedDomain.map(d => ({value: d})) const g = context .selectAll("g") .data(values) .join("g") g.append("circle") .each(setInitialSelected) // unused .classed("selected", setInitialSelected) .attr("stroke-width", 1) .attr("stroke", "black") .attr(`c${orient}`, (d, i) => i * config.spacing) .attr("r", 3) .attr("fill", config.color.inactive) .attr("cursor", "pointer") .on("click", (event, d) => { // clean previous selected elements (circle and label) d3.select(".selected") .classed("selected", false) d3.select(".selectedLabel") .classed("selectedLabel", false) // style new selected elements (circle and label) d3.select(event.currentTarget) .classed("selected", true) d3.select(`#label-${d.value}`) .classed("selectedLabel", true) // execute defered function config.onClick(event, d) }) .on("mouseover", (event, d) => { d3.select(event.currentTarget) .attr("fill", config.color.hover) d3.select(`#label-${d.value}`) .attr("visibility", "visible") }) .on("mouseout", (event, d) => { d3.select(event.currentTarget) .attr("fill", config.color.inactive) d3.select(`#label-${d.value}`) .attr("visibility", "hidden") }) g.append("text") .each(setInitialSelected) // unused .classed("selectedLabel", setInitialSelected) .attr(orient, (d, i) => i * config.spacing) .attr(`d${orient}`, config.orient === 'horizontal' ? "" : "0.38em") .attr(orientComplement, 13) .attr("text-anchor", "middle") .attr("visibility", "hidden") .attr("font-size", config.fontSize.hover) .attr("id", (d, i) => `label-${d.value}`) .text(d => d.value) }2e:Tf68,radioSelector2 = (context, conf) => { let config = { domain: [0, 1], color: { hover: 'lightblue', active: 'tomato', inactive: 'white' }, fontSize: { hover: 6, active: 8, inactive: 5 }, size: { hover: 4, active: 5, inactive: 3, }, spacing: 20, orient: 'vertical', reverse: false, initialSelectedIndex: 0, value: null, onClick: () => null, ...conf } const domain = config.domain const orient = config.orient === 'horizontal' ? 'x' : 'y' const orientComplement = orient === 'x' ? 'y' : 'x' const initialSelectedIndex = domain.includes(config.value) ? domain.indexOf(config.value) : 0 const setInitialSelected = (d, i) => ( d.selected = i === initialSelectedIndex ? true: false ) const orderedDomain = config.reverse ? domain.reverse() : domain const values = orderedDomain.map(d => ({value: d})) const g = context .selectAll("g") .data(values) .join("g") g.append("circle") .each(setInitialSelected) .classed("radiusSelected", setInitialSelected) .attr("stroke-width", 1) .attr("stroke", "black") .attr(`c${orient}`, (d, i) => i * config.spacing) .attr("r", (d, i) => i === initialSelectedIndex ? config.size.active : config.size.inactive ) .attr("fill", (d, i) => i === initialSelectedIndex ? config.color.active : config.color.inactive ) .attr("cursor", "pointer") .on("click", (event, d) => { // do not update current selected if (d.selected) return // clear state d.selected = true d3.select(".radiusSelected").datum(d => ({...d, selected: false})) // clean style of previous selected elements (circle and label) d3.select(".radiusSelected") .classed("radiusSelected", false) .attr("fill", config.color.inactive) .attr("r", config.size.inactive) d3.select(".radiusSelectedLabel") .classed("radiusSelectedLabel", false) .attr("visibility", "hidden") // style new selected elements (circle and label) d3.select(event.currentTarget) .classed("radiusSelected", true) .attr("fill", config.color.active) .attr("r", config.size.active) d3.select(`#radius-label-${d.value}`) .classed("radiusSelectedLabel", true) .attr("visibility", "visible") .attr("font-size", config.fontSize.active) // execute defered function config.onClick(event, d) }) .on("mouseover", (event, d) => { if (d.selected) return d3.select(event.currentTarget) .attr("fill", config.color.hover) .attr("r", config.size.hover) d3.select(`#radius-label-${d.value}`) .attr("visibility", "visible") .attr("font-size", config.fontSize.hover) }) .on("mouseout", (event, d) => { if (d.selected) return d3.select(event.currentTarget) .attr("fill", config.color.inactive) .attr("r", config.size.inactive) d3.select(`#radius-label-${d.value}`) .attr("visibility", "hidden") .attr("font-size", config.fontSize.inactive) }) g.append("text") .classed("radiusSelectedLabel", (d, i) => i === initialSelectedIndex ? true: false) .attr(orient, (d, i) => i * config.spacing) .attr(`d${orient}`, config.orient === 'horizontal' ? "" : "0.38em") .attr(orientComplement, 13) .attr("text-anchor", "middle") .attr("visibility", (d, i) => i === initialSelectedIndex ? "visible" : "hidden" ) .attr("font-size", (d, i) => i === initialSelectedIndex ? config.fontSize.active: config.fontSize.inactive ) .attr("id", (d, i) => `radius-label-${d.value}`) .text(d => d.value) }2f:T8ac,{ const chart = d3.create('svg') .attr("viewBox", [0,0,500,25]) // radio selector configuration const config = { domain, value: 1, orient: 'horizontal', onClick: update } // appending radio selector chart.append("g") .attr("transform", "translate(40, 10)") .call(radioSelector2, config) // appending dependent element chart .selectAll(".test") .data(filteredData, d => d.value) .enter() .append("circle") .attr("class", "test") .attr("transform", d => `translate(${240 + 40 * (d.value - 1)}, 10)`) .attr("r", d => d.radius) .attr("fill", "red") function update(event, state) { // update global state // only neccesary if the globalState is being used by other cells // so not necessary in this case since the selector has an internal state globalState.value = state.value // select new data const newData = data.filter(d => d.value === state.value) // update testElement // ACA ME HE PASADO POCO MAS DE UNA HORA DEBUGEANDO - TOCATE LOS COJONES! JAJA // en vez de `chart.selectAll('.test')` habia puesto `d3.selectAll('.test')` // debugeando vi que la selection tenia como parent `html` y el attribute _enter tenia un array vacio // aunque creo que esto ultimo no necesariamente indica que este fluyendo mal la data, dependeria del caso; // en fin, luego del cambio, el attribute _enter era un array ahora si con un elemento const testElement = chart.selectAll('.test') .data(newData, d => d.value) // enter new data testElement .enter() .append("circle") .attr("class", "test") .attr("transform", d => `translate(${240 + 40 * (d.value - 1)}, 10)`) .attr("r", 0) .attr("fill", "red") .transition('enter-transition') .duration(500) .attr("r", d => d.radius) // update previous data testElement .transition('update-transition') .duration(500) .attr("r", d => d.radius) // exit previous data testElement .exit() .transition('exit-transition') .duration(500) .attr("r", 0) .remove(); } return chart.node() }30:T4cd,md` In the previous implementation the events where defined at the symbol level, which hindered (get complicated) the reaction on the label level (on hover to update both symbol and label). In this implementation the events were defined at its parent level, joining the data (selector values) and within this context defining the event handling, easing the access to both symbol and level elements. The selector keeps beign handled by an internal state, AND, this state can be defined externally (same as the previous implementation), and when the selector change, it changes its internal state that is associated with an external state so it will also change. There no need to pass a dependet external state, if a deepcopy is passed then the selector will continue to be dependent of its internal state independently of any external one. Careful, if a globalState is used it should be expected to be updated only by this radioSelector since if the globalState is updated elsewhere (like in the chart above) the current radioSelector wont be able to react properly since the logic is defined to act as the only state handler. Try using the globalState and play with both above and current radioSelectors to see the behaviour. `31:Te9d,radioSelector3 = (context, conf) => { let config = { domain: [0, 1], color: { hover: 'lightblue', active: 'tomato', inactive: 'white' }, fontSize: { hover: 6, active: 8, inactive: 5 }, size: { hover: 4, active: 5, inactive: 3, }, spacing: 20, orient: 'vertical', reverse: false, initialSelectedIndex: 0, state: {}, onClick: () => null, ...conf } const domain = config.domain const orient = config.orient === 'horizontal' ? 'x' : 'y' const orientComplement = orient === 'x' ? 'y' : 'x' const initialSelectedIndex = domain.includes(config.state.value) ? domain.indexOf(config.state.value) : 0 const data = config.reverse ? domain.reverse() : domain const radialSelector = context .selectAll("g") .data(data) .join("g") .attr("class", "radial-selector") .attr("cursor", "pointer") .on("click", (event, value) => { if (value === config.state.value) return // refresh style for all symbol radialSelector .selectAll(".radial-selector-symbol") .attr("r", d => d === value ? config.size.active : config.size.inactive) .attr("fill", d => d === value ? config.color.active : config.color.inactive) // refresh style for all labels radialSelector .selectAll(".radial-selector-label") .attr("font-size", d => d === value ? config.fontSize.active: config.fontSize.inactive) .attr("visibility", d => d === value ? "visible" : "hidden") // update state (could be global) config.state.value = value // execute deferred function config.onClick(event, value) }) .on("mouseover", (event, d) => { if (d === config.state.value) return // style selector symbol d3.select(event.currentTarget) .select(".radial-selector-symbol") .attr("fill", config.color.hover) .attr("r", config.size.hover) // style selector label d3.select(event.currentTarget) .select(".radial-selector-label") .attr("visibility", "visible") .attr("font-size", config.fontSize.hover) }) .on("mouseout", (event, d) => { if (d === config.state.value) return // clear style selector symbol d3.select(event.currentTarget) .select(".radial-selector-symbol") .attr("fill", config.color.inactive) .attr("r", config.size.inactive) // clear style selector label d3.select(event.currentTarget) .select(".radial-selector-label") .attr("visibility", "hidden") .attr("font-size", config.fontSize.inactive) }) radialSelector.append("circle") .attr("class", "radial-selector-symbol") .attr("stroke-width", 1) .attr("stroke", "black") .attr(`c${orient}`, (d, i) => i * config.spacing) .attr("r", (d, i) => i === initialSelectedIndex ? config.size.active : config.size.inactive ) .attr("fill", (d, i) => i === initialSelectedIndex ? config.color.active : config.color.inactive ) radialSelector.append("text") .attr("class", "radial-selector-label") .attr(orient, (d, i) => i * config.spacing) .attr(`d${orient}`, config.orient === 'horizontal' ? "" : "0.38em") .attr(orientComplement, 13) .attr("text-anchor", "middle") .attr("visibility", (d, i) => i === initialSelectedIndex ? "visible" : "hidden" ) .attr("font-size", (d, i) => i === initialSelectedIndex ? config.fontSize.active: config.fontSize.inactive ) .text(d => d) }32:T833,{ const chart = d3.create('svg') .attr("viewBox", [0,0,500,25]) // radio selector configuration const config = { domain, orient: 'horizontal', onClick: update, // bellow is the reference to the current state // could be global or not, it works as the initial selector state state: {value: 1} // try uncommenting this and play with both radioSelector (the one from the previous section) // and watch how it gets buggy // state: globalState } // appending radio selector chart.append("g") .attr("transform", "translate(40, 10)") .call(radioSelector3, config) // appending dependent element chart .selectAll(".test-circle") .data(filteredData, d => d.value) .join("circle") .attr("class", "test-circle") .attr("transform", d => `translate(${240 + 40 * (d.value - 1)}, 10)`) .attr("r", d => d.radius) .attr("fill", "red") function update(event, value) { // select new data const newData = data.filter(d => d.value === value) const onEnter = enter => enter.append("circle") .attr("class", "test-circle") .attr("transform", d => `translate(${240 + 40 * (d.value - 1)}, 10)`) .attr("r", 0) .attr("fill", "red") .call(enter => enter .transition('enter-transition') .duration(500) .attr("r", d => d.radius) ) const onUpdate = update => update .call(update => update .transition('update-transition') .duration(500) .attr("r", d => d.radius) ) const onExit = exit => exit .call(exit => exit .transition('exit-transition') .duration(500) .attr("r", 0) .remove() ) // update test element chart.selectAll('.test-circle') .data(newData, d => d.value) .join( enterSelection => onEnter(enterSelection), updateSelection => onUpdate(updateSelection), exitSelection => onExit(exitSelection) ) } return chart.node() }33:Tf46,radioSelector4 = (context, conf) => { let config = { scalePoint: null, color: { hover: 'lightblue', active: 'tomato', inactive: 'white' }, fontSize: { hover: 10, active: 12, inactive: 8 }, size: { hover: 8, active: 10, inactive: 6, }, orient: 'vertical', reverse: false, value: null, onClick: () => null, ...conf } const orient = config.orient === 'horizontal' ? 'x' : 'y' const orientComplement = orient === 'x' ? 'y' : 'x' const domain = config.scalePoint.domain() const initialSelectedIndex = domain.includes(config.value) ? domain.indexOf(config.value) : 0 const data = config.reverse ? domain.reverse() : domain context.append("line") .attr("class", "radial-selector-symbol-connect") .attr("x1", config.scalePoint.range()[0]) .attr("x2", config.scalePoint.range()[1]) .attr("stroke-width", 1) .attr("stroke", "black") const radialSelector = context .selectAll("g") .data(data) .join("g") .attr("class", "radial-selector") .attr("cursor", "pointer") .on("click", (event, value) => { if (value === config.value) return // refresh style for all symbol radialSelector .selectAll(".radial-selector-symbol") .attr("r", d => d === value ? config.size.active : config.size.inactive) .attr("fill", d => d === value ? config.color.active : config.color.inactive) // refresh style for all labels radialSelector .selectAll(".radial-selector-label") .attr("font-size", d => d === value ? config.fontSize.active: config.fontSize.inactive) // update state config.value = value // execute deferred function config.onClick(event, value) }) .on("mouseover", (event, d) => { if (d === config.value) return // style selector symbol d3.select(event.currentTarget) .select(".radial-selector-symbol") .attr("fill", config.color.hover) .attr("r", config.size.hover) // style selector label d3.select(event.currentTarget) .select(".radial-selector-label") .attr("font-size", config.fontSize.hover) }) .on("mouseout", (event, d) => { if (d === config.value) return // clear style selector symbol d3.select(event.currentTarget) .select(".radial-selector-symbol") .attr("fill", config.color.inactive) .attr("r", config.size.inactive) // clear style selector label d3.select(event.currentTarget) .select(".radial-selector-label") .attr("font-size", config.fontSize.inactive) }) radialSelector.append("circle") .attr("class", "radial-selector-symbol-mask") .attr(`c${orient}`, d => config.scalePoint(d)) .attr("r", config.fontSize.active * 1.2) .attr("fill", "white") radialSelector.append("circle") .attr("class", "radial-selector-symbol") .attr("stroke-width", 1) .attr("stroke", "black") .attr(`c${orient}`, d => config.scalePoint(d)) .attr("r", (d, i) => i === initialSelectedIndex ? config.size.active : config.size.inactive ) .attr("fill", (d, i) => i === initialSelectedIndex ? config.color.active : config.color.inactive ) radialSelector.append("text") .attr("class", "radial-selector-label") .attr(orient, d => config.scalePoint(d)) .attr(orientComplement, config.size.active + config.fontSize.active * 1.2 ) .attr(`d${orient}`, config.orient === 'horizontal' ? "" : "0.38em") .attr("text-anchor", "middle") .attr("font-size", (d, i) => i === initialSelectedIndex ? config.fontSize.active: config.fontSize.inactive ) .text(d => d) }34:T5c3,gradeLabels = (g, { arcScale }) => g .attr("class", "grades") .each((d, i) => d.id = DOM.uid(d.grade)) .call(g => g.append("path") .attr("id", d => d.id.id) .attr("fill", "none") .attr("d", d => { const titleAngleExtent = Math.PI; const titleCenterAngle = 0; const radiusScaled = arcScale( d.extent[1] / 2 ); const startAngle = d3.pointRadial(titleCenterAngle - titleAngleExtent/2, radiusScaled) const endAngle = d3.pointRadial(titleCenterAngle + titleAngleExtent/2, radiusScaled) return ` M${startAngle} A${radiusScaled},${radiusScaled} 0,0,1 ${endAngle} ` }) // --- SAMES AS ---- // .datum(d => ({angle: Math.PI/6, radius: scale(d.extent[1] / 2)})) // .attr("d", ({angle, radius}) => ` // M${d3.pointRadial(-angle, radius)} // A${radius},${radius} 0,0,1 ${d3.pointRadial(angle, radius)} // `) ) .call(g => g.append("text") .attr("font-size", 16) .attr("dy", "-0.25em") .append("textPath") .attr("text-anchor", "middle") .attr("startOffset", "50%") .attr("xlink:href", d => d.id.href) .text(d => d.gradeLabel) // HACK to fill text background // .attr("stroke", "#fff") // .attr("stroke-width", 5) // .clone(true) // .attr("fill", "currentColor") // .attr("stroke", "none") )35:T1161,dataByElectionType = [{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"3","organizacion":"PARTIDO MORADO","title":"PARTIDO MORADO","electores_habiles":17553,"electores_participaron":4181,"participacion":[{"tipo":"electores_habiles","valor":17553},{"tipo":"electores_participaron","valor":4181}],"participacion_porcentual":0.23819290149831937,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/PARTIDO MORADO.jpg"},{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"4","organizacion":"ACCION POPULAR","title":"ACCION POPULAR","electores_habiles":221946,"electores_participaron":30413,"participacion":[{"tipo":"electores_habiles","valor":221946},{"tipo":"electores_participaron","valor":30413}],"participacion_porcentual":0.13702882683175185,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/ACCION POPULAR.jpg"},{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"1","organizacion":"JUNTOS POR EL PERU","title":"JUNTOS POR EL PERU","electores_habiles":12408,"electores_participaron":1048,"participacion":[{"tipo":"electores_habiles","valor":12408},{"tipo":"electores_participaron","valor":1048}],"participacion_porcentual":0.08446163765312702,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/JUNTOS POR EL PERU.jpg"},{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"3","organizacion":"PARTIDO APRISTA PERUANO","title":"PARTIDO APRISTA PERUANO","electores_habiles":210540,"electores_participaron":14220,"participacion":[{"tipo":"electores_habiles","valor":210540},{"tipo":"electores_participaron","valor":14220}],"participacion_porcentual":0.06754060986035908,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/PARTIDO APRISTA PERUANO.jpg"},{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"1","organizacion":"EL FRENTE AMPLIO POR JUSTICIA, VIDA Y LIBERTAD","title":"EL FRENTE AMPLIO POR JUSTICIA, VIDA Y LIBERTAD","electores_habiles":10144,"electores_participaron":532,"participacion":[{"tipo":"electores_habiles","valor":10144},{"tipo":"electores_participaron","valor":532}],"participacion_porcentual":0.05244479495268139,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/EL FRENTE AMPLIO POR JUSTICIA, VIDA Y LIBERTAD.jpg"},{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"1","organizacion":"PARTIDO DEMOCRATICO SOMOS PERU","title":"PARTIDO DEMOCRATICO SOMOS PERU","electores_habiles":149776,"electores_participaron":2867,"participacion":[{"tipo":"electores_habiles","valor":149776},{"tipo":"electores_participaron","valor":2867}],"participacion_porcentual":0.019141918598440336,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/PARTIDO DEMOCRATICO SOMOS PERU.jpg"},{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"1","organizacion":"PARTIDO POPULAR CRISTIANO - PPC","title":"PARTIDO POPULAR CRISTIANO - PPC","electores_habiles":257084,"electores_participaron":2432,"participacion":[{"tipo":"electores_habiles","valor":257084},{"tipo":"electores_participaron","valor":2432}],"participacion_porcentual":0.009459943053632276,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/PARTIDO POPULAR CRISTIANO - PPC.jpg"},{"tipo_eleccion":"presidenciales","votos_por_procesar":"0","modalidad":"universal","listas":"1","organizacion":"PARTIDO NACIONALISTA PERUANO","title":"PARTIDO NACIONALISTA PERUANO","electores_habiles":224123,"electores_participaron":1415,"participacion":[{"tipo":"electores_habiles","valor":224123},{"tipo":"electores_participaron","valor":1415}],"participacion_porcentual":0.006313497499141097,"image":"https://raw.githubusercontent.com/IsmaelMasharo/elecciones-internas-peru-2020/main/imagenes-organizaciones-politicas-clean/PARTIDO NACIONALISTA PERUANO.jpg"}]36:Tcf7,{ // error when image displaying // https://talk.observablehq.com/t/vega-lite-external-image-problem/3529/7 const element = vl.markImage({width: 30, height: 30}) .data(dataByElectionType) .encode( vl.x({ axis: { ticks: false, offset: 10, tickCount: 3, domain: false, grid: false, title: 'Electores Hábiles', // ...titleConfig.x }, // scale: {zero: false} }).fieldQ('electores_habiles') // .scale({ domain: [0, 140000], nice: false }) , vl.y() .fieldQ('participacion_porcentual') .axis({ tickCount: 3, domain: false, ticks: false, labelAlign: 'left', labelBaseline: 'bottom', offset: 25, title: 'Participación (%)', format: '.0%', // ...titleConfig.y }) , vl.url().fieldN('image'), vl.tooltip([ 'title', {field: 'electores_habiles', title: 'Electores Hábiles'}, {field: 'electores_participaron', title: 'Participación'}, {field: 'participacion_porcentual', title: 'Participación (%)', format: '.1~%'}, ]), ) // TOP PARTICIPATION ANNOTATION const annotation = vl.markRule({ stroke: 'firebrick', strokeDash: [2, 2] }) .data([0]) .encode( vl.y().datum(0.2) ) const annotationText = vl.markText({ align: 'center', dy: -5, color: "firebrick" }) .data([0]) .encode( vl.y().datum(0.2), vl.text().datum("Top Participation") ) // REGRESSION const regression = element.markLine() .transform( vl .regression("participacion_porcentual") .on("electores_habiles") // .extent([0,280000]) ) .encode( vl.color().value("#777") ) // RECT const params = { color: 'green', max_value: 0.15, min_value: 0.05 } const band = vl.markRect({"color": params.color}) .data([0]) .encode( vl.y().datum(params.max_value), vl.y2().datum(params.min_value), vl.opacity().value(0.2), ) // VERTICAL LINE const meanElectoresHabiles = vl.markRule({ stroke: 'black', strokeDash: [2, 2] }) .data({values: [{"electores_habiles": 120000}]}) .encode( vl.x().fieldQ('electores_habiles') ) // HORIZONTAL LINE const meanParticipation = vl.markRule({ stroke: 'black', strokeDash: [2, 2] }) .data({values: [{"electores_participaron": 0.15}]}) .encode( vl.y().fieldQ('electores_participaron') ) // BAND TOP const bandTop = vl.markRect({"color": 'blue'}) .data([0]) // {values: [0]} .encode( vl.y().datum(0.15), vl.y2().datum(0.3), vl.x().datum(0), vl.x2().datum(120000), vl.opacity().value(0.2), ) // FINAL LAYER return vl.layer( regression, annotation, annotationText, band, meanElectoresHabiles, meanParticipation, bandTop, element ) .width(width-5) .autosize({ type: 'fit-x', contains: 'padding' }) .config({ // axis: { labelColor: '#929292', gridColor: '#ececec' }, padding: { top: 20, right: 30, bottom: 20, left: 20 }, view: {stroke: null}, background: '#fffcf2', }) .render(); }37:[] 2b:{"id":"bf5da4e0351c1d9a","slug":null,"title":"Tests","thumbnail":"4b09c409525b6e75626f5a25ae62e5cc1b3de3164dc81d7f30cba8a937fd5ba0","access_level":"public","create_time":"$D2020-10-14T23:10:48.971Z","update_time":"$D2021-01-02T21:21:21.077Z","view_time":null,"first_public_time":"$D2024-07-07T23:15:04.051Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"557d14c482e36ea6","login":"ismaelmasharo","name":"Ismael","avatar_url":"https://avatars-next.observableusercontent.com/b11e1d83947882ef94223b945a436c98b065f41b9189825c7a9cb8be8b098871","tier":"starter_2024"},"version":1056,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a395abf26b7b50b1","login":"ismaelmasharo","name":"Ismael","avatar_url":"https://avatars-next.observableusercontent.com/5e9ea0fcb9b927f69c5162983f12c9f373d3bf0794e2832ce20ee4c29a7aa6c9","tier":null}],"members":[{"type":"individual","id":"a395abf26b7b50b1","login":"ismaelmasharo","name":"Ismael","avatar_url":"https://avatars-next.observableusercontent.com/5e9ea0fcb9b927f69c5162983f12c9f373d3bf0794e2832ce20ee4c29a7aa6c9","tier":null,"role":"editor"},{"type":"team","id":"557d14c482e36ea6","login":"ismaelmasharo","name":"Ismael","avatar_url":"https://avatars-next.observableusercontent.com/b11e1d83947882ef94223b945a436c98b065f41b9189825c7a9cb8be8b098871","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tests","cells":[{"id":0,"value":"md`# Tests`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"md`### d3 within Template literals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`Watch out with the following, the cell bellow has to be manually executed in order to show the svg. This seems to be related with the way the selection (.group) is being accessed when it has not been created yet (observable runtinme).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`The following does work since the selection is getting defined when called inside the *d3.select()*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"selector = (values = []) => svg`\n ${d3.select(svg``).call( g => g.append(\"g\")\n .selectAll(\"circle\")\n .data(values)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => i * 10)\n .attr(\"r\", 2)\n .attr(\"fill\", \"blue\")\n .on(\"click\", (event, d) => d3.select(event.currentTarget).attr('fill', 'red') )\n ).node()}\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"md`And the following is the pure d3 way of creating the canvas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"{\n \n const chart = d3.create('svg')\n .attr(\"viewBox\", [0,0,500,20])\n \n const values = [1,2,3]\n const circles = chart.append(\"g\")\n .attr(\"transform\", \"translate(10, 10)\")\n .selectAll(\"circle\")\n .data(values)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => i * 10)\n .attr(\"r\", 2)\n .attr(\"fill\", \"blue\")\n .on(\"click\", (event, d) => d3.select(event.currentTarget).attr('fill', 'red') )\n // .on(\"click\", function(event, d) { d3.select(this).attr('fill', 'red') })\n \n return chart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`## Testing with mutable and svg tag class priority`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`Defining base input logic using the *style* tag class priority, since it overrides custom attributes defined programatically. The limitation is that not all svg attributes can be defined programmatically and some have to be hardcoded in the style tag.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`### Update chart using mutable\nBy using mutable we avoid calling an update method on the chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"radialSelector = {\n const chart = d3.create('svg')\n .attr(\"viewBox\", [0,0,500,60])\n \n // radio selector configuration\n const config = {\n domain, value: mutable item, onClick: (event, d) => mutable item = d.value\n }\n \n // appending radio selector\n chart.append(\"g\")\n .attr(\"transform\", \"translate(40, 10)\")\n .call(radioSelector, config)\n \n // appending dependent element\n chart.append(\"circle\")\n .attr(\"transform\", \"translate(90, 10)\")\n .attr(\"r\", selectedData.radius)\n .attr(\"fill\", \"red\")\n \n return chart.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"mutable item = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"selectedData = {\n // reference to the mutable letting the observers to fire changes in this cell and its dependencies\n item;\n\n return data.filter(d => d.value === mutable item)[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"domain = data.map(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`## No styles, only params`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"md`Defining the input logic fully programatically. No *style* tag is required. Only using **classed** and **each** selection methods to hack the elements association. Internal state used for keeping track of the current input selected.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`### Update chart by d3 general update pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"md`This encapsulates the update logic handling by an external state and using the general d3 enter, update, exit pattern. No cell refresh occurs since all the logic is defined independt of Observable viewof or mutable elements.\n\nIn this implementation an internal state is used to keep track of the selector's current state. During the onclick event the external state is being updated but it does not affect the selector's logic (could be commented but it serves well to explain the next trial implementation in the next section).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"data = [{value: 1, radius: 4}, {value: 2, radius: 6}, {value: 3, radius: 8}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"globalState = ({ value: data.filter((d, i) => i === 0)[0].value })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"filteredData = data.filter(d => d.value === globalState.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"md`## Input selector easier implementation: events defined at data bind level`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"md`### Input receiving a scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"years = d3.range(2010, 2020)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"{\n const chart = d3.create('svg')\n .attr(\"viewBox\", [0,0,width,60])\n \n const scale = d3.scalePoint()\n .domain(years)\n .range([width/4, width*3/4])\n \n // radio selector configuration\n const config = {\n orient: 'horizontal',\n scalePoint: scale,\n value: 2018\n }\n \n // appending radio selector\n chart.append(\"g\")\n .attr(\"transform\", \"translate(0, 30)\")\n .call(radioSelector4, config)\n\n return chart.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`## Note\nBoth **radioSelector** inputs are defined in an imperative manner. This is only to work within observable. Otherwise a more declarative state handling option should be used like React states. Furtheremore in the first two implementations the selector uses an internal state which is even pronner to error.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"md`### Text in path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"md`---\n#### Custom inputs for when not in observablehq\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"electionTypes = [\"presidenciales\", \"parlamento_andino\", \"congresales\", \"delegados_regional\", \"delegados_provincial\", \"delegados_distritales\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"radioInput = html`\n ${electionTypes.map(d => `\n \n ${d}\n `)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"a = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"d3.selectAll((\"input[name='stack']\")).on(\"change\", function() {\n console.log(this.value)\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"md`---\n### Vega tests\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"titleConfig = ({\n padding: { top: 20, right: 140, bottom: 20, left: 20 },\n x: {\n title: 'Electores Hábiles',\n titlePadding: 10,\n titleFontSize: 12,\n titleFontWeight: 'bold',\n titleX: width-175,\n titleY: 1,\n },\n y : {\n title: 'Participación (%)',\n titlePadding: 10,\n titleFontSize: 12,\n titleFontWeight: 'bold',\n titleX: -25,\n titleY: -20,\n titleAngle: 0,\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`## Apendix\n* [d3v@6 migration guide - events](https://observablehq.com/@d3/d3v6-migration-guide#events)\n* [d3 attr, style, classed(conditional styles)](https://benclinkinbeard.com/d3tips/attrclass-vs-classed/)\n* [conditional class](https://stackoverflow.com/questions/44224227/attr-vs-classed-in-d3-js)\n* [d3.each - example](http://bl.ocks.org/milroc/4254604)\n* [d3 each - hack for changing data attributes](https://stackoverflow.com/questions/45226063/d3-js-onclick-switching-other-line-color)\n* [d3 animation - inyecting d3 into template literals](https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3)\n* [d3 svg input (in observablehq)](https://observablehq.com/@darthmall/svg-input)\n* [Demo: Mutable Variables and Multi-input Cells](https://observablehq.com/@agness/demo-mutable-variables-and-multi-input-cells)\n* [Legend filtering chart data](https://observablehq.com/@uwdata/introduction-to-d3)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"md`## Appendix from Wage Gap post\n* [SVG Path: Drawing Arcs](https://www.youtube.com/watch?v=OsnWoinNAzQ)\n* [SVG Elliptical Arcs](https://observablehq.com/@jrus/svg-elliptical-arcs)\n* [SVG textPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath)\n* [SVG Tutorial - Text](http://xahlee.info/js/svg_text_element.html)\n* [d3 shape](https://github.com/d3/d3-shape)\n* [Radial Area Chart](https://observablehq.com/@d3/radial-area-chart?collection=@d3/d3-shape)\n* [Cheat Sheet for SVG Path Data](https://gist.github.com/spoike/a524526aab5bb42ee229)\n* [Fit text to circle](https://observablehq.com/@mbostock/fit-text-to-circle)\n* [js custom events](https://www.youtube.com/watch?v=b469-2H9Rew)\n* [Tagged Template Literals](https://www.youtube.com/watch?v=c9j0avG5L4c)\n* [Easy JSX With HTM](https://www.youtube.com/watch?v=Y5cGZqrSQTM)\n* [Vega Marks- Check air quality of cities](https://observablehq.com/@napsternxg/air-quality-index)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@v6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2c:"$2b:body"