2a:T500,viewof selectedDataset = selectBetween( select({ title: "Select the data you want to see (all pesticides, only one, only municipal measurements)", options: [ { label: "All pesticides", value: "max" }, { label: "Atrazine", value: "byPesticide.atrazine.max" }, { label: "Atrazine - only municipal measurements", value: "byPesticide.atrazine.internal" }, { label: "Atrazine - only federal measurements", value: "byPesticide.atrazine.external" }, { label: "Simazine", value: "byPesticide.simazine.max" }, { label: "Simazine - only municipal measurements", value: "byPesticide.simazine.internal" }, { label: "Simazine - only federal measurements", value: "byPesticide.simazine.external" } ], value: "byPesticide.atrazine.max" }), select({ title: "Select the data you want to see (detected, above or equal to European substance limit, above or equal to Brazilian substance limit)", options: [ { label: "Detected", value: "0" }, { label: "Above or equal to European substance limit", value: "01" }, { label: "Above or equal to Brazilian substance limit", value: "2" } ], value: "01" }) )2b:T7a7,concentrationVisualCategories = { return [ { detectionRanges: [">2ppb"], label: "> 2 ppb", hLabel: "> 2", style: { //fill: "#99000d" fill: "#b10026" } }, { detectionRanges: ["=2ppb"], label: "= 2 ppb", hLabel: "= 2", legalLimit: "Legal limit in Brazil (2 ppb)", style: { //fill: "#d73027" fill: "#fd8d3c" //stroke: colors[4], //"stroke-opacity": 1, //"stroke-width": 2 } }, { detectionRanges: ["1ppb { c.index = i; if (!("stroke" in c.style)) c.style.stroke = defaultMapStroke; if (!("stroke-width" in c.style)) c.style["stroke-width"] = 0.5; if (!("stroke-opacity" in c.style)) c.style["stroke-opacity"] = 0.9; if (!("fill-opacity" in c.style)) c.style["fill-opacity"] = 0.8; return c; }); }2c:T7d5,multitoxicityVisualCategories = { return [ { detectionRanges: ["=27"], label: "= 27", hLabel: "= 27", style: { //fill: "#99000d" fill: "#bd0026" } }, { detectionRanges: ["<=26"], label: "<= 26", hLabel: "<= 26", style: { //fill: "#d73027" fill: "#f03b20" //stroke: colors[4], //"stroke-opacity": 1, //"stroke-width": 2 } }, { detectionRanges: ["<=20"], label: "<= 20", hLabel: "<= 20", style: { //fill: "#f46d43" fill: "#fd8d3c" } }, { detectionRanges: ["<=15"], label: "<= 15", hLabel: "<= 15", style: { //fill: "#fdae61" fill: "#feb24c" } }, { detectionRanges: ["<=10"], label: "<= 10", hLabel: "<= 10", style: { //fill: "#fee08b", fill: "#fed976", "fill-opacity": 0.4 //"stroke-opacity": 0.4 } }, { detectionRanges: ["<=5"], label: "<= 5", hLabel: "<= 5", style: { //fill: "#fee08b", fill: "#ffffcc", "fill-opacity": 0.4 //"stroke-opacity": 0.4 } }, { detectionRanges: ["=0"], label: "= 0", hLabel: "= 0", style: { fill: "#1a9850", "fill-opacity": 0.4 //"stroke-opacity": 0.4 } }, { detectionRanges: [], label: "No data", hLabel: "No data", style: { //stroke: "none", //fill: "none" fill: "#EEE", "fill-opacity": 0.4, "stroke-opacity": 0.4 } } ].map((c, i) => { c.index = i; if (!("stroke" in c.style)) c.style.stroke = defaultMapStroke; if (!("stroke-width" in c.style)) c.style["stroke-width"] = 0.5; if (!("stroke-opacity" in c.style)) c.style["stroke-opacity"] = 0.9; if (!("fill-opacity" in c.style)) c.style["fill-opacity"] = 0.8; return c; }); }2d:T6ae,function createFooter({ width, height, svg }) { const donutsWidth = 2 * donutWidth + donutGap; const footer = svg.append("g").classed("footer", true); footer .append("rect") .attr("x", borderWidth) .attr("y", borderWidth) .attr("width", width - 2 * borderWidth) .attr("height", height - 2 * borderWidth) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", borderWidth); // add horizontal legend addHorizontalLegend({ width: width - donutsWidth - 2 * legendX - footerGap, //bubblesLegendWidth, g: footer }).attr("transform", `translate(${legendX},${legendY})`); if (mapElements.includes("proportionsGraph")) { if (proportionGraphType === "rows") { addCategoriesProportions({ width: width - bubblesLegendWidth, g: footer }).attr( "transform", `translate(${proportionsGraphX},${proportionsGraphY})` ); } else if (proportionGraphType === "donut") { addDonuts({ width: donutsWidth, g: footer }).attr( "transform", `translate(${width - legendX - donutsWidth},${donutY})` ); } else { throw `Unknown proportionGraphType value: ${proportionGraphType}`; } } /* if (mapElements.includes("bubblesLegend") && mapType === "bubbles") { const maxBubbleRadius = circleRadius( bubblesLegendData.reduce((a, p) => { if (p.population) a = p.population; return a; }, 0) ); addBubblesLegend({ width, height, maxBubbleRadius, g: footer }).attr( "transform", `translate(${width - maxBubbleRadius - 20},${height - 40})` ); } */ return footer; }2e:T929,function addHorizontalLegend({ width, g }) { const rectWidth = width / visualCategories.length; const arrowTop = legendRectHeight + legendPadding; const elementWidth = rectWidth; const descriptionHeight = legendTitleFontSize + legendDescriptionFontSize + 4 * legendPadding; const legend = g.append("g").classed("horizontal-legend", true); legend .append("text") .attr("x", 0) .attr("y", legendTitleFontSize) .attr("text-anchor", "start") .attr("font-size", legendTitleFontSize) .text(legendTitle); legend .append("text") .attr("x", 0) .attr( "y", legendTitleFontSize + 2 * legendPadding + legendDescriptionFontSize ) .attr("text-anchor", "start") .attr("font-size", legendDescriptionFontSize) .text(legendDescription); const elements = legend .append("g") .classed("bar", true) .attr("transform", `translate(0,${descriptionHeight})`); const el = elements .selectAll("g") .data(visualCategories) .enter() .append("g") .classed("element", true) .attr( "transform", (d, i) => `translate(${(visualCategories.length - 1 - i) * elementWidth},0)` ); el.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", rectWidth) .attr("height", legendRectHeight) .attr("fill", d => d.style.fill) .attr("fill-opacity", d => d.style["fill-opacity"]) .attr("stroke", d => d.style.stroke); el.append("text") .attr("x", rectWidth / 2) .attr("y", legendRectHeight + legendPadding + legendLabelsFontSize) .attr("text-anchor", "middle") .attr("font-size", legendLabelsFontSize) .text(d => d.hLabel); if (mapElements.includes("legalLimits")) { const elWithLimit = el.filter(e => e.legalLimit); elWithLimit .append("line") .attr("x1", rectWidth) .attr("y1", arrowTop + arrowHeight) .attr("x2", rectWidth) .attr("y2", arrowTop) .attr("marker-end", "url(#arrow)") .attr("stroke", arrowStroke); elWithLimit .append("text") .attr("x", rectWidth + arrowTextShift) .attr("y", arrowTop + arrowHeight + legendLimitsFontSize) .attr("text-anchor", "end") .attr("font-size", legendLimitsFontSize) .attr("fill", arrowTextFill) .text(d => d.legalLimit); } return legend; }2f:T5c9,function addBubblesLegend({ width, height, maxBubbleRadius, g }) { const legend = g.append("g").classed("circles-legend", true); const el = legend .selectAll("g") .data(bubblesLegendData) .enter() .append("g") .classed("legendElement", true) .attr("transform", p => `translate(0,${-circleRadius(p.population)})`); el.append("circle") .attr("r", p => circleRadius(p.population)) .attr("fill", "none") .attr("stroke", bubblesLegendStroke); el.append("line") .attr("x1", 0) .attr("y1", p => -circleRadius(p.population)) .attr("x2", -bubblesLegendLineSize) .attr("y2", p => -circleRadius(p.population)) .attr("stroke", bubblesLegendStroke) .attr("stroke-dasharray", "4"); el.append("text") .attr("x", -bubblesLegendLineSize) .attr("y", p => -circleRadius(p.population)) .attr("dy", ".3em") // See http://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/ .attr("text-anchor", "end") .attr("fill", bubblesLegendStroke) .attr("font-size", bubblesLegendFontSize) .text(p => p.text); const explaination = legend .append("text") .attr("x", maxBubbleRadius) .attr("y", bubblesLegendFontSize) .attr("dy", ".3em") // See http://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/ .attr("text-anchor", "end") .attr("fill", bubblesLegendStroke) .attr("font-size", bubblesLegendFontSize) .text(bubblesLegendDescription); return legend; }30:T749,function addCategoriesProportions({ width, height, g }) { const graphWidth = (width - proportionsGraphGap) / 2; const container = g.append("g").classed("categories-proportions", true); const title = container .append("text") .attr("x", 0) .attr( "y", proportionsGraphDescriptionFontSize + proportionsGraphTextPadding ) .attr("text-anchor", "start") .attr("font-size", proportionsGraphDescriptionFontSize) .text(proportionsGraphDescription); addProportionsGraph({ g: container, width: graphWidth, padding: 6, fontSize: 12, text: proportionsGraphDescriptionMunicipios, values: visualCategories.map(c => { return { style: c.style, value: municipios.features .filter( f => zoomOn === "brazil" || zoomOn === f.properties.stateLettersCode ) .filter(f => datasets[selectedDataset].getData(f).index === c.index) .length }; }) }).attr( "transform", `translate(${0}, ${proportionsGraphDescriptionFontSize + 3 * proportionsGraphTextPadding})` ); addProportionsGraph({ g: container, width: graphWidth, padding: 6, fontSize: 12, text: proportionsGraphDescriptionPopulation, values: visualCategories.map(c => { return { style: c.style, value: municipios.features .filter( f => zoomOn === "brazil" || zoomOn === f.properties.stateLettersCode ) .filter(f => datasets[selectedDataset].getData(f).index === c.index) .reduce((a, c) => { a += c.properties.population; return a; }, 0) }; }) }).attr( "transform", `translate(${width - graphWidth}, ${proportionsGraphDescriptionFontSize + 3 * proportionsGraphTextPadding})` ); return container; }31:Tcba,function addProportionsGraph({ g, values, width, padding, fontSize, text }) { // Prepare data const height = proportionsGraphRowHeight * proportionsGraphRows; const totalValue = values.reduce((a, c) => a + c.value, 0); const valuePerRow = totalValue / proportionsGraphRows; const geomFactor = width / valuePerRow; const rows = new Array(proportionsGraphRows).fill([]); const categories = values.reduce((a, c) => { let start = 0; if (a.length > 0) { start = a[a.length - 1].end; } a.push({ style: c.style, value: c.value, start: start, end: start + c.value }); return a; }, []); const categoriesStartingInRow = rows.map((row, i) => { const rowStart = i * valuePerRow; const rowEnd = (i + 1) * valuePerRow; return categories.filter(c => c.start >= rowStart && c.start <= rowEnd); }); const categoriesEndingInRow = rows.map((row, i) => { const rowStart = i * valuePerRow; const rowEnd = (i + 1) * valuePerRow; return categories.filter(c => c.end >= rowStart && c.end <= rowEnd); }); const categoriesFillingAllTheRow = rows.map((row, i) => { const rowStart = i * valuePerRow; const rowEnd = (i + 1) * valuePerRow; return categories.filter(c => c.start < rowStart && c.end > rowEnd); }); const categoriesByRow = rows.map((row, i) => { const rowStart = i * valuePerRow; const rowEnd = (i + 1) * valuePerRow; function getStart(c) { if (c.start < rowStart) return 0; else return c.start - rowStart; } function getLength(c) { if (c.end > rowEnd) return rowEnd - (getStart(c) + rowStart); else return c.end - (getStart(c) + rowStart); } function addGeometry(c) { return { style: c.style, x: getStart(c) * geomFactor, y: (proportionsGraphRows - i - 1) * proportionsGraphRowHeight, width: getLength(c) * geomFactor, height: proportionsGraphRowHeight }; } return { categories: categoriesStartingInRow[i] .concat(categoriesEndingInRow[i], categoriesFillingAllTheRow[i]) .map(addGeometry) }; }); // Build graph const graph = g.append("g").classed("proportions-graph", true); const rowsContainer = graph.append("g").classed("rows", true); const rowContainer = rowsContainer .selectAll("g") .data(categoriesByRow) .enter() .append("g") .classed("row", true); const rowRects = rowContainer .selectAll("rect") .data(d => d.categories) .enter() .append("rect") .classed("row-rect", true) .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .attr("fill", d => d.style.fill) .attr("fill-opacity", d => d.style["fill-opacity"]); const border = graph .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "none") .attr("stroke", proportionsGraphBorderStroke); const textElement = graph .append("text") .attr("x", width / 2) .attr("y", height + padding + fontSize / 2) .attr("dy", "0.3em") .attr("text-anchor", "middle") .attr("font-size", fontSize) .text(text); return graph; }32:T6c2,function addDonuts({ width, height, g }) { const graphWidth = (width - donutGap) / 2; const container = g.append("g").classed("donuts", true); const title = container .append("text") .attr("x", 0) .attr("y", 0) //donutDescriptionFontSize + donutTextPadding) .attr("text-anchor", "start") .attr("font-size", donutDescriptionFontSize) .text(donutDescription); addDonut({ g: container, width: graphWidth, padding: 6, fontSize: 12, icon: donutIconMunicipios, text: donutDescriptionMunicipios, values: visualCategories.map(c => { return { style: c.style, value: municipios.features .filter( f => zoomOn === "brazil" || zoomOn === f.properties.stateLettersCode ) .filter(f => datasets[selectedDataset].getData(f).index === c.index) .length }; }) }).attr( "transform", `translate(${0}, ${donutDescriptionFontSize + 3 * donutTextPadding})` ); addDonut({ g: container, width: graphWidth, padding: 6, fontSize: 12, icon: donutIconPeople, text: donutDescriptionPopulation, values: visualCategories.map(c => { return { style: c.style, value: municipios.features .filter( f => zoomOn === "brazil" || zoomOn === f.properties.stateLettersCode ) .filter(f => datasets[selectedDataset].getData(f).index === c.index) .reduce((a, c) => { a += c.properties.population; return a; }, 0) }; }) }).attr( "transform", `translate(${width - graphWidth}, ${donutDescriptionFontSize + 3 * donutTextPadding})` ); return container; }33:T7bb,function addDonut({ g, values, width, padding, fontSize, icon, text }) { // Prepare data const height = donutHeight; const totalValue = values.reduce((a, c) => a + c.value, 0); const proportions = values.slice(); const angleLength = (1 - (donutStartAngle - donutEndAngle) / 360) * 2 * Math.PI; proportions.reduce(function(startAngle, item) { var percentage = item.value / totalValue; item.startAngle = startAngle; item.endAngle = startAngle - percentage * angleLength; return item.endAngle; }, (donutEndAngle / 360) * 2 * Math.PI); // Build graph const donut = g.append("g").classed("donut", true); const group = donut .append("g") .classed("group", true) .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // Join data onto DOM var joinedElements = group.selectAll("path").data(proportions); // Create new elements on DOM var newElements = joinedElements.enter().append("path"); // Update new and existing elements newElements .merge(joinedElements) .attr("d", function(d) { return d3.arc()({ innerRadius: donutInnerRadius, outerRadius: donutOuterRadius, startAngle: d.startAngle, endAngle: d.endAngle }); }) .style("stroke", donutStroke) .style("stroke-width", donutStrokeWidth) .attr("fill", d => d.style.fill) .attr("fill-opacity", d => d.style["fill-opacity"]); // Remove old elements joinedElements.exit().remove(); const iconElement = group .append("text") .attr("x", 0) .attr("y", (donutOuterRadius - donutIconFontSize) / 2) .attr("text-anchor", "middle") .attr("font-size", donutIconFontSize) .classed("icon", true) .text(icon); const textElement = group .append("text") .attr("x", 0) .attr("y", donutOuterRadius + fontSize / 2) //.attr("dy", "0.3em") .attr("text-anchor", "middle") .attr("font-size", fontSize) .text(text); return donut; }34:T6da,function createMap({ svg, width, height }) { const projection = createProjection({ width, height }); const path = d3.geoPath().projection(projection); const map = svg .append("g") .classed("map", true) .attr("width", width) .attr("height", height); addSeaBackground({ width, height, map }); // TODO: better geometric precision addCountries({ width, height, map, path }); addCountriesLabels({ width, height, map, projection, svg }); if (mapElements.includes("shade") && zoomOn === "brazil") { addShadeAndBackground({ width, height, map, path }); } addStates({ width, height, path, map }); // TODO: apply the same algorithm used for countries (currently, they are labels with NaN position) addStatesLabels({ width, height, map, projection, svg }); if (mapElements.includes("shade") && zoomOn !== "brazil") { addShadeAndBackground({ width, height, map, path, projection, svg }); } if (mapType === "choropleth") { addMunicipiosLimitsAndColors({ width, height, path, map }); } if (mapType === "bubbles") { addMunicipiosBubbles({ width, height, path, map }); } if (mapElements.includes("bubblesLegend") && mapType === "bubbles") { const maxBubbleRadius = circleRadius( bubblesLegendData.reduce((a, p) => { if (p.population) a = p.population; return a; }, 0) ); addBubblesLegend({ width, height, maxBubbleRadius, g: map }).attr( "transform", `translate(${width - maxBubbleRadius - 20},${height - 40})` ); } if (mapElements.includes("northArrow")) { addNorthArrow({ width, height, map }); } return map; }35:T466,function addMunicipiosBubbles({ width, height, path, map }) { return map .append("g") .selectAll("circle") .data( municipios.features .filter( f => zoomOn === "brazil" || zoomOn === f.properties.stateLettersCode ) .sort((a, b) => { if ( datasets[selectedDataset].getData(a).index === datasets[selectedDataset].getData(b).index ) return a.properties.population < b.properties.population; else return ( datasets[selectedDataset].getData(a).index < datasets[selectedDataset].getData(b).index ); }) ) .enter() .append("circle") .attr("transform", function(d) { return `translate(${path.centroid(d)})`; }) .attr("r", f => { return circleRadius(f.properties.population); }) .attr("fill", getStyle("fill")) .attr("fill-opacity", getStyle("fill-opacity")) .attr("stroke", getStyle("stroke")) .attr("stroke-opacity", getStyle("stroke-opacity")) .attr("stroke-width", getStyle("stroke-width")); }36:T7f5,function placeLabelInPolygon({ labelText, shortLabelText, polygon, g, svg }) { function isBboxInsidePolygon(bbox, polygon) { // TODO: ensure that all the text is inside the polygon // (the four corners could be inside, whereas the polygon // intersects with one of the borders of the bbox) return ( d3.polygonContains(polygon, [bbox.x, bbox.y]) && d3.polygonContains(polygon, [bbox.x + bbox.width, bbox.y]) && d3.polygonContains(polygon, [bbox.x, bbox.y + bbox.height]) && d3.polygonContains(polygon, [bbox.x + bbox.width, bbox.y + bbox.height]) ); } function add(name, x, y, color) { return g .append("text") .attr("x", x) .attr("y", y) .attr("dy", ".3em") // See http://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/ .attr("text-anchor", "middle") .attr("style", "text-transform: uppercase;") .attr("font-size", labelFontSize) .attr("fill", d => { if (color) return color; else return labelColor; }) .text(name); } // find the center using https://github.com/mapbox/polylabel/ if (polygon.coordinates[0].length > 0) { const center = polylabel(polygon.coordinates, 1.0); if (d3.polygonContains(polygon.coordinates[0], center)) { // if the center is inside the map, try to add the label: // 1. the long label let label = add(labelText, center[0], center[1]); document.body.appendChild(svg.node()); let bbox = label.node().getBBox(); svg.remove(); // 2. if it does not enter, the short label if (!isBboxInsidePolygon(bbox, polygon.coordinates[0])) { label.remove(); label = add(shortLabelText, center[0], center[1]); document.body.appendChild(svg.node()); bbox = label.node().getBBox(); svg.remove(); // 3. if it does not enter either, do not show any label if (!isBboxInsidePolygon(bbox, polygon.coordinates[0])) { label.remove(); } } } } }37:T781,concentrationDatasets = { return { max: { getData: f => f.properties.concentrationCategories.max, title: "Atrazine and simazine in drinking water in Brazilian municipalities", filename: "pesticides_map" }, "byPesticide.atrazine.max": { getData: f => f.properties.concentrationCategories.byPesticide.atrazine.max, title: "Atrazine in drinking water in Brazilian municipalities", filename: "pesticides_map_atrazine" }, "byPesticide.atrazine.internal": { getData: f => f.properties.concentrationCategories.byPesticide.atrazine.internal, title: "Atrazine in drinking water in Brazilian municipalities (municipal measurements)", filename: "pesticides_map_atrazine_municipal" }, "byPesticide.atrazine.external": { getData: f => f.properties.concentrationCategories.byPesticide.atrazine.external, title: "Atrazine in drinking water in Brazilian municipalities (federal measurements)", filename: "pesticides_map_atrazine_federal" }, "byPesticide.simazine.max": { getData: f => f.properties.concentrationCategories.byPesticide.simazine.max, title: "Simazine in drinking water in Brazilian municipalities", filename: "pesticides_map_simazine" }, "byPesticide.simazine.internal": { getData: f => f.properties.concentrationCategories.byPesticide.simazine.internal, title: "Simazine in drinking water in Brazilian municipalities (municipal measurements)", filename: "pesticides_map_simazine_municipal" }, "byPesticide.simazine.external": { getData: f => f.properties.concentrationCategories.byPesticide.simazine.external, title: "Simazine in drinking water in Brazilian municipalities (federal measurements)", filename: "pesticides_map_simazine_federal" } }; }38:T46b,function addConcentrationCategories(municipios) { municipios.features.forEach(feature => { feature.properties.concentrationCategories = { byPesticide: pesticides.reduce((a, pesticide) => { a[pesticide] = { internal: getConcentrationVisualCategory( feature.properties.measurements[pesticide].internal ), external: getConcentrationVisualCategory( feature.properties.measurements[pesticide].external ) }; // Get the maximum detection between the two measurements modes a[pesticide].max = Object.values(a[pesticide]).sort( (a, b) => a.index > b.index )[0]; return a; }, {}) }; // Get the maximum detection between all the pesticides feature.properties.concentrationCategories.max = Object.values( feature.properties.concentrationCategories.byPesticide ).sort((a, b) => a.max.index > b.max.index)[0].max; // TODO: get the maximum detection between all the pesticide, but // only for internal measurements, or only for external ones }); return municipios; }39:[] 29:{"title":"Study on pesticides in Brazil","cells":[{"id":0,"value":"md`# Study on pesticides in Brazil\n\nFor PublicEye, see https://www.publiceye.ch/en/publications/detail/highly-hazardous-profits.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"chart = {\n const svg = createChart({\n width: chartWidth,\n height: chartHeight\n });\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1917,"value":"DOM.download(await rasterize(chart), getFilename(\".png\"), \"Download as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1928,"value":"DOM.download(await serialize(chart), getFilename(\".svg\"), \"Download as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"tweak = md`## Tweak your map\n\nUse the following controls to modify the map:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2977,"value":"viewof zoomOn = select({\n title: \"Show all Brazil, or only a specific state\",\n options: Object.values(zoomGeometriesLU),\n value: \"brazil\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3681,"value":"viewof dataToShow = radio({\n title: \"Select the data you want to show\",\n description: \"Please select the type of data you want to show\",\n options: [\n { label: \"Number of pesticides\", value: \"multitoxicity\" },\n { label: \"Concentration of atrazine/simazine\", value: \"concentration\" }\n ],\n value: \"multitoxicity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3692,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2973,"value":"viewof mapType = radio({\n title: \"Select the type of map you want\",\n description: \"Please select the type of the map\",\n options: [\n { label: \"Bubbles\", value: \"bubbles\" },\n { label: \"Choropleth\", value: \"choropleth\" }\n ],\n value: \"bubbles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2856,"value":"viewof mapElements = checkbox({\n title: \"Select the elements to include on the map\",\n description: \"Please select the elements to show on the map\",\n options: [\n { value: \"title\", label: \"Title\" },\n { value: \"horizontalLegend\", label: \"Legend\" },\n { value: \"legalLimits\", label: \"Legal limits\" },\n { value: \"bubblesLegend\", label: \"Bubbles legend\" },\n { value: \"proportionsGraph\", label: \"Proportions graph\" },\n { value: \"northArrow\", label: \"North arrow\" },\n { value: \"shade\", label: \"Shade\" },\n { value: \"border\", label: \"Map border\" }\n ],\n value: [\n \"title\",\n \"horizontalLegend\",\n \"legalLimits\",\n \"proportionsGraph\",\n \"bubblesLegend\",\n \"northArrow\",\n \"shade\",\n \"border\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3879,"value":"viewof proportionGraphType = radio({\n title: \"Select the type of proportions graph you want\",\n description: \"Please select the type of the proportions graph\",\n options: [\n { label: \"Rows\", value: \"rows\" },\n { label: \"Donut\", value: \"donut\" }\n ],\n value: \"donut\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2881,"value":"md`---\n\n## Advanced parameters\n\nYou may modify these parameters if you want to configure very precisely the map elements.\n\n### Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3405,"value":"md`Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3400,"value":"titleColor = \"#000\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3402,"value":"subtitleColor = \"#666\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3409,"value":"md`Legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3412,"value":"arrowTextFill = \"#555\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3415,"value":"arrowStroke = arrowTextFill","pinned":false,"hidden":false,"mode":"ojs"},{"id":3838,"value":"md`Proportions graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3840,"value":"proportionsGraphBorderStroke = \"#555\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3892,"value":"md`Donut`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3894,"value":"donutStroke = \"#555\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3473,"value":"md`Bubbles legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3476,"value":"bubblesLegendStroke = \"#333\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3407,"value":"md`Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3571,"value":"defaultMapStroke = \"#555\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2353,"value":"seaColor = \"#e3eef9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3497,"value":"countriesFill = \"#DDD\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3499,"value":"countriesStroke = \"#BBB\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2884,"value":"statesFill = {\n return \"#F8F8F8\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2890,"value":"statesStroke = \"#BBB\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3527,"value":"labelColor = \"#BBB\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3519,"value":"northArrowFill = \"#333\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2893,"value":"md`### Sizes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3262,"value":"chartHeight = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":3264,"value":"chartWidth = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":2896,"value":"borderWidth = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2899,"value":"fitMargin = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":3364,"value":"md`Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3305,"value":"headerPadding = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":3021,"value":"headerHeight = titleFontSize + 3 * headerPadding","pinned":false,"hidden":false,"mode":"ojs"},{"id":3366,"value":"md`Footer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3024,"value":"footerHeight = {\n if (\n mapElements.includes(\"proportionsGraph\") &&\n proportionGraphType === \"rows\"\n ) {\n return 300;\n } else {\n return 200;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3092,"value":"bubblesLegendWidth = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":3998,"value":"footerGap = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":3358,"value":"md`Legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3433,"value":"legendX = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":3436,"value":"legendY = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":3351,"value":"legendPadding = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":3376,"value":"legendRectHeight = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3368,"value":"arrowMarkerSize = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":3383,"value":"arrowHeight = 35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3384,"value":"arrowTextShift = 45","pinned":false,"hidden":false,"mode":"ojs"},{"id":3808,"value":"md`Proportions graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3810,"value":"proportionsGraphX = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":3812,"value":"proportionsGraphY = 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":3814,"value":"proportionsGraphTextPadding = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":3816,"value":"proportionsGraphGap = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3818,"value":"proportionsGraphRows = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":3820,"value":"proportionsGraphRowHeight = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":3853,"value":"md`Donut graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3857,"value":"donutX = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":3859,"value":"donutY =\n 20 + legendTitleFontSize + 2 * legendPadding + legendDescriptionFontSize","pinned":false,"hidden":false,"mode":"ojs"},{"id":3861,"value":"donutTextPadding = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":3855,"value":"donutGap = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3924,"value":"donutHeight = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":3990,"value":"donutWidth = 2 * donutOuterRadius + 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3885,"value":"donutInnerRadius = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":3887,"value":"donutOuterRadius = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3903,"value":"donutStartAngle = 180 + 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":3907,"value":"donutEndAngle = 180 - 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":3890,"value":"donutStrokeWidth = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":3482,"value":"md`Bubbles legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3479,"value":"bubblesLegendLineSize = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":3504,"value":"md`Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3506,"value":"countriesStrokeWidth = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":3508,"value":"statesStrokeWidth = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":3510,"value":"municipiosStrokeWidth = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":3514,"value":"circlesSizeFactor = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":3285,"value":"md`### Font sizes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3362,"value":"md`Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3287,"value":"titleFontSize = 18","pinned":false,"hidden":false,"mode":"ojs"},{"id":3308,"value":"subtitleFontSize = 18","pinned":false,"hidden":false,"mode":"ojs"},{"id":3360,"value":"md`Legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3464,"value":"legendTitleFontSize = 18","pinned":false,"hidden":false,"mode":"ojs"},{"id":3335,"value":"legendDescriptionFontSize = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":3337,"value":"legendLabelsFontSize = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":3339,"value":"legendLimitsFontSize = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":3822,"value":"md`Proportions graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3824,"value":"proportionsGraphDescriptionFontSize = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":3866,"value":"md`Donut`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3864,"value":"donutDescriptionFontSize = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":3965,"value":"donutIconFontSize = 24","pinned":false,"hidden":false,"mode":"ojs"},{"id":3940,"value":"forkAwesome = html`\n\nFork Awesome font from https://forkawesome.github.io/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3395,"value":"md`Bubbles legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3392,"value":"bubblesLegendFontSize = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":3530,"value":"md`Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3533,"value":"labelFontSize = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":2912,"value":"md`### Texts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3427,"value":"md`Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3425,"value":"subtitlePrefix = \" · State of \"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3430,"value":"md`Legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1524,"value":"legendTitle = \"Legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3764,"value":"legendDescription = selectBetween(\n concentrationLegendDescription,\n multitoxicityLegendDescription\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3129,"value":"concentrationLegendDescription =\n \"Maximum pesticide concentration (in parts per billion – ppb)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3676,"value":"multitoxicityLegendDescription = \"Number of detected pesticides\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3761,"value":"visualCategories = selectBetween(\n concentrationVisualCategories,\n multitoxicityVisualCategories\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3674,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3826,"value":"md`Proportions graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3828,"value":"proportionsGraphDescription = `Proportion of each category in terms of:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3830,"value":"proportionsGraphDescriptionMunicipios = \"number of municipalities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3832,"value":"proportionsGraphDescriptionPopulation = \"exposed population\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3868,"value":"md`Donut`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3870,"value":"donutDescription = \"Proportion of each category in terms of:\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3872,"value":"donutDescriptionMunicipios = \"number of municipalities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3874,"value":"donutDescriptionPopulation = \"exposed population\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3957,"value":"donutIconMunicipios = \"\\uf19c\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3960,"value":"donutIconPeople = \"\\uf0c0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3440,"value":"md`Bubbles legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3438,"value":"bubblesLegendData = [\n { population: 1e5, text: \"100,000\" },\n { population: 1e6, text: \"1,000,000\" },\n { population: 1e7, text: \"10,000,000\" }\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3487,"value":"bubblesLegendDescription = \"Circle size = number of inhabitants\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3547,"value":"md`### Data sources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4059,"value":"import {\n baseUrl,\n municipiosURL,\n estadosURL,\n countriesURL,\n populationURL,\n multitoxicity_0_URL,\n multitoxicity_01_URL,\n multitoxicity_2_URL\n} from '@severo/study-on-pesticides-in-brazil/2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`---\n\n## ⚙️ Internal code\n\nAll of the following is internal code necessary to render the map. There is no need to touch it. Please use the parameters above if you need to tweak the map.\n\n---\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3598,"value":"md`### Some inspiration for colors\n\nSee https://beta.observablehq.com/@mbostock/d3-color-schemes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3595,"value":"paletteYlOrRd = swatchesN(\"YlOrRd\", 6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`### Some statistics on data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"pesticides.reduce((a, c) => {\n a[c] = {\n internal: getNumberOfMunicipios(c, \"internal\"),\n external: getNumberOfMunicipios(c, \"external\")\n };\n return a;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"md`### Graphical functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3016,"value":"function createChart({ width, height, isBubbles, isChoropleth }) {\n const svg = createSVG(width, height);\n let mapHeight = height,\n mapY = 0;\n\n // Title\n if (mapElements.includes(\"title\")) {\n // update map dimensions\n mapY += headerHeight;\n mapHeight -= headerHeight;\n // add title\n const header = createHeader({\n width,\n height: headerHeight,\n y: 0,\n svg\n });\n }\n\n // Footer\n if (mapElements.includes(\"horizontalLegend\")) {\n // update map dimensions\n mapHeight -= footerHeight;\n // add footer\n const footer = createFooter({\n width,\n height: footerHeight,\n svg\n }).attr(\"transform\", `translate(0,${mapY + mapHeight})`);\n }\n\n // Map\n createMap({\n svg,\n width,\n height: mapHeight,\n isBubbles,\n isChoropleth\n }).attr(\"transform\", `translate(0,${mapY})`);\n\n // Border\n if (mapElements.includes(\"border\")) {\n addBorder({ height: height, width: width, svg });\n }\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"function createSVG(width, height) {\n const svg = d3.select(DOM.svg(width, height));\n const defs = svg.append(\"defs\");\n\n // Filter for the shade\n const filter1 = defs.append(\"filter\").attr(\"id\", \"filter1\");\n filter1.append(\"feDropShadow\").attr(\"stdDeviation\", \"3\");\n\n // Marker for the arrow in legend\n defs\n .append(\"marker\")\n .attr(\"id\", \"arrow\")\n .attr(\"viewBox\", \"0 -5 10 10\")\n .attr(\"refX\", 10)\n .attr(\"refY\", 0)\n .attr(\"markerWidth\", arrowMarkerSize)\n .attr(\"markerHeight\", arrowMarkerSize)\n .attr(\"orient\", \"auto\")\n .attr(\"stroke\", arrowStroke)\n .attr(\"fill\", \"none\")\n .append(\"path\")\n .attr(\"d\", \"M0,-5L10,0L0,5\")\n .attr(\"class\", \"arrowHead\");\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3248,"value":"function addBorder({ height, width, svg }) {\n const border = svg\n .append(\"rect\")\n .attr(\"x\", borderWidth)\n .attr(\"y\", borderWidth)\n .attr(\"width\", width - 2 * borderWidth)\n .attr(\"height\", height - 2 * borderWidth)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", borderWidth);\n\n return border;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3227,"value":"md `#### Header`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3228,"value":"function createHeader({ width, height, svg }) {\n const header = svg.append(\"g\").classed(\"header\", true);\n\n header\n .append(\"rect\")\n .attr(\"x\", borderWidth)\n .attr(\"y\", borderWidth)\n .attr(\"width\", width - 2 * borderWidth)\n .attr(\"height\", height - 2 * borderWidth)\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", borderWidth);\n\n const title = header\n .append(\"text\")\n .attr(\"x\", headerPadding)\n .attr(\"y\", headerPadding + titleFontSize)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", titleFontSize)\n .attr(\"fill\", titleColor)\n .text(datasets[selectedDataset].title);\n\n /*if (zoomOn !== \"brazil\") {\n title\n .append(\"tspan\")\n .attr(\"font-size\", subtitleFontSize)\n .attr(\"fill\", subtitleColor)\n .text(subtitlePrefix + zoomGeometriesLU[zoomOn].label);\n }*/\n\n return header;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3235,"value":"md`#### Footer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3233,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":3222,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":3255,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":3834,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3836,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3851,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3877,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3242,"value":"md`#### Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3239,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2640,"value":"function createProjection({ width, height }) {\n return d3\n .geoMercator()\n .fitExtent(\n [[fitMargin, fitMargin], [width - fitMargin, height - fitMargin]],\n zoomGeometriesLU[zoomOn].geometry\n )\n .clipExtent([[0, 0], [width, height]]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2395,"value":"function addSeaBackground({ width, height, map }) {\n return map\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", seaColor)\n .attr(\"stroke\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2401,"value":"function addCountries({ width, height, map, path }) {\n map\n .append(\"g\")\n .selectAll(\"path\")\n .data(onlySelectedCountries.features)\n .enter()\n .append(\"path\")\n .attr(\"fill\", countriesFill)\n .attr(\"stroke\", countriesStroke)\n .attr(\"stroke-width\", countriesStrokeWidth)\n .attr(\"d\", path);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1895,"value":"function addCountriesLabels({ width, height, map, projection, svg }) {\n const countriesLabels = map.append(\"g\").classed(\"countries-labels\", true);\n\n // TODO: add French Guyana\n selectedCountries.forEach(c => {\n if (!(c.name in onlySelectedCountriesLU)) {\n throw \"Could not find a feature in `countries` with '\" +\n c.name +\n \"' name.\";\n }\n const f = onlySelectedCountriesLU[c.name];\n\n placeLabelInPolygon({\n labelText: c.label,\n shortLabelText: c.shortLabel,\n polygon: projectAndClipFeature({ f, projection, width, height }),\n g: countriesLabels,\n svg\n });\n });\n\n return countriesLabels;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2410,"value":"function addShadeAndBackground({ width, height, map, path, projection, svg }) {\n const shape = map\n .append(\"path\")\n .attr(\"fill\", statesFill)\n .attr(\"stroke\", statesStroke)\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path(zoomGeometriesLU[zoomOn].geometry))\n .attr(\"filter\", \"url(#filter1)\");\n\n if (zoomOn !== \"brazil\") {\n placeLabelInPolygon({\n labelText: zoomGeometriesLU[zoomOn].label,\n shortLabelText: zoomGeometriesLU[zoomOn].value,\n polygon: projectAndClipFeature({\n f: zoomGeometriesLU[zoomOn],\n projection,\n width,\n height\n }),\n g: map,\n svg\n });\n }\n\n return shape;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"function addStates({ width, height, path, map }) {\n return map\n .append(\"g\")\n .selectAll(\"path\")\n .data(estados.features)\n .enter()\n .append(\"path\")\n .attr(\"id\", e => e.properties.sigla)\n .attr(\"fill\", statesFill)\n .attr(\"stroke\", statesStroke)\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2091,"value":"function addStatesLabels({ width, height, map, projection, svg }) {\n const statesLabels = map.append(\"g\").classed(\"states-labels\", true);\n\n estados.features.forEach(f => {\n placeLabelInPolygon({\n labelText: f.properties.nome,\n shortLabelText: f.properties.sigla,\n polygon: projectAndClipFeature({ f, projection, width, height }),\n g: statesLabels,\n svg\n });\n });\n\n return statesLabels;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2425,"value":"function addMunicipiosLimitsAndColors({ width, height, path, map }) {\n return map\n .append(\"g\")\n .selectAll(\"path\")\n .data(\n municipios.features.filter(\n f => zoomOn === \"brazil\" || zoomOn === f.properties.stateLettersCode\n )\n )\n .enter()\n .append(\"path\")\n .attr(\"fill\", getStyle(\"fill\"))\n .attr(\"fill-opacity\", getStyle(\"fill-opacity\"))\n .attr(\"stroke\", getStyle(\"stroke\"))\n .attr(\"stroke-opacity\", getStyle(\"stroke-opacity\"))\n .attr(\"stroke-width\", getStyle(\"stroke-width\"))\n .attr(\"d\", path);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2906,"value":"function circleRadius(population) {\n return Math.sqrt(population) * (circlesSizeFactor / 1000);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2433,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1744,"value":"function addNorthArrow({ width, height, map }) {\n // Original: https://commons.wikimedia.org/wiki/File:Nordpfeil_1_schwarz_0_Grad_Landscape.svg\n return map\n .append(\"polygon\")\n .attr(\"fill\", northArrowFill)\n .attr(\n \"points\",\n \"163.09,30.365 163.09,64.401 151.965,51.654 151.965,22.018 157.365,22.018 150.001,5 142.636,22.018 148.037,22.018 148.037,47.156 133.378,30.365 132.41,30.365 132.41,75.262 137.012,75.262 137.012,41.409 148.037,54.038 148.037,95 151.965,95 151.965,58.536 166.568,75.262 167.59,75.262 167.59,30.365 \"\n )\n .attr(\"transform\", `translate(${width - 120},30), scale(0.5)`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2826,"value":"md`#### Label placement functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2850,"value":"md`TODO:\n\n- [ ] take into account the front elements, to avoid placing labels behind the legends for example\n- [ ] add the Atlantic Ocean label\n- [ ] add the French Guyana label\n- [ ] add a label above the selected state?\n- [ ] some labels do show on Firefox but not on Chromium\n- [ ] the bubbles show very differently in Firefox and in Chromium\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2828,"value":"function projectAndClipFeature({ f, projection, width, height }) {\n const multiPolygon = f.geometry;\n // convert the geometry (multipolygon) to only the largest polygon\n const polygon = getPolygonFromMultiPolygon(multiPolygon);\n // project and clip the polygon to the map extent\n return clipProjectedPolygon({\n width,\n height,\n polygon: projectPolygon(polygon, projection)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2831,"value":"function getPolygonFromMultiPolygon(multiPolygon) {\n // first let's check that the geometry is a multipolygon (that's true for all \"countries\")\n if (multiPolygon.type !== \"MultiPolygon\")\n throw \"Error: we expected a MultiPolygon geometry, and got a \" +\n multiPolygon.type +\n \" geometry.\";\n // and that it contains at least one polygon\n if (multiPolygon.coordinates.length === 0)\n throw \"Error: we expected at least one polygon inside the MultiPolygon geometry and got zero.\";\n // we find the polygon with largest number of points (more robust than computing the area)\n const polygon = {\n type: \"Polygon\",\n coordinates: multiPolygon.coordinates.sort(\n (a, b) => a[0].length < b[0].length\n )[0]\n };\n return polygon;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2834,"value":"function projectPolygon(polygon, projection) {\n return {\n type: \"Polygon\",\n coordinates: polygon.coordinates.map(a => a.map(b => projection(b)))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2837,"value":"function clipProjectedPolygon({ width, height, polygon }) {\n // we simply replace the coordinates out of extent by the max or min value\n const points = polygon.coordinates[0].map(c => {\n let x = c[0],\n y = c[1];\n if (x < 0) x = 0;\n else if (x > width) x = width;\n if (y < 0) y = 0;\n else if (y > height) y = height;\n return [x, y];\n });\n\n return {\n type: \"Polygon\",\n coordinates: [points]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2840,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3321,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"md`### Measurement categories`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3721,"value":"function selectBetween(concentration, multitoxicity) {\n if (dataToShow === \"concentration\") {\n return concentration;\n } else if (dataToShow === \"multitoxicity\") {\n return multitoxicity;\n } else {\n throw `Error: the dataset (${dataToShow}) is unknown `;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3689,"value":"datasets = selectBetween(concentrationDatasets, multitoxicityDatasets)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3686,"value":"multitoxicityDatasets = {\n return {\n \"0\": {\n getData: f => f.properties.multitoxicityCategories[\"0\"],\n title:\n \"Number of pesticides detected in drinking water in Brazilian municipalities\",\n filename: \"multitoxicity_0\"\n },\n \"01\": {\n getData: f => f.properties.multitoxicityCategories[\"01\"],\n title:\n \"Number of pesticides detected in drinking water in Brazilian municipalities above EU limit\",\n filename: \"multitoxicity_01\"\n },\n \"2\": {\n getData: f => f.properties.multitoxicityCategories[\"2\"],\n title:\n \"Number of pesticides detected in drinking water in Brazilian municipalities above Brazilian limit\",\n filename: \"multitoxicity_2\"\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"function getStyle(attr) {\n return feature => datasets[selectedDataset].getData(feature).style[attr];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"function getFilename(extension) {\n return `${datasets[selectedDataset].filename}_${zoomOn}${extension}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"function getConcentrationHighestDetectionRange(measurements) {\n const detections = concentrationRanges.filter(\n range =>\n measurements.detections[range] && measurements.detections[range] !== \"0\"\n );\n if (detections.length > 0) return detections.slice(0, 1);\n else return [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3744,"value":"function getMultitoxicityRange(measurements) {\n const num = +measurements.numPesticides;\n if (num === 0) return [\"=0\"];\n else if (num <= 5) return [\"<=5\"];\n else if (num <= 10) return [\"<=10\"];\n else if (num <= 15) return [\"<=15\"];\n else if (num <= 20) return [\"<=20\"];\n else if (num <= 26) return [\"<=26\"];\n else if (num === 27) return [\"=27\"];\n else return [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"function getConcentrationVisualCategory(data) {\n if (!data.measured) return concentrationNoMeasurementCategory;\n else {\n const highestRange = getConcentrationHighestDetectionRange(\n data.measurements\n );\n if (highestRange.length === 0) return concentrationNoDetectionCategory;\n else {\n const matchedCategories = concentrationVisualCategories.filter(\n c => c.detectionRanges.filter(d => d === highestRange[0]).length > 0\n );\n if (matchedCategories.length > 1)\n throw \"There should be only one matching category\";\n else if (matchedCategories.length === 0)\n throw \"There should be at least one matching category\";\n else return matchedCategories[0];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3751,"value":"function getMultitoxicityVisualCategory(data) {\n if (!data.measured) return multitoxicityNoMeasurementCategory;\n else {\n const highestRange = getMultitoxicityRange(data.measurements);\n if (highestRange.length === 0) return multitoxicityNoMeasurementCategory;\n else {\n const matchedCategories = multitoxicityVisualCategories.filter(\n c => c.detectionRanges.filter(d => d === highestRange[0]).length > 0\n );\n if (matchedCategories.length > 1)\n throw \"There should be only one matching category\";\n else if (matchedCategories.length === 0)\n throw \"There should be at least one matching category\";\n else return matchedCategories[0];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"concentrationNoDetectionCategory = concentrationVisualCategories.filter(\n c => c.detectionRanges[0] === \"=0ppb\"\n)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"concentrationNoMeasurementCategory = concentrationVisualCategories.filter(\n c => c.detectionRanges.length === 0\n)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"concentrationRanges = [\n \">2ppb\",\n \"=2ppb\",\n \"1ppb c.detectionRanges[0] === \"=0\"\n)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3710,"value":"multitoxicityNoMeasurementCategory = multitoxicityVisualCategories.filter(\n c => c.detectionRanges.length === 0\n)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3706,"value":"multitoxicityRanges = [\"=27\", \"<=26\", \"<=20\", \"<=15\", \"<=10\", \"<=5\", \"=0\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`### Spatial and demographic data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2324,"value":"function getNumberOfMunicipios(pesticide, mode) {\n return municipios.features.reduce(\n (a, f, i) => {\n if (f.properties.measurements[pesticide][mode].measured) {\n a.num++;\n if (!(\"first\" in a)) a.first = i;\n }\n return a;\n },\n { num: 0 }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2321,"value":"zoomGeometriesLU = estados.features\n .sort((a, b) => a.properties.nome > b.properties.nome)\n .reduce(\n (a, c) => {\n a[c.properties.sigla] = {\n label: `State - ${c.properties.nome}`,\n value: c.properties.sigla,\n geometry: c.geometry\n };\n return a;\n },\n { brazil: { label: \"Brazil\", value: \"brazil\", geometry: brazil } }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2916,"value":"selectedCountries = [\n {\n name: \"Bolivia\",\n label: \"Bolivia\",\n shortLabel: \"BO\"\n },\n {\n name: \"Paraguay\",\n label: \"Paraguay\",\n shortLabel: \"PY\"\n },\n {\n name: \"Chile\",\n label: \"Chile\",\n shortLabel: \"CL\"\n },\n {\n name: \"Colombia\",\n label: \"Colombia\",\n shortLabel: \"CO\"\n },\n {\n name: \"Peru\",\n label: \"Peru\",\n shortLabel: \"PE\"\n },\n {\n name: \"Argentina\",\n label: \"Argentina\",\n shortLabel: \"AR\"\n },\n {\n name: \"Uruguay\",\n label: \"Uruguay\",\n shortLabel: \"UY\"\n },\n {\n name: \"Venezuela\",\n label: \"Venezuela\",\n shortLabel: \"VZ\"\n },\n {\n name: \"Ecuador\",\n label: \"Ecuador\",\n shortLabel: \"EC\"\n },\n {\n name: \"Guyana\",\n label: \"Guyana\",\n shortLabel: \"GY\"\n },\n {\n name: \"France\",\n label: \"French Guyana\",\n shortLabel: \"GF\"\n },\n {\n name: \"Suriname\",\n label: \"Suriname\",\n shortLabel: \"SU\"\n }\n]\n// add(\"Atlantic Ocean\", 88, 53, \"#b5d4e9\");\n// TODO: select French Guyana, from the France geometry","pinned":false,"hidden":false,"mode":"ojs"},{"id":2605,"value":"onlySelectedCountriesLU = _.keyBy(\n onlySelectedCountries.features,\n c => c.properties.NAME\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"onlySelectedCountries = {\n return {\n type: \"FeatureCollection\",\n features: countries.features.filter(f =>\n selectedCountries.some(c => c.name === f.properties.NAME)\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"countries = d3\n .json(countriesURL)\n .then(countries => topojson.feature(countries, countries.objects.countries))\n .then(countries => {\n // only keep latin american countries\n /*countries.features = countries.features.filter(\n f =>\n f.properties[\"REGION_WB\"] === \"Latin America & Caribbean\" ||\n f.properties[\"SOV_A3\"] === \"FRA\"\n );*/\n return countries;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3562,"value":"estadosRaw = d3.json(estadosURL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"estados = topojson.feature(estadosRaw, estadosRaw.objects.estados)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2199,"value":"brazil = topojson.merge(estadosRaw, estadosRaw.objects.estados.geometries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"municipios = getRawMunicipiosData()\n .then(topojsonToGeojson)\n .then(addPopulation)\n .then(sortMunicipiosByName)\n .then(addMeasurements)\n .then(addConcentrationCategories)\n .then(addMultitoxicity)\n .then(addMultitoxicityCategories)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"municipiosWithPopulation = d3.csv(populationURL).then(municipios =>\n municipios\n .map(municipio => {\n return {\n stateLettersCode: municipio[\"UF\"],\n stateCode: municipio[\"COD. UF\"],\n municipalCode: municipio[\"COD. MUNIC\"],\n geoCode: municipio[\"COD. UF\"] + municipio[\"COD. MUNIC\"] + \"\",\n name: municipio[\"NOME DO MUNICÍPIO\"],\n normalizedName: normalizeName(municipio[\"NOME DO MUNICÍPIO\"]),\n population: +municipio[\"POPULAÇÃO ESTIMADA\"]\n };\n })\n .sort((a, b) => a.name > b.name)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"municipiosWithPopulationLU = _.keyBy(municipiosWithPopulation, \"geoCode\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"md`#### Process municipios`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"function getRawMunicipiosData() {\n return d3.json(municipiosURL);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"function topojsonToGeojson(municipios) {\n return topojson.feature(municipios, municipios.objects.municipios);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"function addPopulation(municipios) {\n municipios.features.forEach(f => {\n f.properties = {\n name: f.properties.nome,\n normalizedName: normalizeName(f.properties.nome),\n geoCode: f.properties.geocodigo,\n stateLettersCode:\n municipiosWithPopulationLU[f.properties.geocodigo].stateLettersCode,\n stateCode: municipiosWithPopulationLU[f.properties.geocodigo].stateCode,\n municipalCode:\n municipiosWithPopulationLU[f.properties.geocodigo].municipalCode,\n geoCode: municipiosWithPopulationLU[f.properties.geocodigo].geoCode,\n normalizedName:\n municipiosWithPopulationLU[f.properties.geocodigo].normalizedName,\n population: municipiosWithPopulationLU[f.properties.geocodigo].population\n };\n });\n return municipios;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"function sortMunicipiosByName(municipios) {\n municipios.features = municipios.features.sort(\n (a, b) => a.properties.normalizedName > b.properties.normalizedName\n );\n return municipios;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"function addMeasurements(municipios) {\n municipios.features.forEach(feature => {\n feature.properties.measurements = measurementsByPesticide.reduce(\n (a, measurements) => {\n a[measurements.pesticide] = {\n internal: getFeatureMeasurements(measurements.internal, feature),\n external: getFeatureMeasurements(measurements.external, feature)\n };\n return a;\n },\n {}\n );\n });\n return municipios;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"function getFeatureMeasurements(data, feature) {\n const measurementsForMunicipio = data.filter(\n measurement =>\n measurement.municipio.normalizedName ===\n feature.properties.normalizedName &&\n measurement.municipio.stateLettersCode ===\n feature.properties.stateLettersCode\n // && measurement.municipio.population === feature.properties.population\n // 👆 I remove this because there are no homonyms inside a same state,\n // but there is one municipio in measurementsData which\n // population field is erroneously equal to 0 -> mismatch\n );\n if (measurementsForMunicipio.length > 1)\n throw \"Should not appear, there should be exact match, or no match\";\n const measured = measurementsForMunicipio.length === 1;\n const result = {\n measured: measured\n };\n if (measured) result.measurements = measurementsForMunicipio[0].measurements;\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3643,"value":"function addMultitoxicity(municipios) {\n municipios.features.forEach(feature => {\n feature.properties.multitoxicity = {\n \"2\": getFeatureMultitoxicity(multitoxicity_2_processed, feature),\n \"01\": getFeatureMultitoxicity(multitoxicity_01_processed, feature),\n \"0\": getFeatureMultitoxicity(multitoxicity_0_processed, feature)\n };\n });\n return municipios;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3646,"value":"function getFeatureMultitoxicity(data, feature) {\n const multitoxicityForMunicipio = data.filter(\n measurement =>\n measurement.municipio.normalizedName ===\n feature.properties.normalizedName &&\n measurement.municipio.stateLettersCode ===\n feature.properties.stateLettersCode\n // && measurement.municipio.population === feature.properties.population\n // 👆 I remove this because there are no homonyms inside a same state,\n // but there is one municipio in measurementsData which\n // population field is erroneously equal to 0 -> mismatch\n );\n if (multitoxicityForMunicipio.length > 1)\n throw \"Should not appear, there should be exact match, or no match\";\n const measured = multitoxicityForMunicipio.length === 1;\n const result = {\n measured: measured\n };\n if (measured) result.measurements = multitoxicityForMunicipio[0].measurements;\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3704,"value":"function addMultitoxicityCategories(municipios) {\n municipios.features.forEach(feature => {\n feature.properties.multitoxicityCategories = {};\n feature.properties.multitoxicityCategories[\n \"0\"\n ] = getMultitoxicityVisualCategory(feature.properties.multitoxicity[\"0\"]);\n feature.properties.multitoxicityCategories[\n \"01\"\n ] = getMultitoxicityVisualCategory(feature.properties.multitoxicity[\"01\"]);\n feature.properties.multitoxicityCategories[\n \"2\"\n ] = getMultitoxicityVisualCategory(feature.properties.multitoxicity[\"2\"]);\n });\n return municipios;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"md`### Measurements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"pesticides = [\"atrazine\", \"simazine\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"md`#### Get raw data from files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"rawInternalData = Promise.all(pesticides.map(p => getData(p, \"control\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"rawExternalData = Promise.all(pesticides.map(p => getData(p, \"vigilancia\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"getData = (pesticide, mode) =>\n d3.csv(\n baseUrl +\n \"D010/\" +\n (p => {\n return { atrazine: \"atrazina\", simazine: \"simazina\" }[p];\n })(pesticide) +\n \"_\" +\n mode +\n \".csv\"\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"md`#### Process raw data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"measurementsByPesticide = pesticides.map((p, i) => {\n return {\n pesticide: p,\n internal: sortMeasurementsByMunicipalName(\n rawInternalData[i].map(processRawData)\n ),\n external: sortMeasurementsByMunicipalName(\n rawExternalData[i].map(processRawData)\n )\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"function getMunicipioNormalizedName(m) {\n if (\"Município\" in m) return m[\"Município\"];\n else if (\"NOME_MUNICIPIO\" in m) return m[\"NOME_MUNICIPIO\"];\n else {\n console.log(m);\n throw \"The name of the municipio has not been found\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"function sortMeasurementsByMunicipalName(measurements) {\n return measurements.sort(\n (a, b) => a.municipio.normalizedName > b.municipio.normalizedName\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"function processRawData(municipio) {\n return {\n municipio: {\n normalizedName: getMunicipioNormalizedName(municipio),\n population: +municipio[\"Population\"],\n stateLettersCode: municipio[\"UF\"]\n },\n measurements: {\n detections: concentrationRanges.reduce((a, c) => {\n a[c] = municipio[c];\n return a;\n }, {}),\n numMeasurements: municipio[\"all Measurements\"],\n numDetections: municipio[\"all Detections\"]\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3629,"value":"md`### Multi-toxicity data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3631,"value":"multitoxicity_0 = d3.csv(multitoxicity_0_URL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3639,"value":"multitoxicity_01 = d3.csv(multitoxicity_01_URL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3641,"value":"multitoxicity_2 = d3.csv(multitoxicity_2_URL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3671,"value":"multitoxicity_0_processed = multitoxicity_0.map(processRawMultitoxicityData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3668,"value":"multitoxicity_01_processed = multitoxicity_01.map(processRawMultitoxicityData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3662,"value":"multitoxicity_2_processed = multitoxicity_2.map(processRawMultitoxicityData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3649,"value":"function processRawMultitoxicityData(municipio) {\n function getNumber(m) {\n if (\"How many different pesticides detected (>0ppb)?\" in m)\n return m[\"How many different pesticides detected (>0ppb)?\"];\n else if (\"How many different pesticides over or equal to the limit?\" in m)\n return m[\"How many different pesticides over or equal to the limit?\"];\n else\n throw \"Could not find the number of detected pesticides for the municipality\";\n }\n return {\n municipio: {\n normalizedName: getMunicipioNormalizedName(municipio),\n population: +municipio[\"Population\"],\n stateLettersCode: municipio[\"UF\"]\n },\n measurements: {\n numPesticides: getNumber(municipio)\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`## Libraries and code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1914,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1973,"value":"import {ramp, swatches, copy} from \"@mbostock/d3-color-schemes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2305,"value":"import {select, checkbox, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"function swatchesN(name, n) {\n // Slight adaptation from https://beta.observablehq.com/@mbostock/d3-color-schemes\n const colors = d3[`scheme${name}`][n];\n //const n = colors.length;\n const canvas = svg`