2c:null 2d:["$","title",null,{"children":"Inflation: What's in the basket? | Simon Schmid | Observable"}] 32:T5a7,{ 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) => { moveTimePoint(-1); }); div.append("span").style("display", "inline-block").style("width", "10px"); const selectTime = div .append("select") .attr("id", "timeSelectBox") .on("change", () => { mutable timePoint = d3.select("#timeSelectBox").property("value"); }) .selectAll("option") .data(timeRange) .join("option") .attr("value", (d) => d) .property("selected", (d) => { let selected = d == timePoint ? 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) => { moveTimePoint(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:Td07,chart = { const div = d3.create("div").attr("id", "div_template"); const svg = div .append("svg") .attr("width", chartWidth) .attr("height", chartHeight); const g = svg .append("g") .attr( "transform", `translate(${margin.left}, ${margin.top + boundedHeight / 2})` ); const myXAxis = svg .append("g") .attr("class", "x-axis") .attr( "transform", `translate(${margin.left},${margin.top + boundedHeight})` ) .call(xAxis); myXAxis.select(".domain").remove(); myXAxis.selectAll("line").attr("stroke", "lightgrey"); svg .append("g") .attr("class", "x-axis") .attr( "transform", `translate(${margin.left},${margin.top + boundedHeight + 30})` ) .call(xAxisLabel); // Div fürs tooltip kreieren let tooltip = div.append("div").style("opacity", 1).attr("class", "tooltip"); function updateChart(data) { // Properties des tooltip verändern bei mouseover, move, out let mouseover = function (d) { tooltip.style("opacity", 1); d3.select(this).style("stroke", "black"); }; let click = function (d) { if (!clickedItems.includes(d.COICOP)) { d3.select(this).style("stroke", "black"); d3.select(this).style("stroke-width", 2); clickedItems.push(d.COICOP); } else { d3.select(this).style("stroke", "lightgrey"); d3.select(this).style("stroke-width", 1); //clickedItems.push(d.COICOP); clickedItems.splice(clickedItems.indexOf(d.COICOP, 1)); } }; let mousemove = function (d) { tooltip.html( "" + d.description + "
" + d3.format("+.1%")(d.inflation) ); }; let mouseleave = function (d) { tooltip.style("opacity", 0); if (!clickedItems.includes(d.COICOP)) { d3.select(this).style("stroke", "lightgrey"); } }; // Simulation der neuen x/y-Werte 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); // Nodes verändern const node = g .selectAll("circle") .data(simulation.nodes()) .join( (enter) => enter .append("circle") .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave) .on("click", click) .style("stroke", (d) => "lightgrey") .style("fill", "white") .style("opacity", 1), (update) => update, (exit) => exit.transition().duration(750).style("opacity", 0).remove() ) .transition() .duration(750) .attr("r", (d) => (isNaN(d.inflation) ? 0 : circleScale(d.weight))) .style("fill", (d) => colorScale(d.inflation)) .attr("transform", (d) => `translate(${d.x},${d.y})`); } return Object.assign(div.node(), { updateChart }); }34:[{"id":"97da4769f3f20dfe5d91f6219d2a3777c0e8766901fcc38942fee07a5f60b10afeaee9466c191ebc30b6d91acbef362828c5734e115878a0cc6c0728f2b2a5c3","href":"https://static.observableusercontent.com/files/97da4769f3f20dfe5d91f6219d2a3777c0e8766901fcc38942fee07a5f60b10afeaee9466c191ebc30b6d91acbef362828c5734e115878a0cc6c0728f2b2a5c3","name":"weights.csv","type":"text/csv","lastModified":1654606254739.67,"size":38620},{"id":"25c895d6bba59dc8b441e760500870ace67e8ea04c641fcf02417512701ac5d6283a922709dda517fda58372622d9540ed5a4e7c4b66f740dc7085789d3bf84b","href":"https://static.observableusercontent.com/files/25c895d6bba59dc8b441e760500870ace67e8ea04c641fcf02417512701ac5d6283a922709dda517fda58372622d9540ed5a4e7c4b66f740dc7085789d3bf84b","name":"levels.csv","type":"text/csv","lastModified":1654606365952.24,"size":4670},{"id":"326925de9b77313ad387434a6d24cffec4f73d1f63f1f8aca67aaf8b6f4cda5171ebf946b31fad23d80aa11a84f93953e9f737312286d4e2381c67f6ba9ab166","href":"https://static.observableusercontent.com/files/326925de9b77313ad387434a6d24cffec4f73d1f63f1f8aca67aaf8b6f4cda5171ebf946b31fad23d80aa11a84f93953e9f737312286d4e2381c67f6ba9ab166","name":"countries.csv","type":"text/csv","lastModified":1655123264387.77,"size":412}] 30:{"id":"fe3398740c779993","slug":"inflation","title":"Inflation: What's in the basket?","thumbnail":"e700df6a35bfcc231d703d50bb59a6ef611364976ea42d228e92998e791e542c","access_level":"unlisted","create_time":"$D2022-06-07T12:36:50.728Z","update_time":"$D2022-09-30T06:30:46.511Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d01e85096f203578","login":"simon-pinkmartini","name":"Simon Schmid","avatar_url":"https://avatars-next.observableusercontent.com/fca6b36eeaa4819e1527bde4be8fb968483d4b3ab1f7c395336b0e4db32b928f","tier":"starter_2024","bio":"Journalist. Economics, data journalism, climate."},"version":1067,"publish_version":1067,"role":null,"authored":false,"authors":[{"type":"individual","id":"c5a482094abe3334","login":"simon-pinkmartini","name":"Simon Schmid","avatar_url":"https://avatars-next.observableusercontent.com/fca6b36eeaa4819e1527bde4be8fb968483d4b3ab1f7c395336b0e4db32b928f","tier":null,"bio":"Journalist. Economics, data journalism, climate."}],"members":[{"type":"individual","id":"c5a482094abe3334","login":"simon-pinkmartini","name":"Simon Schmid","avatar_url":"https://avatars-next.observableusercontent.com/fca6b36eeaa4819e1527bde4be8fb968483d4b3ab1f7c395336b0e4db32b928f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Inflation: What's in the basket?","cells":[{"id":0,"value":"# Inflation: What's in the basket?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"**Consumer Price Inflation in Europe:** A close look at how the categories in the goods basket evolve at various levels of the COICOP classification (levels of detail in the goods basket ranging from 0 to 4). Source: [Eurostat](https://ec.europa.eu/eurostat/databrowser/view/PRC_HICP_MANR__custom_2871571/default/table?lang=en), [Eurostat](https://ec.europa.eu/eurostat/databrowser/view/PRC_HICP_INW__custom_2871556/default/table?lang=en)\n\nThis visualization is a quasi-histogram. Items in the consumer basket are arranged horizontally according to their measured price change YoY. Their position can differ slightly from the exact value. Items are sized according to their weight in the basket and colored according to the inflation at the given date (color scale maxes at +10%). Hover over the bubbles to get detailled information on each item.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":972,"value":"**TODO:**\n- Adjust weights according to country and year\n- Option to add summary statistics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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 country = 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 == country ? 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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof inflationLevel = Inputs.radio([\"0\", \"1\", \"2\", \"3\", \"4\"], {\n label: \"COICOP Level\",\n value: \"2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"{\n const div = d3.create(\"div\").style(\"width\", chartWidth);\n\n div\n .selectAll(\"p\")\n .data(buckets)\n .join(\"p\")\n .attr(\"class\", \"itemsList\")\n .html(\n (d) =>\n \"Items between \" +\n d3.format(\"+.0%\")(d[0]) +\n \" and \" +\n d3.format(\"+.0%\")(d[1]) +\n \"
\" +\n currentData\n .filter((e) => e[timePoint] >= d[0] && e[timePoint] < d[1])\n .map((d) => d.description)\n .join(\", \")\n );\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"### Control Variables / Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"mutable country = \"EA\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"initialDate = {\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"mutable timePoint = initialDate","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"moveTimePoint = function (offset) {\n mutable timePoint = timeRange[timeRange.indexOf(mutable timePoint) + offset];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"{\n while (play == \"on\") {\n await Promises.delay(500);\n yield moveTimePoint(1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"mutable clickedItems = new Array()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"buckets = [\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"For info: See the [EC API Doc](https://ec.europa.eu/eurostat/online-help/public/en/API_06_DataQuery_en/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"url = \"https://ec.europa.eu/eurostat/api/dissemination/sdmx/2.1/data/PRC_HICP_MANR/M.RCH_A..\" +\n country +\n \"?format=TSV&startPeriod=\" +\n startPeriod +\n \"&detail=dataonly\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"countries = FileAttachment(\"countries.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"levels = FileAttachment(\"levels.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"weights = FileAttachment(\"weights.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"### Data Wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"timeRange = Object.keys(data[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"currentLevels = levels.map((d) => d[inflationLevel]).filter((d) => d != \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"rawData = d3.tsv(\"https://pinkmartini.herokuapp.com/\" + url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"data = rawData.map((d) => {\n let coicop = d[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"].slice(8, -3);\n\n delete d[\"freq,unit,coicop,geo\\\\TIME_PERIOD\"];\n\n for (let date in d) {\n d[date] = d[date] / 100;\n }\n\n return {\n COICOP: coicop,\n ...d\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"currentData = data\n .filter((d) => currentLevels.some((e) => d.COICOP == e) && true)\n .map((d) => {\n let weightRow = weights.filter((e) => e.COICOP == d.COICOP)[0];\n return {\n ...weightRow,\n inflation: d[timePoint]\n };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"xAxis = d3\n .axisBottom(scaleX)\n .tickFormat(d3.format(\"+.0%\"))\n .tickSize(-boundedHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"### Canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"defaultWidth = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"margin = ({ top: 40, right: 15, bottom: 30, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"### Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":872,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"