31:T1bc0,chart = { const div = d3.create("div").attr("id", "bubbleChart"); const svg = div .append("svg") .attr("width", chartWidth) .attr("height", chartHeight); // AXES const myXAxis = svg .append("g") .attr("class", "x-axis") .attr( "transform", `translate(${margin.left},${margin.top + boundedHeight})` ) .call(xAxis); myXAxis.select(".domain").remove(); // GROUP FOR MAIN VISUALIZATION const g = svg .append("g") .attr( "transform", `translate(${margin.left}, ${margin.top + boundedHeight / 2})` ); // Zero-Line g.append("line") .attr("x1", scaleX(0)) .attr("x2", scaleX(0)) .attr("y1", scaleY(-1)) .attr("y2", scaleY(1)) .attr("stroke", "#000000") .attr("stroke-width", 0.3); // Container for summary stats const gStats = g.append("g").attr("class", "stats"); // Div for the tooltip let tooltip = div.append("div").attr("class", "tooltip"); // ALL ACTION IS WRAPPED IN THIS FUNCTION function updateChart(data) { // Change bubbbles on click let click = function (event, d) { if (!checkSelectedCoicop(d.COICOP)) { addSelectedCoicop(d.COICOP); } else { removeSelectedCoicop(d.COICOP); } }; // Change tooltip on mouseover let mouseover = function (event, d) { tooltip.style("opacity", 1); tooltip.style("left", d.x + 20 + "px"); tooltip.style("top", d.y + margin.top + boundedHeight / 2 - 25 + "px"); d3.select(this).style("stroke", "black"); }; let mousemove = function (event, d) { tooltip.html("" + d.description + "
" + d.tooltip); }; let mouseleave = function (event, d) { tooltip.style("opacity", 0); if (!checkSelectedCoicop(d.COICOP)) { d3.select(this).style("stroke", "lightgrey"); } }; // Simulate bubbles' positions const simulation = d3 .forceSimulation(data) .force( "x", d3 .forceX() .strength(10) .x((d) => scaleX(d.inflation)) ) .stop() .tick(100) .force( "y", d3 .forceY() .strength(0.2) .y((d) => scaleY(0)) ) .force( "charge", d3 .forceCollide() .radius((d) => circleScale(d.weight) + 1) .strength(1) ) .restart() .stop() .tick(300); // Enter, Update and Exit bubble nodes const node = g .selectAll("circle") .data(simulation.nodes()) .join( (enter) => enter .append("circle") .attr("id", (d) => d.COICOP) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave) .on("click", click) .style("stroke", (d) => !checkSelectedCoicop(d.COICOP) ? "lightgrey" : "black" ) .style("stroke-width", (d) => !checkSelectedCoicop(d.COICOP) ? 1 : 2 ) .style("fill", "white") .style("opacity", 0.7), (update) => update, (exit) => exit .transition() .duration(transitionTime) .style("opacity", 0) .remove() ) .transition() .duration(transitionTime) .attr("r", (d) => (isNaN(d.inflation) ? 0 : circleScale(d.weight))) .style("fill", (d) => d.color) .attr("transform", (d) => `translate(${d.x},${d.y})`); } // ADDITIONAL FUNCTION FOR SUMMARY STATISTICS function updateStats(stats) { // Labels gStats .selectAll("text") .data(stats) .join( (enter) => enter .append("text") .attr("x", (d) => scaleX(d.inflation)) .attr("y", (d) => scaleY(-1) - 8 - d.position * 14) .text((d) => d.label + ": " + d3.format(".1%")(d.inflation)) .style("opacity", 0) .transition() .duration(transitionTime) .style("opacity", (d) => d.visibility), (update) => update .transition() .duration(transitionTime) .attr("x", (d) => scaleX(d.inflation)) .text((d) => d.label + ": " + d3.format(".1%")(d.inflation)) .style("opacity", (d) => d.visibility), (exit) => exit.transition().duration(750).style("opacity", 0).remove() ); // Lines gStats .selectAll("line") .data(stats) .join( (enter) => enter .append("line") .attr("x1", (d) => scaleX(d.inflation)) .attr("y1", scaleY(-1)) .attr("x2", (d) => scaleX(d.inflation)) .attr("y2", scaleY(1)) .style("opacity", 0) .transition() .duration(transitionTime) .style("opacity", (d) => d.visibility), (update) => update .transition() .duration(transitionTime) .attr("x1", (d) => scaleX(d.inflation)) .attr("x2", (d) => scaleX(d.inflation)) .style("opacity", (d) => d.visibility), (exit) => exit ); } // COLOR LEGEND const dLegend = div.append("div").attr("class", "legend"); function updateLegend(mode) { if (mode == "by category") { const legendItem = dLegend .selectAll("div") .data(colorCategories) .join("div"); legendItem .append("span") .attr("class", "patch") .style("background-color", (d) => d.color); legendItem .append("span") .attr("class", "text") .html((d) => d.name); } else { dLegend.selectAll("div").remove(); /*let legend = d3.select( Legend(colorScale, { tickFormat: "%", width: 200 }) ); dLegend.append(() => legend.node());*/ } } // SOURCE const gFooter = svg .append("g") .attr( "transform", `translate(${margin.left}, ${margin.top + boundedHeight + 40})` ) .attr("class", "footer"); const aDownload = gFooter .append("text") .attr("x", boundedWidth) .attr("text-anchor", "end") .text("Annual inflation (YoY). ") .append("a"); aDownload.attr("download", "data.csv").text("Download data"); function updateDownload(data) { aDownload .attr( "href", URL.createObjectURL( new Blob( [ d3.csvFormat( data.map((d) => ({ COICOP: d.COICOP, description: d.description, weight: d3.format(".4f")(d.weight / 1000), inflation: d3.format(".4f")(d.inflation), color: d.color ? d3.color(d.color).formatHex() : "#BBBBBB" })) ) ], { type: "text/csv" } ) ) ) .style("color", "#00FF00"); } return Object.assign(div.node(), { updateChart, updateStats, updateLegend, updateDownload }); }32:T5ab,{ const div = d3.create("div"); div .append("span") .style("display", "inline-block") .style("width", "125px") .style("font-family", "sans-serif") .style("font-size", "13px") .text("Date "); div .append("button") .text("<<") .on("click", (event, datum) => { movePeriod(-1); }); div.append("span").style("display", "inline-block").style("width", "10px"); const selectTime = div .append("select") .attr("id", "timeSelectBox") .on("change", () => { mutable currentPeriod = d3.select("#timeSelectBox").property("value"); }) .selectAll("option") .data(periodRange) .join("option") .attr("value", (d) => d) .property("selected", (d) => { let selected = d == currentPeriod ? true : false; return selected; }) .text((d) => d); div.append("span").style("display", "inline-block").style("width", "10px"); div .append("button") .text(">>") .on("click", (event, datum) => { movePeriod(1); }); div.append("span").style("display", "inline-block").style("width", "30px"); div .append("button") .text("Play") .on("click", (event, datum) => { mutable play = "on"; }); div.append("span").style("display", "inline-block").style("width", "10px"); div .append("button") .text("Stop") .on("click", (event, datum) => { mutable play = "off"; }); return div.node(); }33:T545,{ const div = d3.create("div"); const datalist = div.append("datalist").attr("id", "searchItemsDatalist"); datalist .selectAll("option") .data(searchCategories) .join("option") .attr("value", (d) => d); const div_form = div.append("div").style("display", "inline-block"); const input = div_form .append("input") .attr("id", "searchItems") .attr("type", "text") .attr("placeholder", "Search items in the basket") .style("width", "400px") .attr("list", "searchItemsDatalist") .on("input", () => { d3.select("#addItemButton").attr("disabled", () => searchCategories.includes(d3.select("#searchItems").property("value")) ? null : true ); }); const div_result = div_form.append("span").text(" "); const div_button = div_form .append("input") .attr("id", "addItemButton") .attr("type", "button") .attr("value", "Add") .attr("disabled", true) .on("click", () => { let thisCoicop = currentData.filter( (d) => d.description == d3.select("#searchItems").property("value") )[0].COICOP; selectedCoicop[thisCoicop] = true; mutable selectedCoicopChange++; d3.select("#searchItems").property("value", ""); d3.select("#addItemButton").attr("disabled", true); }); return div.node(); }34:T9a5,historicalChart = { const div = d3.create("div").attr("id", "historicChart"); const dPlot = div.append("div").attr("class", "plot"); let colors = currentData.filter((d) => selectedCoicop[d.COICOP]); let colorDomain = colors.map((d) => d.COICOP); let colorRange = colors.map((d) => d.color); let plot = d3.select( Plot.plot({ width: chartWidth, height: (chartWidth - 400) * 0.6, marginRight: 300, y: { grid: true, tickFormat: "%", label: "", tickSize: 0, ticks: 5 }, x: { tickSize: 0 }, color: { type: "categorical", domain: colorDomain, range: colorRange }, marks: [ Plot.ruleY([0], { stroke: "#666666" }), Plot.dot(historicalData, { x: "date", y: "inflation", r: 3, fill: "COICOP", title: (d) => d3.timeFormat("%B %Y")(d.date) + "\n Inflation: " + d3.format(".1%")(d.inflation) }), Plot.line(historicalData, { x: "date", y: "inflation", stroke: "COICOP", strokeWidth: 2 }), Plot.text( historicalData, Plot.select( { x: "max" }, { x: "date", y: "inflation", z: "COICOP", text: (d) => coicop.filter((e) => e.Code == d.COICOP)[0].Description, textAnchor: "start", dx: 8, fontSize: 12 } ) ) ], tooltip: { stroke: "black" } }) ); dPlot.append(() => plot.node()); div .append("div") .attr("class", "source") .append("p") .attr("class", "source") .text("Annual inflation (YoY). ") .append("a") .attr( "href", URL.createObjectURL( new Blob( [ d3.csvFormat( historicalData.map((d) => ({ COICOP: d.COICOP, description: d.description, date: d3.timeFormat("%Y-%m")(d.date), inflation: d3.format(".4f")(d.inflation) })) ) ], { type: "text/csv" } ) ) ) .attr("download", "data.csv") .text("Download data"); //return Object.assign(div.node(), { createChart }); return div.node(); }35:T915,countriesChart = { const div = d3.create("div").attr("id", "countriesChart"); div .append("p") .attr("class", "chartTitle") .text("Selected items across countries"); div .append("div") .attr("class", "subTitle") .text( d3.timeFormat("%B")(d3.timeParse("%m")(currentPeriod.substr(5, 2))) + " " + currentPeriod.substr(0, 4) ); const dPlot = div.append("div").attr("class", "plot"); let colors = currentData.filter((d) => selectedCoicop[d.COICOP]); let colorDomain = colors.map((d) => d.COICOP); let colorRange = colors.map((d) => d.color); let plot = d3.select( Plot.plot({ width: chartWidth, height: (chartWidth - 400) * 0.6, x: { axis: null, domain: Array.from(new Set(countriesData.map((d) => d.COICOP))) }, y: { grid: true, tickFormat: "+%", label: "", tickSize: 0, ticks: 5 }, color: { domain: colorDomain, range: colorRange }, fx: { domain: Array.from(new Set(countriesData.map((d) => d.code))), label: null, tickSize: 0 }, facet: { data: countriesData, x: "code" }, marks: [ Plot.barY(countriesData, { x: "COICOP", y: "inflation", fill: "COICOP", title: (d) => d.description + "\n Inflation: " + d3.format(".1%")(d.inflation) }), Plot.ruleY([0]) ], tooltip: { "stroke-width": "1px", stroke: "black" } }) ); dPlot.append(() => plot.node()); div .append("div") .attr("class", "wideSource") .append("p") .attr("class", "source") .text("Annual inflation (YoY). ") .append("a") .attr( "href", URL.createObjectURL( new Blob( [ d3.csvFormat( countriesData.map((d) => ({ code: d.code, country: d.country, COICOP: d.COICOP, description: d.description, inflation: d3.format(".4f")(d.inflation) })) ) ], { type: "text/csv" } ) ) ) .attr("download", "data.csv") .text("Download data"); return div.node(); }36:T5ab,{ const div = d3.create("div"); div .append("span") .style("display", "inline-block") .style("width", "125px") .style("font-family", "sans-serif") .style("font-size", "13px") .text("Date "); div .append("button") .text("<<") .on("click", (event, datum) => { movePeriod(-1); }); div.append("span").style("display", "inline-block").style("width", "10px"); const selectTime = div .append("select") .attr("id", "timeSelectBox") .on("change", () => { mutable currentPeriod = d3.select("#timeSelectBox").property("value"); }) .selectAll("option") .data(periodRange) .join("option") .attr("value", (d) => d) .property("selected", (d) => { let selected = d == currentPeriod ? true : false; return selected; }) .text((d) => d); div.append("span").style("display", "inline-block").style("width", "10px"); div .append("button") .text(">>") .on("click", (event, datum) => { movePeriod(1); }); div.append("span").style("display", "inline-block").style("width", "30px"); div .append("button") .text("Play") .on("click", (event, datum) => { mutable play = "on"; }); div.append("span").style("display", "inline-block").style("width", "10px"); div .append("button") .text("Stop") .on("click", (event, datum) => { mutable play = "off"; }); return div.node(); }37:T65d,// Combines fetched data (Coicop, Weights, Inflation) into the variable that is loaded for the simulation ("currentData") currentData = inflation .filter((d) => currentCoicop.some( (e) => d["freq,unit,coicop,geo\\TIME_PERIOD"].split(",").slice(2, 3)[0] == e ) ) .map((d) => { let thisCOICOP = d["freq,unit,coicop,geo\\TIME_PERIOD"] .split(",") .slice(2, 3)[0]; let thisWeight = groupedWeights.get(currentCountry).get(thisCOICOP)[0][ currentPeriod.substr(0, 4) + " " ]; let thisDescription = groupedCoicop.get(thisCOICOP)[0].Description; let thisCategory = categories.filter((d) => d.COICOP == thisCOICOP)[0] .category; let thisInflation = d[currentPeriod] / 100; let thisColor = colorMode == "by value" ? colorScale(thisInflation) : colorCategoryScale(thisCategory); let thisContribution = (thisInflation * thisWeight) / 1000; let thisContributionWeight = Math.abs(thisInflation * thisWeight * 10); let thisTooltip = sizingMode == "by weight" ? "Inflation: " + d3.format(".1%")(thisInflation) : "Contribution " + d3.format(".1f")(thisContribution * 100) + "pp"; //let thisSelected = selectedCoicop.includes(thisCOICOP) ? true : false; return { COICOP: thisCOICOP, description: thisDescription, weight: sizingMode == "by weight" ? thisWeight : thisContributionWeight, category: thisCategory, inflation: thisInflation, contribution: thisContribution, color: thisColor, tooltip: thisTooltip //selected: thisSelected }; })38:Tb34,Expand to edit styles 39:[{"id":"326925de9b77313ad387434a6d24cffec4f73d1f63f1f8aca67aaf8b6f4cda5171ebf946b31fad23d80aa11a84f93953e9f737312286d4e2381c67f6ba9ab166","href":"https://static.observableusercontent.com/files/326925de9b77313ad387434a6d24cffec4f73d1f63f1f8aca67aaf8b6f4cda5171ebf946b31fad23d80aa11a84f93953e9f737312286d4e2381c67f6ba9ab166","name":"countries.csv","type":"text/csv","lastModified":1664450078120.747,"size":412},{"id":"9d40371f96cf109e065840a0a6bd6baa9095325354715f82eb9c0cf624ac36127b28116d5d8b940676ea6b669c265a4b3efd52e8d402d991e93466bbd82f83b2","href":"https://static.observableusercontent.com/files/9d40371f96cf109e065840a0a6bd6baa9095325354715f82eb9c0cf624ac36127b28116d5d8b940676ea6b669c265a4b3efd52e8d402d991e93466bbd82f83b2","name":"Coicop.csv","type":"text/csv","lastModified":1664451223381.399,"size":63500},{"id":"fb0b9cf32c7ad08614bafabd3cd3dff61377fc78c3162e996bfb38e3259295a5f3b645955c3c31a9fba64a0d350db5701fb2b16d91ef3f71858083582fab6d48","href":"https://static.observableusercontent.com/files/fb0b9cf32c7ad08614bafabd3cd3dff61377fc78c3162e996bfb38e3259295a5f3b645955c3c31a9fba64a0d350db5701fb2b16d91ef3f71858083582fab6d48","name":"categories.csv","type":"text/csv","lastModified":1664627509821.196,"size":11162}] 2f:{"title":"Inflation Explorer","cells":[{"id":0,"value":"# Inflation Explorer\n\nExplore inflation across the consumer goods basket in European countries","pinned":false,"hidden":false,"mode":"md"},{"id":3167,"value":"### Select your basket","pinned":false,"hidden":false,"mode":"md"},{"id":889,"value":"{\n const div = d3.create(\"div\");\n\n div\n .append(\"span\")\n .style(\"display\", \"inline-block\")\n .style(\"width\", \"125px\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"13px\")\n .text(\"Geographic area\");\n\n const selectCountry = div\n .append(\"select\")\n .attr(\"id\", \"countrySelectBox\")\n .on(\"change\", () => {\n mutable currentCountry = d3.select(\"#countrySelectBox\").property(\"value\");\n })\n .selectAll(\"option\")\n .data(countries)\n .join(\"option\")\n .attr(\"value\", (d) => d.code)\n .property(\"selected\", (d) => {\n let selected = d.code == currentCountry ? true : false;\n return selected;\n })\n .text((d) => d.country);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof selectedLevel = Inputs.radio([\"0\", \"1\", \"2\", \"3\", \"4\"], {\n label: \"Basket level\",\n value: \"2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3131,"value":"chartTitle = {\n const div = d3.create(\"div\");\n\n div.append(\"p\").attr(\"class\", \"chartTitle\").text(\"Consumer price inflation\");\n\n div\n .append(\"div\")\n .attr(\"class\", \"subTitle\")\n .text(\n countries.filter((d) => d.code == currentCountry)[0].country +\n \", \" +\n d3.timeFormat(\"%B\")(d3.timeParse(\"%m\")(currentPeriod.substr(5, 2))) +\n \" \" +\n currentPeriod.substr(0, 4)\n );\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"viewof colorMode = Inputs.radio([\"by value\", \"by category\"], {\n label: \"Color items\",\n value: \"by value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3236,"value":"viewof sizingMode = Inputs.radio([\"by weight\", \"by contribution\"], {\n label: \"Size items\",\n value: \"by weight\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"viewof selectedStats = Inputs.checkbox(possibleStats, {\n label: \"Show stats\",\n format: (d) => d.label,\n value: possibleStats\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3178,"value":"### Select your items","pinned":false,"hidden":false,"mode":"md"},{"id":3195,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2707,"value":"{\n const div = d3.create(\"div\").attr(\"id\", \"selectedCats\");\n\n selectedCoicopChange;\n\n function removeCategory(coicop) {\n removeSelectedCoicop(coicop);\n }\n\n div\n .selectAll(\"div\")\n .data(currentData.filter((d) => selectedCoicop[d.COICOP]))\n .join(\"div\")\n .on(\"click\", (event, d) => removeCategory(d.COICOP))\n .attr(\"class\", \"categoryButton\")\n .style(\"background-color\", (d) => d.color)\n .style(\"color\", (d) => (d3.hsl(d.color)[\"l\"] > 0.5 ? \"black\" : \"white\"))\n .text((d) => d.description);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3127,"value":"historicalChartTitle = {\n const div = d3.create(\"div\");\n\n div.append(\"p\").attr(\"class\", \"chartTitle\").text(\"Selected items over time\");\n\n div\n .append(\"div\")\n .attr(\"class\", \"subTitle\")\n .text(countries.filter((d) => d.code == currentCountry)[0].country);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2975,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3226,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"## About\n","pinned":false,"hidden":false,"mode":"md"},{"id":1873,"value":"Inflation Explorer: a tool to explore inflation across items and countries.\n\nFeel free to use and improve. Inquiries and suggestions: [simon@netwings.ch](mailto:simon@netwings.ch)\n\nLatest stable version: 3313","pinned":false,"hidden":false,"mode":"md"},{"id":1875,"value":"#### Consumer Price Inflation in Europe\n\nThis tool breaks the consumer price index down to its constituent products. Goods and services are categorized at various levels according to the Coicop classification and compared across countries and time.\n\nAll data is sourced from Eurostat and where possible, retrieved by API:\n- Inflation, YoY: [Example](https://ec.europa.eu/eurostat/databrowser/view/PRC_HICP_MANR__custom_2871571/default/table?lang=en)\n- Weight of items in the basket: [Example](https://ec.europa.eu/eurostat/databrowser/view/PRC_HICP_INW__custom_2871556/default/table?lang=en)\n- Coicop classification: [Data](https://ec.europa.eu/eurostat/ramon/nomenclatures/index.cfm?TargetUrl=LST_CLS_DLD&StrLanguageCode=EN&StrNom=CL_COICOP&StrLayoutCode=LINEAR#)","pinned":false,"hidden":false,"mode":"md"},{"id":868,"value":"# Technical appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1436,"value":"### Form","pinned":false,"hidden":false,"mode":"md"},{"id":1381,"value":"#### Parameters to fetch data","pinned":false,"hidden":false,"mode":"md"},{"id":1109,"value":"startYear = \"2018\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"startPeriod = \"2018-01\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"#### Initial Chart Settings","pinned":false,"hidden":false,"mode":"md"},{"id":1371,"value":"initialCountry = \"EA\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"initialPeriod = {\n let now = new Date(Date.now());\n\n return d3.timeFormat(\"%Y-%m \")(now.setMonth(now.getMonth() - 2));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2005,"value":"initialCoicop = [\n \"CP00\", // total CPI\n \"CP01\", // Food and non-alc beverage\n \"CP011\", // food\n \"CP0111\", // Cereals\n \"CP01111\" // rice\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"#### State Variables","pinned":false,"hidden":false,"mode":"md"},{"id":898,"value":"mutable currentCountry = initialCountry","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"mutable currentPeriod = initialPeriod","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"mutable play = \"off\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1928,"value":"mutable selectedCoicop = Object.fromEntries(\n currentCoicop.map((d) => {\n return initialCoicop.includes(d) ? [d, true] : [d, false];\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"#### Form functionality","pinned":false,"hidden":false,"mode":"md"},{"id":1511,"value":"possibleStats = [\n { label: \"headline inflation\", COICOP: \"CP00\", position: 0 },\n { label: \"core inflation\", COICOP: \"TOT_X_NRG_FOOD\", position: 1 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"possibleCategories = [\"Food\", \"Energy\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2531,"value":"searchCategories = currentData.map((d) => d.description)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"periodRange = Object.keys(inflation[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"movePeriod = function (offset) {\n mutable currentPeriod =\n periodRange[periodRange.indexOf(mutable currentPeriod) + offset];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"{\n while (play == \"on\") {\n await Promises.delay(playDelay);\n yield movePeriod(1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2908,"value":"mutable selectedCoicopChange = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"function checkSelectedCoicop(coicop) {\n return selectedCoicop[coicop];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2026,"value":"function addSelectedCoicop(coicop) {\n // Update global tracker of selected Coicop\n mutable selectedCoicop[coicop] = true;\n\n // Highlight the bubble in the bubble chart\n d3.selectAll(\"circle\")\n .filter((d, i) => d.COICOP == coicop)\n .style(\"stroke-width\", 2)\n .style(\"stroke\", \"white\")\n .transition(transitionTime)\n .style(\"stroke\", \"black\");\n\n mutable selectedCoicopChange++;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"function removeSelectedCoicop(coicop) {\n mutable selectedCoicop[coicop] = false;\n\n d3.selectAll(\"circle\")\n .filter((d, i) => d.COICOP == coicop)\n .style(\"stroke-width\", 1)\n .style(\"stroke\", \"white\")\n .transition(transitionTime)\n .style(\"stroke\", \"lightgrey\");\n\n mutable selectedCoicopChange++;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"#### Chart Functionality","pinned":false,"hidden":false,"mode":"md"},{"id":1639,"value":"transitionTime = 750","pinned":false,"hidden":false,"mode":"ojs"},{"id":3116,"value":"playDelay = 1500","pinned":true,"hidden":false,"mode":"ojs"},{"id":1038,"value":"chart.updateChart(currentData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1631,"value":"chart.updateStats(currentStats)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1775,"value":"chart.updateLegend(colorMode)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3276,"value":"chart.updateDownload(currentData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"### Data\n\nCalls to the [Eurostat API](https://wikis.ec.europa.eu/display/EUROSTATHELP/API+SDMX+2.1+-+data+filtering) are made on several occasions depending on the user's interaction with the tool.","pinned":false,"hidden":false,"mode":"md"},{"id":1127,"value":"baseUrl = \"https://ec.europa.eu/eurostat/api/dissemination/sdmx/2.1/data/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"#### List of Countries\nStatic list of countries and codes (file attachment):","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"countries = FileAttachment(\"countries.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"#### Basket Nomenclature\nStatic list of Coicop structure (file attachment).","pinned":false,"hidden":false,"mode":"md"},{"id":1663,"value":"categories = FileAttachment(\"categories.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"coicop = FileAttachment(\"Coicop.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"groupedCoicop = d3.group(coicop, (d) => d.Code)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"currentCoicop = {\n if (selectedLevel == \"0\") {\n return [\"CP00\"];\n } else {\n return coicop\n .filter(\n (d) =>\n d.Level == selectedLevel &&\n d.Code.substring(0, 2) == \"CP\" &&\n d.Code != \"CP00\"\n )\n .map((d) => d.Code);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1104,"value":"#### Weights\nSpecific weights of COICOP items for a given countriy and year (retrieved by API)\n- Datastream Code: PRC_HICP_INW\n- Filters: FREQ.COICOP.GEO","pinned":false,"hidden":false,"mode":"md"},{"id":1131,"value":"weightsUrlCode = \"PRC_HICP_INW\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"weightsUrlFilter = \"A..\" + countries.map((d) => d.code).join(\"+\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"weightsUrl = baseUrl +\n weightsUrlCode +\n \"/\" +\n weightsUrlFilter +\n \"?startPeriod=2018&format=TSV&detail=dataonly\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"allWeights = d3.tsv(\n \"https://pinkmartini.herokuapp.com/\" + weightsUrl,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"groupedWeights = d3.group(\n allWeights.map((d) => {\n return {\n COICOP: d[\"freq,coicop,geo\\\\TIME_PERIOD\"].split(\",\").slice(1, 2)[0],\n country: d[\"freq,coicop,geo\\\\TIME_PERIOD\"].split(\",\").slice(2, 3)[0],\n ...d\n };\n }),\n (d) => d.country,\n (d) => d.COICOP\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"#### Inflation Data\nInflation for all basket items for a given country (retrieved by API)\n- Datastream Code: PRC_HICP_MANR\n- Filters: FREQ.UNIT.COICOP.GEO","pinned":false,"hidden":false,"mode":"md"},{"id":1167,"value":"inflationUrlCode = \"PRC_HICP_MANR\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"inflationUrlFilter = \"M.RCH_A..\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"inflationUrl = baseUrl +\n inflationUrlCode +\n \"/\" +\n inflationUrlFilter +\n currentCountry +\n \"?startPeriod=2018-01&format=TSV&detail=dataonly\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"inflation = d3.tsv(\n \"https://pinkmartini.herokuapp.com/\" + inflationUrl,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2992,"value":"#### Inflation for all countries\n\nInflation for specific basket items for all countries (retrieved by API)\n- Datastream Code: PRC_HICP_MANR\n- Filters: FREQ.UNIT.COICOP.GEO","pinned":false,"hidden":false,"mode":"md"},{"id":2995,"value":"inflationCountriesUrlFilter = {\n selectedCoicopChange;\n return (\n \"M.RCH_A.\" +\n Object.entries(selectedCoicop)\n .filter((d) => d[1])\n .map((d) => d[0])\n .join(\"+\") +\n \".\" +\n countries.map((d) => d.code).join(\"+\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3000,"value":"inflationCountriesUrl = baseUrl +\n inflationUrlCode +\n \"/\" +\n inflationCountriesUrlFilter +\n \"?startPeriod=2018-01&format=TSV&detail=dataonly\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3010,"value":"inflationCountries = d3.tsv(\n \"https://pinkmartini.herokuapp.com/\" + inflationCountriesUrl,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"## Chart 1: Bubbles with inflation components","pinned":false,"hidden":false,"mode":"md"},{"id":1221,"value":"### Data Wrangling\nThis array always contains the data that is currently visualized","pinned":false,"hidden":false,"mode":"md"},{"id":1223,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"currentStats = inflation\n .filter((d) =>\n possibleStats\n .map((d) => d.COICOP)\n .some(\n (e) =>\n d[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"].split(\",\").slice(2, 3)[0] == e\n )\n )\n .map((d) => {\n let thisCOICOP = d[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"]\n .split(\",\")\n .slice(2, 3)[0];\n let thisLabel = possibleStats.filter((d) => d.COICOP == thisCOICOP)[0]\n .label;\n let thisPosition = possibleStats.filter((d) => d.COICOP == thisCOICOP)[0]\n .position;\n let thisVisibility = selectedStats.map((d) => d.COICOP).includes(thisCOICOP)\n ? 1\n : 0;\n return {\n COICOP: thisCOICOP,\n label: thisLabel,\n position: thisPosition,\n inflation: d[currentPeriod] / 100,\n visibility: thisVisibility\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"### Scales and Axes","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"circleExtent = [\n (1 * chartWidth) / defaultWidth,\n (30 * chartWidth) / defaultWidth\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"circleScale = d3.scaleSqrt().domain([0, 200]).range(circleExtent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"xExtent = [-0.2, 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"scaleX = d3.scaleLinear().domain(xExtent).range([0, boundedWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"scaleY = d3\n .scaleLinear()\n .domain([-1, 1])\n .range([-boundedHeight / 2, boundedHeight / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"colorScale = d3\n .scaleSequential((t) => d3.interpolateRdYlBu(1 - t))\n .domain([-0.1, 0.1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"colorCategories = [\n { name: \"food\", color: \"#ff7f0e\" },\n { name: \"energy\", color: \"#d62728\" },\n { name: \"other\", color: \"#1f77b4\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"colorCategoryScale = d3\n .scaleOrdinal()\n .domain(colorCategories.map((d) => d.name))\n .range(colorCategories.map((d) => d.color))","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"xAxis = d3\n .axisBottom(scaleX)\n .tickFormat(d3.format(\".0%\"))\n .tickSize(-boundedHeight)\n .tickPadding([8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"xAxisLabel = function (selection) {\n return selection\n .append(\"text\")\n .attr(\"class\", \"axisLabel\")\n .text(\"Inflation, Year on Year\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"### Canvas","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"defaultWidth = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"chartWidth = {\n if (width >= defaultWidth) {\n return defaultWidth;\n } else {\n return width;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"chartHeight = chartWidth / 2.4 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({ top: 40, right: 15, bottom: 45, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"boundedWidth = chartWidth - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"boundedHeight = chartHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"## Chart 2: Timeline","pinned":false,"hidden":false,"mode":"md"},{"id":1925,"value":"historicalData = {\n selectedCoicopChange;\n\n let chartData = new Array();\n\n let thisTimeSeries = inflation.filter(\n (d) =>\n selectedCoicop[\n d[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"].split(\",\").slice(2, 3)[0]\n ]\n );\n thisTimeSeries.forEach((timeSeries) => {\n let thisCOICOP = timeSeries[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"]\n .split(\",\")\n .slice(2, 3)[0];\n for (const [key, value] of Object.entries(timeSeries)) {\n if (key != \"freq,unit,coicop,geo\\\\TIME_PERIOD\" && !isNaN(value)) {\n let thisData = {\n COICOP: thisCOICOP,\n description: groupedCoicop.get(thisCOICOP)[0].Description,\n date: d3.utcParse(\"%Y-%m \")(key),\n inflation: value / 100\n };\n chartData.push(thisData);\n }\n }\n });\n return chartData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2988,"value":"## Chart 3: Country Comparison","pinned":false,"hidden":false,"mode":"md"},{"id":2986,"value":"countriesData = {\n \n selectedCoicopChange;\n \n return inflationCountries.map((d) => {\n let thisCode = d[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"]\n .split(\",\")\n .slice(3, 4)[0];\n\n let thisCountry = countries.filter((d) => d.code == thisCode)[0].country;\n\n let thisCOICOP = d[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"]\n .split(\",\")\n .slice(2, 3)[0];\n\n let thisDescription = groupedCoicop.get(thisCOICOP)[0].Description;\n\n let thisData = {\n code: thisCode,\n country: thisCountry,\n COICOP: thisCOICOP,\n description: thisDescription,\n inflation: d[currentPeriod] / 100\n };\n\n return thisData;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"## Chart 4: List of Items","pinned":false,"hidden":false,"mode":"md"},{"id":794,"value":"{\n /*{\n const div = d3.create(\"div\").style(\"width\", chartWidth);\n\n div\n .append(\"p\")\n .attr(\"class\", \"itemsListTitle\")\n .text(\"Items at basket level \" + selectedLevel);\n\n div\n .append(\"p\")\n .attr(\"class\", \"itemsListSubTitle\")\n .text(\n d3.timeFormat(\"%B %Y\")(d3.timeParse(\"%Y-%m \")(currentPeriod)) +\n \", \" +\n currentCountry\n );\n\n div\n .selectAll(\"p.itemsList\")\n .data(inflationBuckets)\n .join(\"p\")\n .attr(\"class\", \"itemsList\")\n .html(\n (d) =>\n \"\" +\n d3.format(\"+.0%\")(d[0]) +\n \" to \" +\n d3.format(\"+.0%\")(d[1]) +\n \"
\" +\n currentData\n .filter((e) => e.inflation >= d[0] && e.inflation < d[1])\n .map((d) => d.description)\n .join(\", \")\n );\n\n return div.node();\n}*/\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"inflationBuckets = [\n [-1, 0],\n [0, 0.02],\n [0.02, 0.05],\n [0.05, 0.1],\n [0.1, 1]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"## Style","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"$38","pinned":false,"hidden":false,"mode":"html"},{"id":872,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":2427,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}