2c:null 2d:["$","title",null,{"children":"Assignment 1 | V | Observable"}] 32:T6de,style = html``33:[] 30:{"id":"e4cbbbba9652d84c","slug":"assignment-1","title":"Assignment 1","thumbnail":"8c041fbd9cad4e4abaee288bd0a31504c6a9ad9c8f1b3211a7161f5dcd1b7e9a","access_level":"public","create_time":"$D2021-11-15T12:02:34.832Z","update_time":"$D2021-12-10T08:29:12.801Z","view_time":null,"first_public_time":"$D2021-11-25T22:04:15.106Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9abd21d70567e0a7","login":"nylunvik","name":"V","avatar_url":"https://avatars-next.observableusercontent.com/a741381909495aa156da244c4deb605c8abef4ec943c3868463ccd51a611f87f","tier":"starter_2024"},"version":761,"publish_version":761,"role":null,"authored":false,"authors":[{"type":"individual","id":"7291d824c7bde662","login":"nylunvik","name":"V","avatar_url":"https://avatars-next.observableusercontent.com/a741381909495aa156da244c4deb605c8abef4ec943c3868463ccd51a611f87f","tier":null}],"members":[{"type":"individual","id":"7291d824c7bde662","login":"nylunvik","name":"V","avatar_url":"https://avatars-next.observableusercontent.com/a741381909495aa156da244c4deb605c8abef4ec943c3868463ccd51a611f87f","tier":null,"role":"editor"}],"comments":[{"id":"98ca0c46358a9ccf","reply_to_id":null,"content":"I like your creative approach to it and all is done as required, good job","create_time":"$D2021-12-23T12:13:52.172Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 1","cells":[{"id":0,"value":"# Assignment 1\nViktor Nylund\n\nThis notebook contains 4 different visualizations, using data that details the average life expectancy of different countries across the world. \n\nThe first two visualizations describe the life expectancy of different regions of the world, using barcode charts with transitions and axes. \nThe following two describe the change in life expectancy between 1960 and 2015. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"# # 1. Visualization, barcode chart with transitions\nThe visualization first shows the life expectancy of the entire world, with low life expectancy at the left and higher to the right. \nThe first transition expands the data by scaling it to fit the entire window. \nThe second transition separates the values depending on region, of which there are eight. \n\nMost of the values are higher than the middle-point and are not drastically different between regions. Some of the regions do contain much lower values than other though.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"barcode1 = {\n \nconst svg = d3.select(DOM.svg(w, h));\n \nsvg.selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", d => d[\"Life Expectancy\"])\n .attr(\"y\", 0)\n .attr(\"width\", 1.5)\n .attr(\"height\", h)\n .style(\"fill\", d => scale.c(d[\"Life Expectancy\"]))\n // 1. transition\n .transition()\n .duration(3000)\n .attr(\"x\", d => scale.xLife(d[\"Life Expectancy\"]))\n // 2. transition\n .transition()\n .duration(6000)\n //.delay((d,i) => i*0.3 )\n .attr(\"y\", d => scale.yReg(d.Region))\n .attr(\"height\", scale.yReg.bandwidth);\n\nreturn svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"# 2. Visualization, barcode chart with axes\nThe second visualization has added axes to show which the relevant regions are and the actual value of their average life expectancy. \nAll of the countries in Latin America & Caribbean, Europe & Central Asia and North America have higher values than 40. \nOnly North America has only values over 60 and only East Asia & Pacific have values under 20. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"barcode2 = {\n \nconst svg = d3.select(DOM.svg(w, h));\n\nsvg.selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", d => scale.xLife(d[\"Life Expectancy\"]))\n .attr(\"y\", d => scale.yReg(d.Region))\n .attr(\"width\", 1.5)\n .attr(\"height\", scale.yReg.bandwidth)\n .style(\"fill\", d => scale.c(d[\"Life Expectancy\"]));\n\nsvg.append(\"g\")\n .call(xAxis);\n\nsvg.append(\"g\")\n .call(yAxis);\n\nreturn svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"# 3. Visualization, scatter plot with transitions\nThe third visualization also shows the average life expectancy of the entire world, but as circles where lower values are larger and the y-axis is the year. Recent years are at the top. \nThe first transition turns the x-axis scaling from linear into logarithmic. \nAfterwards an \"!\" shows up over lower values. \n\nThere are a few peculiar circular shapes around the lower values, where life expectancy suddenly sinks and fairly quickly stabilizes. \nThere seems to be a linear correlation between life expectancy and time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"scatter1 = {\n\nconst svg = d3.select(DOM.svg(w, h));\n\nsvg.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => scale2.xLife(d[\"Life Expectancy\"]))\n .attr(\"cy\", d => scale2.yYear(d.Year))\n .attr(\"r\", d => scale2.rLife(d[\"Life Expectancy\"]))\n .attr(\"opacity\", 0.8)\n .style(\"fill\", d => scale2.c(d[\"Life Expectancy\"]))\t\n .transition()\n .duration(5000)\n .attr(\"cx\", d => scale2.logxLife(d[\"Life Expectancy\"]));\n\n//let lifeStr = data[\"Life Expectancy\"];\n \nsvg.selectAll(\"text\")\n .data(data)\n .join(\"text\")\n .filter(d => d[\"Life Expectancy\"] < 31)\n .text(\"!\")\n .style(\"fill\", \"white\")\n .style(\"font-size\", \"10px\")\n .attr(\"x\", d => scale2.logxLife(d[\"Life Expectancy\"]-0.1))\n .attr(\"y\", d => scale2.yYear(d[\"Year\"]-0.5))\n .attr(\"opacity\", 0)\n .transition()\n .duration(1000)\n .delay(3000)\n .attr(\"opacity\", 1);\n\nreturn svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"# 4. Visualization, scatter plot with axes\nThe second visualization has added axes to show the years and the actual value of the average life expectancy.\n\nThe peculiar circular shapes mentioned earlier peak around 1977, 1993 and 1995. Between 1975 and 1980 is the only time when life expectancy drops below 25. \nThere is also indeed a linear correlation between life expectancy and time. Recent years have generally higher life expectancy-values and have less spread of values. The values generally stay above 30 and as of 2005 never go below 40. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"scatter2 = {\n\nconst svg = d3.select(DOM.svg(w, h));\n\nsvg.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => scale2.logxLife(d[\"Life Expectancy\"]))\n .attr(\"cy\", d => scale2.yYear(d.Year))\n .attr(\"r\", d => scale2.rLife(d[\"Life Expectancy\"]))\n .attr(\"opacity\", 0.8)\n .style(\"fill\", d => scale2.c(d[\"Life Expectancy\"]));\n\nsvg.selectAll(\"text\")\n .data(data)\n .join(\"text\")\n .filter(d => d[\"Life Expectancy\"] < 31)\n .text(\"!\")\n .style(\"fill\", \"white\")\n .style(\"font-size\", \"10px\")\n .attr(\"x\", d => scale2.logxLife(d[\"Life Expectancy\"]-0.1))\n .attr(\"y\", d => scale2.yYear(d[\"Year\"]-0.5));\n\nsvg.append(\"g\")\n .call(xAxis2)\n .style(\"stroke-width\", \"0\");\n\nsvg.append(\"g\")\n .call(yAxis2)\n .style(\"stroke-width\", \"0\");\n\nreturn svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"# Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"data = d3.csv(\n\"https://gist.githubusercontent.com/sandravizz/e56d0542474500f68a000391628362c6/raw/4e48fd6eec7de8e4a19ebc62fea1f4f9c427a91d/Life%2520expectancy%2520by%2520country%2520and%2520gender\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"data[20]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"extent = d3.extent(data, d => d[\"Life Expectancy\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`## Datset info\nCountry Code, **categorial**
\nCountry Name, **categorial**
\nRegion, **categorial**
\nIncome Group, **ordinal**
\nGender, **categorial**
\nYear **categorial and numeric**
\nLife Expectancy **numeric**
\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"region = data.map(d => d[\"Income Group\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"region_group = d3.group(data, d => d.Region)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"# Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"scale = {\n\n let xLife = d3.scaleLinear()\n .domain([0, d3.max(data, d => d[\"Life Expectancy\"])])\n .range([margin.left, w - margin.right]);\n\n const yReg = d3.scaleBand()\n .domain(data.map(d => d.Region))\n .rangeRound([margin.top, h - margin.bottom])\n .padding(0.1);\n\n const c = d3.scaleLinear()\n .domain(d3.extent(data, d => d[\"Life Expectancy\"]))\n .range([\"#CC5533\", \"#33cc55\"]);\n\n return {xLife:xLife, yReg:yReg, c:c}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"scale2 = {\n\n let xLife = d3.scaleLinear()\n .domain(d3.extent(data, d => d[\"Life Expectancy\"]))\n .range([margin.left, w - margin.right]);\n\n const logxLife = d3.scaleLog()\n .domain(d3.extent(data, d => d[\"Life Expectancy\"]))\n .rangeRound([margin.left, w - margin.right]);\n \n let yYear = d3.scaleLinear()\n .domain(d3.extent(data, d => d.Year))\n .range([h-margin.bottom, margin.top]);\n\n const rLife = d3.scaleSqrt()\n .domain(d3.extent(data, d => d[\"Life Expectancy\"]))\n .range([10, 0.2]);\n\n const c = d3.scaleLinear()\n .domain(d3.extent(data, d => d[\"Life Expectancy\"]))\n .range([\"#CC5533\", \"#33cc55\"]);\n\n return {xLife:xLife, logxLife:logxLife, rLife:rLife, yYear:yYear, c:c}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"# Axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"xAxis = g => g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0, ${h - margin.bottom})`)\n .call(d3.axisBottom(scale.xLife)\n //.scale(scale.xLife)\n .ticks(10)\n .tickSize(5)\n .tickPadding(5));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"xAxis2 = g => g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0, ${h - margin.bottom})`)\n .call(d3.axisBottom(scale2.logxLife)\n //.scale()\n .tickValues([0, 10, 20, 30, 40, 50, 60, 70, 80, 90])\n .ticks(10)\n .tickSize(5)\n .tickPadding(10)\n .tickFormat(d3.format(\".2\")));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"yAxis = g => g\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\",`translate(${margin.left},0)`)\n .call(d3.axisLeft(scale.yReg)\n //.scale(scale.yReg)\n .ticks(10)\n .tickSize(-w)\n .tickPadding(5));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"yAxis2 = g => g\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\",`translate(${margin.left},0)`)\n .call(d3.axisLeft(scale2.yYear)\n //.scale()\n .ticks(10)\n .tickSize(-w)\n .tickPadding(10)\n .tickFormat(d3.format(\".4\")) );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"h = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"w = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"margin = ({top: 30, right: 5, bottom: 30, left: 160})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"STYLE, basis from SANDRA BECKER","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"