30:T5f8,display = { var images = vl.hconcat( makeCountryComparison("female", "https://appetizingdata.com/wp-content/uploads/2024/03/silhouette-1603286_960_720.png"), makeCountryComparison("male", "https://appetizingdata.com/wp-content/uploads/2024/03/silhouette-3073924_960_720.png") ) .title({ text: "Comparison of height in 1996", fontSize: 13 }) var lines = vl.hconcat( makeTimeComparison("female", selectCountry1, "https://appetizingdata.com/wp-content/uploads/2024/03/silhouette-1603286_960_720.png"), makeTimeComparison("female", selectCountry2, "https://appetizingdata.com/wp-content/uploads/2024/03/silhouette-1603286_960_720.png"), makeTimeComparison("male", selectCountry1, "https://appetizingdata.com/wp-content/uploads/2024/03/silhouette-3073924_960_720.png"), makeTimeComparison("male", selectCountry2, "https://appetizingdata.com/wp-content/uploads/2024/03/silhouette-3073924_960_720.png"), ) .title({ text: "Growth in height since 1896", fontSize: 13 }) return vl.vconcat(images, lines) .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:T475,makeCountryComparison = function(Sex, url) { var images = vl.markImage({ opacity: 0.70 }) .data(data .filter(d => d.Entity==selectCountry1 || d.Entity==selectCountry2) .filter(d => d.Year=="1996-01-01") .filter(d => d.sex==Sex) ) .encode( vl.x() .fieldN("Entity") .axis({ title: null, grid: false, offset: 12, labelAngle: 0, ticks: false }), vl.y() .fieldQ("height") .scale({ domain: [0,200], }) .axis({ title: "height in cm", tickCount: 100, }), vl.url() .value(url), ) var text = vl.markText({ yOffset: -10 }) .data(data .filter(d => d.Entity==selectCountry1 || d.Entity==selectCountry2) .filter(d => d.Year=="1996-01-01") .filter(d => d.sex==Sex) ) .encode( vl.x() .fieldN("Entity"), vl.y() .fieldQ("height"), vl.text() .fieldN("heightText"), ) return vl.layer(images, text) .width(300) .height(320) }32:Ta92,makeTimeComparison = function(Sex, Country, url) { var seriesLine = vl.markLine() .data(data .filter(d => d.Entity==Country) .filter(d => d.sex==Sex) ) .encode( vl.x() .fieldT("Year") .timeUnit("year") .scale({ domain: ["1896-01-01","2026-01-01"], }) .axis({ title: "Year", grid: false, labelAngle: -45, tickCount: 5, }), vl.y() .fieldQ("height") .scale({ domain: [140,200], }) .axis({ title: "heigh in cm", tickCount: 25, }), ) var seriesTextRel = vl.markText({ yOffset: -30, xOffset: 10 }) .data(data .filter(d => d.Entity==Country) .filter(d => d.sex==Sex) .filter(d => d.Year=="1996-01-01") ) .encode( vl.x() .fieldT("Year") .timeUnit("year"), vl.y() .fieldQ("height"), vl.text() .fieldN("relText") ) var seriesTextDiff = vl.markText({ yOffset: -15, xOffset: 10 }) .data(data .filter(d => d.Entity==Country) .filter(d => d.sex==Sex) .filter(d => d.Year=="1996-01-01") ) .encode( vl.x() .fieldT("Year") .timeUnit("year"), vl.y() .fieldQ("height"), vl.text() .fieldN("diffText") ) var seriesPoint = vl.markPoint({ size: 80 }) .data(data .filter(d => d.Entity==Country) .filter(d => d.sex==Sex) .filter(d => d.Year=="1996-01-01") ) .encode( vl.x() .fieldT("Year") .timeUnit("year"), vl.y() .fieldQ("height"), ) var seriesImage = vl.markImage({}) .data(data .filter(d => d.Entity==Country) .filter(d => d.sex==Sex) .filter(d => d.Year=="1896-01-01" || d.Year=="1996-01-01") ) .encode( vl.x() .fieldT("Year") .timeUnit("year") .scale({ domain: ["1896-01-01","1996-01-01"], }) .axis({ title: "Year", grid: false, labelAngle: 0, ticks: false, }), vl.y() .fieldQ("height") .scale({ domain: [0,200], }) .axis({ title: null, tickCount: 40, }), vl.url() .value(url), ) return vl.layer(seriesLine, seriesTextRel, seriesTextDiff, seriesPoint) // .resolve({ // "axis": {"y": "independent", "x": "independent"}, // "scale": {"y": "independent", "x": "independent"} // }) .width(110) .height(100) }33:T400, 34:[{"id":"52bfb1e72183d3fab7cacdeae668eef07addbcc2d9ed144a11e793cdbdd8c71769f3ac050a0b3a32c54b9d5d3116c89f623e0d563149fb4c3b67fd99d76c7246","href":"https://static.observableusercontent.com/files/52bfb1e72183d3fab7cacdeae668eef07addbcc2d9ed144a11e793cdbdd8c71769f3ac050a0b3a32c54b9d5d3116c89f623e0d563149fb4c3b67fd99d76c7246","name":"average-height-by-year-of-birth.csv","type":"text/csv","lastModified":1671618258786.266,"size":890107},{"id":"5f368f8166e066304c6e64c45695dae421fff24d5646247420da6823105dd78500d90a4bcc3c598b6d46e940092c4be13070c560fcc018484cc3db6f7ef9c780","href":"https://static.observableusercontent.com/files/5f368f8166e066304c6e64c45695dae421fff24d5646247420da6823105dd78500d90a4bcc3c598b6d46e940092c4be13070c560fcc018484cc3db6f7ef9c780","name":"export@3.csv","type":"text/csv","lastModified":1671705175497.012,"size":3281690},{"id":"afa398e34b9c0ff9f4e570e93e6d7fa3c910b6ad48a60525eb0ddc102bbe9dc535f1c99bdfe800ad5a0410ce246d25d1df183b47ccee65da1ce2cc2215da0f6c","href":"https://static.observableusercontent.com/files/afa398e34b9c0ff9f4e570e93e6d7fa3c910b6ad48a60525eb0ddc102bbe9dc535f1c99bdfe800ad5a0410ce246d25d1df183b47ccee65da1ce2cc2215da0f6c","name":"worstpractice2.png","type":"image/png","lastModified":1671652840597.662,"size":108250}] 2e:{"title":" Radical Makeovers II - Unshrinking The World ","cells":[{"id":0,"value":"# Radical Makeovers II - Unshrinking The World \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. Today's chart has been ridiculed a lot on Twitter and surprisingly there seems to be more than version of this circling around.^{[1](https://econtwitter.net/@AReinstaller/109562053760129604), [2](https://twitter.com/jessenleon/status/1606172713961197569)} We will go with the graph constituting the original sin:","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"Breaking Tufte's first principle in this kind of manner is truly spectacular. Be reminded:
\n\n> The representation of numbers, as physically measured on the surface of the graph itself, should be directly proportional to the numerical quantities represented. \n> \n> Edward Tufte\n","pinned":false,"hidden":false,"mode":"md"},{"id":530,"value":"Although I am not a hardliner on this concept, it is easy to see why it should be interpreted as a strict rule in this case. Also, we should get rid of the highly stylized and somewhat \"overgendered\" depiction of women in this chart. We get:","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"viewof selectCountry1 = Inputs.select(new Set(namesCountries), {label: \"Country 1\", value: \"Netherlands\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof selectCountry2 = Inputs.select(new Set(namesCountries), {label: \"Country 2\", value: \"South Korea\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"Furthermore, we add the growth of height over the past century beneath the original chart. This puts the variation of height over countries into the context of the variation of height over time. This time we seemingly break Tufte's principle and not include zero on the y-axis. Notice however, that we are using the same scaling as in the graph above, thus aligning the growth in height with the impression of height obtained from the first graph in context.","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"## Data and Code","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"makeWidth = function(inputWidth) {\n if (inputWidth<1200) {\n return Math.sqrt(inputWidth+200)*10\n }\n if (inputWidth<1400) {\n return Math.sqrt(inputWidth+140)*11\n }\n if (inputWidth<1680) {\n return Math.sqrt(inputWidth+80)*12\n }\n else {\n return Math.sqrt(inputWidth)*13\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"namesYears = data.map(d => d.Year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"namesCountries = data.map(d => d.Entity)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = FileAttachment(\"export@3.csv\").csv({typed: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"$33","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}