25:["$","title",null,{"children":"Untitled | Franz Zieher's Workspace | Observable"}] 49: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 }); }4a: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(); }4b: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(); }4c: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(); }4d: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(); }4e: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(); }4f: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 }; })50:Tb34,Expand to edit styles 51:[{"id":"326925de9b77313ad387434a6d24cffec4f73d1f63f1f8aca67aaf8b6f4cda5171ebf946b31fad23d80aa11a84f93953e9f737312286d4e2381c67f6ba9ab166","href":"https://static.observableusercontent.com/files/326925de9b77313ad387434a6d24cffec4f73d1f63f1f8aca67aaf8b6f4cda5171ebf946b31fad23d80aa11a84f93953e9f737312286d4e2381c67f6ba9ab166","name":"countries.csv","type":"text/csv","lastModified":1701455420748.433,"size":412},{"id":"fb0b9cf32c7ad08614bafabd3cd3dff61377fc78c3162e996bfb38e3259295a5f3b645955c3c31a9fba64a0d350db5701fb2b16d91ef3f71858083582fab6d48","href":"https://static.observableusercontent.com/files/fb0b9cf32c7ad08614bafabd3cd3dff61377fc78c3162e996bfb38e3259295a5f3b645955c3c31a9fba64a0d350db5701fb2b16d91ef3f71858083582fab6d48","name":"categories.csv","type":"text/csv","lastModified":1701455420748.433,"size":11162},{"id":"9d40371f96cf109e065840a0a6bd6baa9095325354715f82eb9c0cf624ac36127b28116d5d8b940676ea6b669c265a4b3efd52e8d402d991e93466bbd82f83b2","href":"https://static.observableusercontent.com/files/9d40371f96cf109e065840a0a6bd6baa9095325354715f82eb9c0cf624ac36127b28116d5d8b940676ea6b669c265a4b3efd52e8d402d991e93466bbd82f83b2","name":"Coicop.csv","type":"text/csv","lastModified":1701455420748.433,"size":63500}] 29:{"id":"b272d2df15157213","slug":null,"title":"","thumbnail":"5ee9669ec405f7ab9cd3cd33380c4d5767ebcfab90801895c71fe150e36d1562","access_level":"public","create_time":"$D2023-12-01T18:30:20.748Z","update_time":"$D2023-12-02T08:46:32.724Z","view_time":null,"first_public_time":"$D2023-12-01T18:30:20.748Z","has_unpublished_edits":null,"fork":{"id":"1bb0a0ed0ecab37c","slug":"inflation-explorer","title":"Inflation Explorer","owner":{"id":"d01e85096f203578","login":"simon-pinkmartini","name":"Simon Schmid"}},"stars":0,"starred":false,"owner":{"type":"team","id":"465c6b9a04f212be","login":"franz-zieher-ws","name":"Franz Zieher's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/f5fe24eca5059ce7711ad5e4490553cf1e5496a5ba4ed380ac8489468dd8fc5b","tier":"starter_2024","bio":"","following":false},"version":3337,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b03c4bc5b42f95ed","login":"franz-zieher","name":"Franz Zieher","avatar_url":"https://avatars-next.observableusercontent.com/f39788147d6bf39e265a874be5ff68b23ba06db1661abdf3294330507f9f5790","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b03c4bc5b42f95ed","login":"franz-zieher","name":"Franz Zieher","avatar_url":"https://avatars-next.observableusercontent.com/f39788147d6bf39e265a874be5ff68b23ba06db1661abdf3294330507f9f5790","tier":null,"role":"editor"},{"type":"team","id":"465c6b9a04f212be","login":"franz-zieher-ws","name":"Franz Zieher's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/f5fe24eca5059ce7711ad5e4490553cf1e5496a5ba4ed380ac8489468dd8fc5b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":3329,"value":"This notebook needs a CORS anywhere server to function properly. For debug purposes use https://cors-anywhere.herokuapp.com/.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3332,"value":"CORS_ANYWHERE = \"https://cors-anywhere.herokuapp.com/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Inflation Explorer\n\nExplore inflation across the consumer goods basket in European countries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3167,"value":"### Select your basket","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3178,"value":"### Select your items","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3195,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2975,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3226,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"## About\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":868,"value":"# Technical appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1436,"value":"### Form","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1381,"value":"#### Parameters to fetch data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1109,"value":"startYear = \"2018\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"startPeriod = \"2018-01\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"#### Initial Chart Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1371,"value":"initialCountry = \"EA\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"#### State Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"mutable currentCountry = initialCountry","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"mutable currentPeriod = initialPeriod","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"mutable play = \"off\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"#### Form functionality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"possibleCategories = [\"Food\", \"Energy\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2531,"value":"searchCategories = currentData.map((d) => d.description)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"periodRange = Object.keys(inflation[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"movePeriod = function (offset) {\n mutable currentPeriod =\n periodRange[periodRange.indexOf(mutable currentPeriod) + offset];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"{\n while (play == \"on\") {\n await Promises.delay(playDelay);\n yield movePeriod(1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2908,"value":"mutable selectedCoicopChange = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2045,"value":"function checkSelectedCoicop(coicop) {\n return selectedCoicop[coicop];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"#### Chart Functionality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1639,"value":"transitionTime = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3116,"value":"playDelay = 1500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"chart.updateChart(currentData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1631,"value":"chart.updateStats(currentStats)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1775,"value":"chart.updateLegend(colorMode)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3276,"value":"chart.updateDownload(currentData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1127,"value":"baseUrl = \"https://ec.europa.eu/eurostat/api/dissemination/sdmx/2.1/data/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"#### List of Countries\nStatic list of countries and codes (file attachment):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"countries = FileAttachment(\"countries.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"#### Basket Nomenclature\nStatic list of Coicop structure (file attachment).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1663,"value":"categories = FileAttachment(\"categories.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"coicop = FileAttachment(\"Coicop.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"groupedCoicop = d3.group(coicop, (d) => d.Code)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1131,"value":"weightsUrlCode = \"PRC_HICP_INW\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"weightsUrlFilter = \"A..\" + countries.map((d) => d.code).join(\"+\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"weightsUrl = baseUrl +\n weightsUrlCode +\n \"/\" +\n weightsUrlFilter +\n \"?startPeriod=2018&format=TSV&detail=dataonly\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"allWeights = d3.tsv(\n CORS_ANYWHERE + weightsUrl,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1167,"value":"inflationUrlCode = \"PRC_HICP_MANR\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"inflationUrlFilter = \"M.RCH_A..\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"inflation = d3.tsv(\n CORS_ANYWHERE + inflationUrl, \n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3000,"value":"inflationCountriesUrl = baseUrl +\n inflationUrlCode +\n \"/\" +\n inflationCountriesUrlFilter +\n \"?startPeriod=2018-01&format=TSV&detail=dataonly\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3010,"value":"inflationCountries = d3.tsv(\n CORS_ANYWHERE + inflationCountriesUrl,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"## Chart 1: Bubbles with inflation components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1221,"value":"### Data Wrangling\nThis array always contains the data that is currently visualized","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1223,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"### Scales and Axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"circleExtent = [\n (1 * chartWidth) / defaultWidth,\n (30 * chartWidth) / defaultWidth\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"circleScale = d3.scaleSqrt().domain([0, 200]).range(circleExtent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"xExtent = [-0.2, 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"scaleX = d3.scaleLinear().domain(xExtent).range([0, boundedWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"scaleY = d3\n .scaleLinear()\n .domain([-1, 1])\n .range([-boundedHeight / 2, boundedHeight / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"colorScale = d3\n .scaleSequential((t) => d3.interpolateRdYlBu(1 - t))\n .domain([-0.1, 0.1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"### Canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"defaultWidth = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"chartWidth = {\n if (width >= defaultWidth) {\n return defaultWidth;\n } else {\n return width;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"chartHeight = chartWidth / 2.4 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"margin = ({ top: 40, right: 15, bottom: 45, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"boundedWidth = chartWidth - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"boundedHeight = chartHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1921,"value":"## Chart 2: Timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2988,"value":"## Chart 3: Country Comparison","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"## Chart 4: List of Items","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"$50","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":872,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2427,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null