31:T6ff,chart = { const svg = d3.create("svg") .attr("height", height) .attr("width", width); const g = svg.append("g").attr("transform", `translate(${margins.left},${margins.top})`); // draw bars g.selectAll("rect") .data(data) .join("rect") .attr("y", d => yScale(y(d))) .attr("height", yScale.bandwidth()) .style("fill", d => d3.color(color).darker(colorScale(x(d)))) .transition().duration(1000) .attr("width", d => xScale(x(d))); g.selectAll("text.values") .data(data) .join("text") .attr("class", "values") .attr("x", d => xScale(x(d)) - 30) .attr("y", d => yScale(y(d)) + yScale.bandwidth()/2) .text(d => x(d)) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .style("fill", "white") .style("font-size", ".75em") .style("font-family", "Arial, sans-serif"); // axes const yAxis = g.append("g").call(d3.axisLeft(yScale).tickSize(0)) .attr("transform", `translate(${0},${0})`) .select(".domain").remove(); const xAxis = g.append("g").call(d3.axisBottom(xScale)) .attr("transform", `translate(${0},${chartHeight})`); xAxis.append("text").text(value.replace(/_/gi, ' ')) .attr("fill", "black") .attr("y", 35) .attr("x", chartWidth/2) .attr("text-anchor", "middle") .style("font-size", "1.3em"); // chart title g.append("text").attr("class", "title") .text("Top 10 Most Expensive Countries to live in.") .attr("y", -10) .style("font-size", "1.5em") .style("font-family", "Arial, sans-serif"); return svg.node(); }32:T1a7b,rawData = `Rank Country Cost_of_Living_Index Rent_Index Cost_of_Living_Plus_Rent_Index Groceries_Index Restaurant_Price_Index Local_Purchasing_Power_Index 1 Bermuda 145.07 92.86 120.13 141.77 157.70 83.43 2 Switzerland 131.75 55.05 95.10 133.36 126.08 110.96 3 Norway 106.09 36.18 72.68 100.59 105.90 79.43 4 Iceland 96.77 43.17 71.16 88.84 102.24 71.88 5 Denmark 91.67 36.18 65.16 72.62 104.92 94.73 6 Luxembourg 88.28 61.62 75.54 80.71 94.66 95.38 7 Japan 87.77 28.03 59.23 90.47 49.74 76.53 8 Israel 86.63 31.90 60.48 73.68 91.10 70.36 9 Bahamas 85.85 34.54 61.33 69.35 89.29 49.31 10 Singapore 85.59 64.77 75.64 75.31 62.07 83.62 11 Australia 84.14 38.38 62.28 81.14 76.28 99.29 12 Ireland 83.11 45.42 65.10 67.80 82.34 73.84 13 Barbados 81.49 21.09 52.63 71.51 72.85 45.34 14 South Korea 81.20 22.91 53.35 99.84 43.98 76.60 15 France 80.62 27.79 55.38 77.46 75.48 74.06 16 Hong Kong 79.94 74.24 77.22 81.73 58.60 62.45 17 Sweden 79.17 28.08 54.76 71.67 77.23 90.55 18 New Zealand 79.14 35.38 58.23 75.03 69.18 81.44 19 Seychelles 78.92 34.32 57.61 78.56 84.24 18.03 20 Netherlands 78.64 39.31 59.85 61.63 81.62 83.89 21 Belgium 78.52 26.84 53.83 67.33 82.40 76.54 22 Finland 77.46 28.04 53.85 65.60 81.22 89.05 23 Lebanon 75.88 24.08 51.13 72.51 62.89 29.49 24 Austria 75.49 28.42 53.00 67.62 70.98 78.23 25 Malta 73.61 32.96 54.19 63.41 77.04 41.89 26 Italy 73.11 22.91 49.13 62.46 75.60 58.70 27 United States 71.92 41.14 57.21 70.24 69.42 102.58 28 United Kingdom 71.03 31.61 52.19 56.38 74.69 82.56 29 Germany 70.62 29.64 51.04 54.69 65.00 93.72 30 Canada 70.08 32.48 52.12 68.50 63.96 82.76 31 Macao 69.60 44.39 57.56 66.28 48.93 67.60 32 Puerto Rico 69.51 19.42 45.58 72.13 58.12 69.22 33 Taiwan 65.25 17.92 42.64 79.11 28.80 56.08 34 Qatar 64.23 46.59 55.80 56.72 62.58 93.12 35 Cyprus 64.05 22.70 44.29 51.68 66.31 52.34 36 United Arab Emirates 61.67 40.62 51.61 48.84 61.25 85.74 37 Greece 60.96 13.05 38.07 47.66 55.71 38.95 38 Slovenia 59.38 18.88 40.03 51.46 47.86 56.14 39 Spain 59.09 23.59 42.13 48.74 56.99 62.68 40 Bahrain 57.70 29.53 44.24 46.96 52.27 53.24 41 Estonia 56.45 16.27 37.25 43.35 56.27 61.22 42 Croatia 56.36 14.94 36.57 49.10 46.13 43.13 43 Palestine 55.88 9.98 33.95 50.24 36.21 39.10 44 Cuba 55.54 14.89 36.12 46.93 32.85 1.42 45 Trinidad And Tobago 55.48 16.44 36.83 53.09 52.21 39.00 46 Ivory Coast 54.61 20.26 38.20 47.15 34.50 6.32 47 Ethiopia 54.30 15.59 35.80 37.47 18.17 10.10 48 Panama 54.07 22.58 39.02 54.77 45.48 32.05 49 Jamaica 53.16 15.93 35.37 55.94 33.12 32.21 50 Portugal 52.88 22.31 38.27 42.01 43.24 44.96 51 Latvia 52.87 13.17 33.90 41.36 44.92 45.94 52 Mauritius 52.57 12.32 33.34 54.15 37.56 27.38 53 Belize 52.45 11.56 32.91 47.82 36.10 45.71 54 Jordan 52.17 9.69 31.87 42.76 42.08 33.13 55 Suriname 51.86 10.42 32.06 50.39 62.59 16.47 56 Zimbabwe 51.52 9.44 31.41 45.56 39.29 22.10 57 Yemen 51.46 6.21 29.84 61.17 23.62 14.75 58 Uruguay 51.09 13.56 33.16 40.83 48.95 30.62 59 Costa Rica 50.64 14.52 33.38 48.03 41.33 39.01 60 Oman 50.18 17.32 34.48 46.90 41.88 84.45 61 Saudi Arabia 49.95 11.64 31.64 41.74 31.98 88.18 62 Kuwait 49.40 31.43 40.82 35.87 45.12 75.32 63 Brunei 49.35 23.44 36.97 47.21 35.86 89.03 64 Chile 49.33 14.66 32.76 41.82 45.96 33.33 65 Thailand 49.32 16.33 33.56 50.64 24.19 31.36 66 Czech Republic 49.18 19.81 35.15 42.76 34.68 56.40 67 Slovakia 49.08 17.43 33.96 42.96 37.47 50.39 68 Fiji 48.54 17.77 33.84 53.43 38.55 30.04 69 Cambodia 47.91 14.56 31.98 48.64 23.10 11.40 70 Lithuania 47.66 14.63 31.88 37.28 45.96 54.60 71 Guatemala 44.76 15.24 30.66 41.68 32.45 25.64 72 El Salvador 44.57 13.33 29.64 42.69 33.33 20.72 73 Nicaragua 42.77 7.99 26.15 41.07 29.47 16.69 74 Hungary 42.75 12.75 28.42 35.46 34.24 49.81 75 Cameroon 42.57 7.42 25.78 42.88 24.67 15.37 76 China 42.54 16.42 30.06 45.49 28.40 57.47 77 Honduras 42.20 10.63 27.12 35.13 28.73 31.06 78 Poland 42.04 18.09 30.60 33.45 35.38 47.09 79 South Africa 41.69 15.94 29.38 34.59 37.22 72.92 80 Dominican Republic 41.54 9.81 26.38 36.12 35.28 21.72 81 Montenegro 41.43 11.75 27.25 32.55 32.54 35.36 82 Iran 41.34 17.88 30.13 36.26 25.85 19.00 83 Namibia 41.02 14.29 28.25 35.67 35.58 53.28 84 Bulgaria 40.92 9.88 26.09 35.24 31.88 40.26 85 Philippines 40.65 10.41 26.20 38.91 22.16 19.71 86 Ghana 40.63 18.44 30.02 41.21 31.53 15.19 87 Botswana 40.41 10.74 26.23 34.64 41.52 61.95 88 Albania 40.25 9.21 25.42 32.73 30.71 26.58 89 Ecuador 40.08 12.03 26.68 36.42 28.55 30.54 90 Malaysia 39.51 10.77 25.78 40.20 21.71 56.10 91 Serbia 39.19 9.83 25.17 29.68 30.59 35.83 92 Bosnia And Herzegovina 38.56 7.13 23.54 31.84 25.70 42.56 93 Romania 38.50 10.76 25.25 33.45 32.38 45.19 94 Myanmar 38.06 21.71 30.25 39.59 21.22 10.67 95 Vietnam 38.05 14.16 26.63 38.32 19.03 27.26 96 Argentina 37.87 8.49 23.83 29.20 33.39 34.56 97 Indonesia 37.44 10.29 24.47 39.40 17.99 20.89 98 Somalia 37.42 5.90 22.36 44.46 26.73 27.23 99 Morocco 36.85 9.72 23.89 32.78 26.33 32.17 100 Kenya 36.30 9.17 23.33 33.38 30.50 27.67 101 Peru 36.26 12.25 24.79 33.83 23.56 28.81 102 Bolivia 36.11 10.76 23.99 31.94 25.24 37.23 103 Mozambique 35.89 15.12 25.97 29.07 29.28 16.40 104 Mexico 35.05 11.62 23.86 33.64 28.92 35.54 105 Tanzania 34.60 13.11 24.33 30.62 25.16 16.05 106 North Macedonia 34.15 6.72 21.04 28.46 22.46 31.97 107 Rwanda 34.07 14.92 24.92 28.51 28.54 21.97 108 Bangladesh 33.31 4.90 19.74 31.49 20.39 24.07 109 Mongolia 33.17 9.91 22.05 33.11 23.35 28.09 110 Russia 33.17 9.77 21.99 27.81 30.65 34.61 111 Iraq 32.72 9.76 21.75 27.48 25.64 39.75 112 Moldova 32.68 8.65 21.20 26.07 26.59 26.99 113 Uganda 32.18 7.29 20.29 28.93 22.00 13.97 114 Brazil 31.82 8.12 20.50 25.41 22.55 28.66 115 Armenia 31.68 10.36 21.50 24.56 27.25 26.13 116 Turkey 31.48 6.10 19.35 28.11 19.91 35.35 117 Sri Lanka 31.28 8.54 20.42 36.47 16.54 20.77 118 Colombia 31.00 9.96 20.94 26.28 21.80 26.13 119 Azerbaijan 30.90 9.02 20.45 26.23 28.66 25.77 120 Paraguay 30.72 9.77 20.71 24.55 24.34 27.51 121 Belarus 30.69 9.19 20.42 26.57 31.03 31.96 122 Egypt 30.10 5.97 18.57 26.53 24.91 19.99 123 Kazakhstan 29.76 9.31 19.99 25.61 25.80 34.92 124 Nigeria 29.74 28.91 29.34 31.23 17.97 9.78 125 Tunisia 29.50 5.77 18.16 28.48 15.75 27.81 126 Kosovo (Disputed Territory) 29.40 8.80 19.56 26.86 21.10 40.14 127 Ukraine 29.21 8.74 19.43 24.34 23.72 30.10 128 Syria 29.03 5.68 17.87 28.38 23.48 8.08 129 Nepal 28.86 4.54 17.24 26.45 19.68 20.63 130 Algeria 28.31 5.01 17.18 29.09 14.98 24.77 131 Zambia 28.06 6.75 17.88 27.12 16.18 59.47 132 Georgia 28.05 9.42 19.15 24.37 24.22 25.67 133 Uzbekistan 27.12 8.06 18.01 23.91 21.43 21.96 134 Afghanistan 26.33 3.85 15.59 19.30 16.98 26.58 135 India 25.16 5.77 15.90 26.26 17.66 47.13 136 Kyrgyzstan 22.98 7.43 15.55 20.57 19.19 22.01 137 Libya 22.32 5.68 14.37 25.30 13.31 31.81 138 Pakistan 21.59 4.37 13.36 19.06 17.24 27.28`33:[] 2f:{"title":"Interactive Vertical Bar Chart","cells":[{"id":0,"value":"md`# Interactive Vertical Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md `This visualization is an **update** on my [snapshot of the 10 mosts expensive countries to live in anno 2021](https://observablehq.com/@jannespeeters/cost-of-living-index-by-country-2021). The chart will redraw when the x-value is changed. Source: https://www.numbeo.com/cost-of-living/rankings_by_country.jsp`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"margins = ({right: 20, bottom: 50, left: 70, top: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"chartWidth = width - margins.right - margins.left","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"chartHeight = height - margins.top - margins.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"color = \"#800080\" // purple","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`### Values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"x = d => Number(d[value])","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"y = d => d.Country","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"xScale = d3.scaleLinear().domain([0, d3.max(data, x)]).range([0, chartWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"yScale = d3.scaleBand().domain(data.map(y)).range([0, chartHeight]).padding(.05)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"colorScale = d3.scaleLinear().domain([0, d3.max(data, x)]).range([0,1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"md `### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"data = d3.tsvParse(rawData).sort((a,b) => d3.descending(Number(a[value]),Number(b[value]))).filter((d,i) => i < 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}