30:T12ea,display = { var select = vl .selectMulti("select") .fields("Area") .toggle("event") .bind("legend") .init(["Ecuador","Brazil","Colombia"]) .nearest(false); var lines = vl.markLine({ interpolate: "natural" }) // {cursor: "pointer"} .data(data .filter(d => d.Element=="Export Quantity") ) .params(select) .transform({"filter": {"param": "select"}}) .encode( vl.x() .fieldT("Year") .timeUnit("year") .axis({ title: null, grid: false, tickMinStep: 10, labelAngle: -45 }), vl.y() .fieldQ("Value") .axis({ title: "banana exports in tons" }), vl.color() .fieldN("Area") .scale({scheme: "tableau20"}) // scheme: "tableau20" range: ["#00dca6", "#36b4d3", "#6a66a3", "#c4c4c4", "#d53f4c"] .legend({ orient: "top", direction: "vertical", symbolType: "stroke", columns: legendColumns(), values: namesCountries, symbolLimit: 300, title: "click to select a country", }), vl.strokeWidth() .if(select, vl.strokeWidth().value(1.75)).value(1), vl.opacity() .if(select, vl.opacity().value(1)).value(0), ) .width(makeWidth(width)/2.2) .height(210) var linesGray = vl.markLine() .data(data .filter(d => d.Element=="Export Quantity") ) .encode( vl.x() .fieldT("Year") .timeUnit("year"), vl.y() .fieldQ("Value"), vl.color() .fieldN("Area") .scale({range: ["gray"]}) ) var foreign = vl.data(data).key('id').fields('id','Area'); var map = vl.layer( vl.markGeoshape({ fill: '#e6f3ff' }) .data(vl.sphere()), vl.markGeoshape({ stroke: '#ffffff', strokeWidth: 0.75 }) .data(vl.graticule()), vl.markGeoshape() .data(vl.topojson(world).feature('countries')) .encode( vl.color() .value("white"), vl.stroke() .value("gray"), vl.strokeWidth() .value(0.25), ), vl.markGeoshape() .data(vl.topojson(world).feature('countries')) .transform(vl.lookup('id').from(foreign)) .params(select) .encode( vl.color() .if(select, vl.color().fieldN("Area").scale({scheme: "category10"})) .value("transparent"), vl.stroke() .if(select, vl.value("black")) .value("transparent"), vl.strokeWidth() .if(select, vl.value(0.75)) .value(0), ), ) .project(vl.projection('equalEarth') .rotate([70, 0.0]) .center([-150, 77]) // .parallels([35.0, 65.0]) // .scale(110) ) .width(makeWidth(width)/2) .height(220) var bars = vl.markBar({ stroke: "black" }) .data(data .filter(d => d.Element=="Export Quantity") .filter(d => d.Year2==2020) ) .params(select) // .transform({"filter": {"param": "select"}}) .encode( vl.x() .bin({maxbins: 80, minstep: 1}) .fieldQ("Value") .axis({ title: "distribution of bana exports in tons (2020)", orient: "top", }), vl.y({ aggregate: "count" }) .scale({ reverse: true }) .axis({ title: null, labels: false, ticks: false, grid: false, domain: false, }), vl.tooltip("Area"), vl.strokeWidth() .if(select, vl.value(1.5)) .value(0.75), vl.color() .fieldN("Area") .scale({scheme: "category10"}), vl.opacity() .if(select, vl.opacity().value(1)).value(0.25), ) .width(makeWidth(width)) .height(90) var bananas = vl.markImage({ opacity: 0.5, width: 75, height: 50 }) .data([{"y": 8, "Value": 7500000}]) .encode( vl.x() .fieldQ("Value") .axis({ // ticks: false, grid: false, }), vl.y() .fieldQ("y"), vl.url() .value("https://appetizingdata.com/wp-content/uploads/2022/12/Bananas.svg"), ) .width(makeWidth(width)) .height(90) return vl.vconcat(vl.hconcat(lines, map), vl.layer(bananas, bars)) // .resolve({ // "legend": {"color": "independent"}, // "scale": {"color": "independent"} // }) .config({ axis: {labelFontSize: 12, titleFontSize: 12}, legend: {labelFontSize: 12, titleFontSize: 12}, header: {labelFontSize: 12}, mark: {fontSize: 12}, title: {fontSize: 12}, view: {stroke: "transparent"}, background: "transparent", padding: {"left": 5, "top": 5, "right": 5, "bottom": 5} }) .render({renderer: 'svg'}) }31:[{"id":"b5904e6690f767984db041250b0339fc95a657fadc3e2104d5b33ca79c264eeee3921104b369a37df8608a777438f1e9617e1e430df31d1c2fdbc65d7feb773a","href":"https://static.observableusercontent.com/files/b5904e6690f767984db041250b0339fc95a657fadc3e2104d5b33ca79c264eeee3921104b369a37df8608a777438f1e9617e1e430df31d1c2fdbc65d7feb773a","name":"worstpractice.png","type":"image/png","lastModified":1671616107992.735,"size":212088},{"id":"7de7a5ab1d8c107a3d50f268d3e981bb3593cdacb7051915daeefc16fd2c2753ac2166daf903e7bb2fa551bd66197e54133ecf3db8e804c3a7c2403e67b52ebe","href":"https://static.observableusercontent.com/files/7de7a5ab1d8c107a3d50f268d3e981bb3593cdacb7051915daeefc16fd2c2753ac2166daf903e7bb2fa551bd66197e54133ecf3db8e804c3a7c2403e67b52ebe","name":"export@24.csv","type":"text/csv","lastModified":1672233011135.763,"size":280626},{"id":"fdca6ac52e94ea3db3596e6cc83e133e776c1c0128554e4f7a067672809395634c4ded5445425e200472f0d9c7ce8176b697745e2d918c38a5bcd61acc4d19ea","href":"https://static.observableusercontent.com/files/fdca6ac52e94ea3db3596e6cc83e133e776c1c0128554e4f7a067672809395634c4ded5445425e200472f0d9c7ce8176b697745e2d918c38a5bcd61acc4d19ea","name":"world-110m_tiny.json","type":"application/json","lastModified":1672247496738.415,"size":52477}] 2e:{"title":" Radical Makeovers I - Dr. Hochhaus' Redemption","cells":[{"id":0,"value":"# Radical Makeovers I - Dr. Hochhaus' Redemption\n\n## Redoing The Ugliest Charts In The World\n\nIn this series, we are analyzing and remaking poorly designed data visualizations found on the internet. This first installment will focus on a particularly infamous graph created by a certain Dr. Hochhaus who seems to be interested in the yearly exports of bananas by country:","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"This graph is clearly unappealing and it's difficult to enumerate all the mistakes made by its creator. Examples of these errors include the unsuccessful attempt to avoid overplotting by adding a third dimension and the use of a discrete color legend for the years. Overall, this graph is a showcase of poor design choices.","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"So what to do about it? To address the issue of depicting a large number of data points, we can introduce selection elements that allow the user to choose which data points to display. In this case, we will use a clickable legend to select specific countries. We will also switch from using space-consuming bars to lines, and limit the list of countries to the 40 with the highest exports in 2020. This allows us to present more information without overloading the visualization","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"While we could leave it at this simple line chart on the left, it makes sense to put the numbers in context. First of all, adding a map to country data is a viable option to increase the understanding of data. Keeping a consistent coloring with the legend and the line chart is important.","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"To further contextualize the data, we can add a map to show the location of the countries and a histogram at the bottom to provide a sense of the overall distribution of exports by country in 2020. Plotting the histogram across the full length of the chart helps to illustrate the concentration of exports in a few countries around the world. By highlighting the selection in both the line chart and the histogram, we create a more organized and readable visualization. While this approach leaves some white space in the bottom right corner - bananas! - it ultimately results in a more informative and visually appealing representation of the data.","pinned":false,"hidden":false,"mode":"md"},{"id":747,"value":"## Data and Code","pinned":false,"hidden":false,"mode":"md"},{"id":815,"value":"legendColumns = function() {\n if (width<1000) {\n return 3\n } \n if (width<1200) {\n return 4\n } \n if (width<1480) {\n return 5\n }\n else {\n return 8 \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"makeWidth = function(inputWidth) {\n if (inputWidth<1000) {\n return Math.sqrt(inputWidth+260)*10\n }\n if (inputWidth<1200) {\n return Math.sqrt(inputWidth+200)*12\n }\n if (inputWidth<1400) {\n return Math.sqrt(inputWidth+140)*14\n }\n if (inputWidth<1680) {\n return Math.sqrt(inputWidth+80)*16\n }\n else {\n return Math.sqrt(inputWidth)*18\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"namesSelection = Array.from((new Set(data.filter(d => d.Flag != \"other\").map(d => d.Area))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"namesCountries = Array.from((new Set(data.map(d => d.Area))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"world = FileAttachment(\"world-110m_tiny.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"data = FileAttachment(\"export@24.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":828,"value":"credits = htl.html`

\nMade on \n

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}