3f:null 40:["$","title",null,{"children":"Lab 6 - Time-Oriented Data | Gavin Gosling | Observable"}] 46:Tc46,md ` #### 3. Create a function that displays Life Expectancy vs GDP per Capita for an array of records. The size of a data point should be proportional to Population. The colour should encode Continent. ##### 3.1 Create a function with the following structure. \`\`\` function plot(records){ } \`\`\` ##### 3.2 Create scales for every mapping of continuous attributes (life expectancy to y position, GDP per capita to x position, population to radius). \`\`\` var yScale = d3.scaleLinear() .domain(d3.extent(records, function(record){ return record.lifexp; })) .range([450, 20]); // yScale(records[0].lifexp) // testing the scale \`\`\` It’s a good idea to use a Log scale for population. For x and y, use ***d3.scaleLinear***. *Many examples containing scales and selections can be found in the [first d3 intro lecture](http://vialab-collins.science.uoit.ca/d3-intro-one/). D3 scales are also well documented [here](https://github.com/d3/d3-scale).* ##### 3.3 Create an ordinal scale for color (which will encode continent). This scale is different from the others because both the domain and range are discrete. \`\`\` d3.scaleOrdinal() .domain(arrayOfDistinctContinentValues) // e.g. [“Africa”,...] .range(arrayOfColors); // one colour for each continent \`\`\` *To easily extract the distinct values of an array, you can pass the array to Set, then back to Array with the spread operator (...). Of course, you can accomplish this in many other different ways.* \`\`\` var arr = new Set([1,1,1,1,1,2,4,4,5]); var uniq = [...arr]; // [1,2,4,5] \`\`\` ##### 3.4 Create and/or Update and/or Remove elements. index.html has an SVG element already defined. Select this element, then select all circles inside it and bind the records to it. Store this selection in a variable. ***The highlighted variables or values below should be replaced with the name of the appropriate variables.*** \`\`\` var selection = d3.select(‘svg’) .selectAll(‘element’) .data(dataArray); \`\`\` Use the enter selection to create elements, if needed: \`\`\` selection.enter() .append(‘element’) .attr(‘attrName’, function(d){ return aScale(d.anAttribute); }); // chain .attr calls until you have set all attributes // call .style if you need to set a CSS attribute \`\`\` Remove elements when needed \`\`\` selection.exit().remove(); \`\`\` With the code blocks above, our plot function will treat every possible case. When called the first time (e.g., for the first year, 1960), the block using selection.enter will make sure new DOM elements are created. When called a second time (e.g., for the next year, 1961), the update block will ensure the existing elements (created in the first call) are repositioned and resized. The enter selection will ensure new elements are created, if this time the array of records is larger (e.g., there’s a new country), and the exit selection will remove elements if the new array is shorter (e.g, a country disappeared, as it happened with USSR). `47:T91f,md ` #### 5. Call plot(recordsByYear[1960]) from your d3.csv callback function. This should display a scatterplot. #### BONUS TASK - ANIMATE THE PLOT ACROSS THE YEARS Animations in d3 are called transitions. Any attribute set on a transition is interpolated from the old value to the new over a defined duration, and after a defined delay *(0 by default)*. For instance, in the code below, all elements under the transition will transition smoothly to the new position we set: \`\`\` circles.transition() .attr(‘cx’, function(d){ calculate and return new value }); \`\`\` Most of the time, all we need to do is add a call to ***.transition()*** before the calls to ***.attr()***. Additionally, in order to animate yearly changes in the Gapminder data, we need to make repeated calls to plot, one for each year. These calls should be chained so that a call for year 1974, for instance, only occurs after the transition for year 1973 has finished. ** Fortunately, d3.transition triggers an event when a transition ends. We can listen to this event; when it is fired, we know it is time to plot the next year. However, there is a catch: the event is fired for every element of a selection. We will only know when all elements have finished if we count the events. The skeleton goes like this: ** \`\`\` var counter = data.length; // in our case, this is 83 (countries) selection.transition() .attr(...) .attr(...) .on(‘end’, function(){ // this function is called upon ‘end’ counter -= 1; if (counter == 0) { // if animation ended for all elements // increment year (you may want to have year as a global) // call plot(recordsByYear[newYear]) } }); \`\`\` If you want want to make the function plot agnostic of application state (that’s good design), you can require a callback: \`\`\` function plot(records, callback){...} \`\`\` Then instead of calling plot when the transition ends, you call back the supplied function. ### SUBMISSION 1. Download the code by clicking the menu button at the top of the page, and enable link sharing. 2. Rename the downloaded code zip folder to *Lab6-firstName-lastName.zip*, and submit the file with your published observable link to the BlackBoard dropbox. `48:T4ac, function plot(records){ var yScale = d3.scaleLinear() .domain(d3.extent(records, function(record){ return record.lifexp; })) .range([450, 20]); var rScale = d3.scaleLog() .domain(d3.extent(records, function(record){ return record.pop; })) .range([1,15]); var xScale = d3.scaleLinear() .domain(d3.extent(records, function(record){ return record.gdpcap; })) .range([20, 450]); var continents = new Set(records.map(d => d.continent)) var unique_continents = [...continents] var cScale = d3.scaleOrdinal() .domain(unique_continents) .range(d3.schemeCategory10); d3.select('svg') .append('g') .selectAll("dot") .data(records) .enter() .append("circle") .attr("cx", function (d) { return xScale(d.gdpcap); } ) .attr("cy", function (d) { return yScale(d.lifexp); } ) .attr("r", function (d) { return rScale(d.pop); }) .style("fill", function (d) { return cScale(d.continent); }) d3.select('svg') .append('g') .attr("transform", `translate(20,0)`) .call(d3.axisLeft(yScale)); d3.select('svg') .append('g') .attr("transform", `translate(20,450)`) .call(d3.axisBottom(xScale)); } 49:T73a,function animated_plot(records, update) { // Y Scale var yScale = d3.scaleLinear() .domain(d3.extent(records, function(record){ return record.lifexp; })) .range([450, 20]); // Radius Scale var rScale = d3.scaleLog() .domain(d3.extent(records, function(record){ return record.pop; })) .range([1,15]); // X Scale var xScale = d3.scaleLinear() .domain(d3.extent(records, function(record){ return record.gdpcap; })) .range([20, 450]); // Color Scale var continents = new Set(records.map(d => d.continent)) var unique_continents = [...continents] var cScale = d3.scaleOrdinal() .domain(unique_continents) .range(d3.schemeCategory10); // Clear d3.select("svg") .selectAll("g") .html(""); // Enter d3.select('svg') .append('g') .selectAll("dot") .data(records) .enter() .append("circle") .attr("cx", function (d) { return xScale(d.gdpcap); } ) .attr("cy", function (d) { return yScale(d.lifexp); } ) .attr("r", function (d) { return rScale(d.pop); }) .style("fill", function (d) { return cScale(d.continent); }) .transition() .duration(1000) .on("end", update); // Update d3.select('svg') .selectAll('circle') .data(records) .transition() .attr("cx", function (d) { return xScale(d.gdpcap); } ) .attr("cy", function (d) { return yScale(d.lifexp); } ) .attr("r", function (d) { return rScale(d.pop); }) .style("fill", function (d) { return cScale(d.continent); }) .on("end", update); // Axes d3.select('svg') .append('g') .attr("transform", `translate(20,0)`) .call(d3.axisLeft(yScale)); d3.select('svg') .append('g') .attr("transform", `translate(20,450)`) .call(d3.axisBottom(xScale)); // Exit d3.select('svg') .exit() .remove() } 4a:[{"id":"c3efadd0da84a8ac2299baf18ca945b57e6f4e7a79579ce5c6105675c65c7cf9b36f18aeb79a80320213a8f453c547bbe55499a6e97e829855c7f2465a28e1f7","href":"https://static.observableusercontent.com/files/c3efadd0da84a8ac2299baf18ca945b57e6f4e7a79579ce5c6105675c65c7cf9b36f18aeb79a80320213a8f453c547bbe55499a6e97e829855c7f2465a28e1f7","name":"gapminder.csv","type":"text/csv","lastModified":1582740911615.584,"size":242280}] 44:{"id":"c7b2fb78c3bb9e1c","slug":"lab-6-time-oriented-data","title":"Lab 6 - Time-Oriented Data","thumbnail":"7d85cec338401d30d0a7da3a0573e514684956903d996e3be9dc111f380996d4","access_level":"public","create_time":"$D2020-02-26T18:15:11.615Z","update_time":"$D2020-03-08T00:32:42.742Z","view_time":null,"first_public_time":"$D2020-02-27T01:20:08.225Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"32614f766afdec6c","login":"gavingosling","name":"Gavin Gosling","avatar_url":"https://avatars-next.observableusercontent.com/ffbdc2d07067b38d59bf3f0cef6183d447eca16a5dae8681f0312144677fa799","tier":"starter_2024","bio":"","following":false},"version":231,"publish_version":231,"role":null,"authored":false,"authors":[{"type":"individual","id":"91b56c59cf4521a7","login":"gavingosling","name":"Gavin Gosling","avatar_url":"https://avatars-next.observableusercontent.com/ffbdc2d07067b38d59bf3f0cef6183d447eca16a5dae8681f0312144677fa799","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"91b56c59cf4521a7","login":"gavingosling","name":"Gavin Gosling","avatar_url":"https://avatars-next.observableusercontent.com/ffbdc2d07067b38d59bf3f0cef6183d447eca16a5dae8681f0312144677fa799","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lab 6 - Time-Oriented Data","cells":[{"id":0,"value":"md`# Lab 6 - Time-Oriented Data\n### PURPOSE\nCreate an animated visualization of the Gapminder dataset Exercise using marks and channels in D3. Solidify understanding of d3 transitions.\n\n### TASKS\nThe Gapminder dataset contains economic indicators for countries over the years.\n\nOpen *gapminder.csv* with your tool of choice or explore it within the Observable notebook, and familiarize yourself with the dataset attributes.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md `\n#### 1. Load the dataset\nUse ***d3.csv*** to parse the dataset. ***d3.csv*** makes a HTTP GET request to a URL pointing to a csv file, then transforms the file into an array of objects, each of which represents a single row.\n\nThen parse all numerical attributes to Number. ***d3.csv*** assumes all values are strings. This can cause bugs later when you perform calculations.\n\n\\`\\`\\`\n records.forEach(function(record){\n record.year = Number(record.year);\n // continue for all other numerical attributes\n });\n\\`\\`\\`\n\n*The code above uses Array’s forEach function. Feel free to write a traditional for loop\ninstead.*\n\n**Note that this function is asynchronous; that is, the result will be passed to a callback. As a consequence, any code placed after the call will not have access to the\ndata. Data access is guaranteed only within the callback.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md `\n#### 2. Group the records by year\n\\`\\`\\`\n let recordsByYear = {};\n records.forEach(function(record){\n let year = record.year;\n if (recordsByYear[year] == undefined){\n recordsByYear[year] = [];\n }\n recordsByYear[year].push(record);\n });\n\\`\\`\\`\n\n*The code above uses Array’s forEach function. Feel free to write a traditional for loop\ninstead.*\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md `\n#### 4. Create axes\nIn D3, axes are created from scales:\n\\`\\`\\`\n var yAxis = d3.axisLeft(yScale);\n var xAxis = d3.axisBottom(xScale);\n\\`\\`\\`\n\nThis is very convenient because the scales are already defined.\nThe axis is then formed by creating an SVG group and calling the axis on the corresponding selection.\n\n\\`\\`\\`\n d3.select('svg')\n .append(\"g\")\n .attr(\"transform\", “translate(30,0)\")\n .call(yAxis);\n\\`\\`\\`\n\nIn the code above, yAxis will “create itself” inside the SVG group (“g element”). It knows\nthe proper axis values from the scale we passed at creation time. Note the transform\nattribute. It sets the offset of the axis.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"html\n`\n\n\n\n \n\n\n

Lab 6 - Time-Oriented Data

\n \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"csvUrl = FileAttachment(\"gapminder.csv\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3.csv(csvUrl).then(function(records){\n records.forEach(function(record){\n record.year = Number(record.year);\n record.gdpcap = Number(record.gdpcap);\n record.lifexp = Number(record.lifexp);\n record.pop = Number(record.pop);\n });\n \n let recordsByYear = {};\n records.forEach(function(record){\n let year = record.year;\n if (recordsByYear[year] == undefined){\n recordsByYear[year] = [];\n }\n recordsByYear[year].push(record);\n });\n \n //Plot\n //plot(recordsByYear[1960]);\n \n // Start at beginning \n var current = 1960;\n \n // Length of counting \n var counter = recordsByYear[current].length;\n \n // Animated Plot\n animated_plot(recordsByYear[current], function update() {\n counter -= 1;\n if (counter == 0) {\n current++;\n var record = recordsByYear[current];\n if (record.length > 0) {\n counter = record.length;\n animated_plot(record, update);\n }\n }\n });\n \n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"csvData = FileAttachment(\"gapminder.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"