2f:T4b4,records_europe = { // your code here // (I provide a suggested structure, but you can destroy it if you don't like it !) let recs = [] // used to store the reorganized records let names = [] // used to store the names of already seen countries let european_countries = ["Austria", "Belarus", "Belgium", "Croatia", "Denmark", "Estonia", "Finland", "France", "Germany", "Greece"] for(let record of records){ let name = record["Country name"] // If it is a European country, do: if( european_countries.includes(name) ) { // > if it has never been seen, add a new entry {name: ..., data: []} to records and update names if( ! names.includes( name ) ) { names.push(name) recs.push( { name: name, data: [] } ) } // > add the new record to the data property of the corresponding object let index = names.indexOf(name) recs[index].data.push( { year: record["year"], corruption: record["Perceptions of corruption"]} ) // trouver name dans names -> à quelle place? // recs[ # numero de la place ].data.push( donnees ) } } return recs }30:T690,md`Interacting with users means that our programming style gets dominated by (user-triggered) events, such as clicking on a button, hovering a dot, selecting text, etc. Having code over the Internet also means that if you try to perform some actions (such as reading a file, loading an image...), you may not know exactly how long the action will take to complete. **JavaScript thus comes equipped with a system of events**, both for user actions (click here, input text there...) and for asychronous actions (download completed, image loaded...). It is thus feels quite natural to extend the concept to the rest of the code, where **events** serve as a means of coordination between **functions**. The advantage of events is that the rest of the code does not freeze when a given task takes longer than expected. But writing our own event-driven programmes also mean two main things: - we need to be able to **trigger and suscribe to our own custom events** - we have to **store the information about the state of our program somewhere the functions can access**, because it is cumbersome difficult to pass data alongside events > ⚙️ _Note that **in event programming, there is no obligation to write the code that is executed first at the top**. In many languages, one expects that the first line is run before the second line, but this is no longer needed with event programming, since each function triggers events, that in turn trigger functions, etc. This also means that complex code can rapidly become unreadable if you are not **extremely cautious about your code structure**. This is known as the [**"callback hell"**](http://callbackhell.com/)._ `31:T68d,{ const svg = d3.create("svg") .attr("height", 50) .attr("width", width) svg.append("circle").attr("cx", 20) svg.append("circle").attr("cx", 50) svg.append("circle").attr("cx", 80) svg.append("circle").attr("cx", 110) svg.append("circle").attr("cx", 140) const welcome_text = "Select a couple of circles, or:" const text = svg.append("text") .text(welcome_text) .attr("y", 30) .attr("x", 160) const selector = svg.append("text") .text("CLICK HERE TO SELECT ALL") .attr("y", 30) .attr("x", 380) .attr("cursor", "pointer") const circles = svg.selectAll("circle") .attr("cy", 25) .attr("r", 10) .attr("fill", "lightgrey") .attr("stroke", "black") .attr("stroke-width", 0.4) .attr("cursor", "pointer") function toggle(){ const circle = d3.select(this) const current_color = circle.attr("fill") circle.attr("fill", current_color == "grey" ? "lightgrey" : "grey") svg.dispatch("update") } function select_all(){ circles.transition().duration(3000).attr("fill", "grey").transition().duration(3000).attr("fill", "lightgrey") svg.dispatch("update") } function update_comment(){ const selected_circles = circles.filter( function() { return d3.select(this).attr("fill")=="grey" } ) const n = selected_circles.size() const message = n > 1 ? n + " circles selected" : n==1 ? "1 single circle selected" : welcome_text text.text(message) } circles.on("click", toggle) svg.on("update", update_comment) selector.on("click", select_all) // subscription return svg.node() }32:T47b,md` ### 3.1 Introduction **Transitions are probably _the_ most important aspect of \`d3.js\`**, that sets it aside from any other graph library. If you come from R, you may have run into \`gganimate\` and the already have a understanding at what a transition is. \`d3.js\` has an extensive module to manage interpolation between stages. An putative exemple is given here, adapted from [the documentation](https://github.com/d3/d3-transition): \`\`\`js d3.selectAll("circle") .transition() .attr("attr", "green") // Fades to green... .transition() .attr("fill", "red") // ... then red ... .attr("r", 10) // ... and simultaneously changes the radius ... .transition() .delay(1000) // ... then waits one second ... .attr("fill", "brown") // ... then brown .remove(); // ... and disappears. \`\`\` Using transitions is rather simple. You just have to add the \`.transition()\` method in between the (collection of) element(s) you want to change and the aspect that is changing. An exemple is worth a thousand words : _(You may need to rerun the cell if you don't see anything.)_ `33:T57d,{ const svg = d3.create("svg") .attr("height", 110) .attr("width", width) svg.append("text").text("Click any of the circles!").attr("x", 10).attr("y", 105) const circle1 = svg.append("circle").attr("cx", 50) const circle2 = svg.append("circle").attr("cx", 150) const circle3 = svg.append("circle").attr("cx", 250) const circle4 = svg.append("circle").attr("cx", 350) const circles = svg.selectAll("circle") // style all the circles .attr("cy", 45) .attr("r", 40) .attr("fill", "white") .attr("stroke", "black") .style("cursor", "pointer") circles.on("click", function(){ // every time one of circles is clicked, do: let random_integer1 = d3.randomUniform(0, 360)() let random_integer2 = d3.randomUniform(0, 1)() let random_color = d3.cubehelix(random_integer1, 1, random_integer2) let random_radius = d3.randomUniform(10, 45)() circle1 .attr("fill", random_color).attr("r", random_radius) // no transition circle2.transition().duration( 500).attr("fill", random_color).attr("r", random_radius) // short (0.5s) circle3.transition().duration(1000).attr("fill", random_color).attr("r", random_radius) // medium (1s) circle4.transition().duration(2000).attr("fill", random_color).attr("r", random_radius) // long (2s) }) return svg.node() }34:Tecc,{ const div = d3.create("div") const select = div.append("select").style("position", "absolute").style("top", margin.top/2+10 + "px") select.append("option").attr("value", "gdp").text("Wealth") select.append("option").attr("value", "corruption").text("Corruption") const radio = div.append("div") radio.append("input").attr("value", "true") radio.append("label").attr("for", "true").text("With transition") radio.append("input").attr("value", "false").property("checked", true) radio.append("label").attr("for", "false").text("Without") radio.selectAll("input").attr("type", "radio").attr("name", "transition") radio.selectAll("label").style("font-family", "sans-serif").style("font-size", "80%") const svg = div.append("svg") .attr("height", height) .attr("width", width) for(let record of correction_records_2019){ svg.append("circle") .attr("r", 5) .attr("cy", correction_y(record.happiness)) .attr("cx", correction_x(record.gdp)) .attr("fill", "lightgrey") .attr("stroke", "black") .attr("stroke-width", 0.4) .property("gdp", record.gdp) .property("corruption", record.corruption) } const circles = svg.selectAll("circle") const title = svg.append("text") // Move me top left ! .text("The correlation between happiness and wealth is weak...") .attr("x", width-margin.right) .attr("text-anchor", "end") .attr("y", margin.top/2) .attr("font-family", "tahoma") const source = svg.append("text") // Move me bottom right ! .text("Happiness Report (2020)") .attr("x", width - margin.right) .attr("y", height - 1) .attr("font-family", "tahoma") .attr("font-size", 8) .attr("text-anchor", "end") .attr("fill", "grey") const x_axis_y_pos = height-2*margin.bottom/3 const x_axis = svg.append("g").attr("transform", "translate(0 "+x_axis_y_pos+")") const make_x_axis = d3.axisBottom(correction_x) make_x_axis(x_axis) const x_label = x_axis.append("text") .text("Log GDP per capita") .attr("fill", "grey") .attr("y", -2) .attr("x", (width-margin.right)/2) .attr("text-anchor", "end") const y_axis_x_pos = margin.left/2 const y_axis = svg.append("g").attr("transform", "translate("+y_axis_x_pos+" 0)") const make_y_axis = d3.axisLeft(correction_y) make_y_axis(y_axis) y_axis.append("text") .text("Average perceived happiness") .attr("fill", "grey") .attr("transform", "rotate(-90) translate(-50 10)") .attr("text-anchor", "end") const x2 = correction_x.copy() x2.domain(d3.extent(correction_records_2019, r => r.corruption).reverse()) select.on("change", function(){ let variable = d3.select(this).property('value') let transition = d3.select('input[name="transition"]:checked').property("value")=="true" ? true : false let t = d3.transition().duration(2000) let scale // console.log(variable) if(variable == "gdp"){ title.text("The correlation between happiness and wealth is weak...") x_label.text("Log GDP per capita") scale = correction_x } else if(variable == "corruption") { title.text("... but even weaker between happiness and corruption") x_label.text("Average perceived corruption") scale = x2 } circles.each( function(){ let circle = d3.select(this) let value = circle.property(variable) if(transition){ circle.transition(t).attr("cx", scale(value)) } else { circle.attr("cx", scale(value)) } }) d3.axisBottom(scale)(x_axis) }) return div.node() }35:T550,{ const svg = d3.create("svg").attr("height", 70) // create the SVG object // add three different text elenents, each with a datum svg.append("text").attr("y", 20).datum({gdp: "Discover text: Click!", corruption: "Corruption content"}) svg.append("text").attr("y", 40).datum({gdp: "Click also here!", corruption: "More corruption content"}) svg.append("text").attr("y", 60).datum({gdp: "And here!", corruption: "Even more corruption content"}) svg.selectAll("text") // select all the texts .on("click", update_text) // One can use regular attr(), style(), text() or on() methods .style("cursor", "pointer") // ... as we used to (changes apply to all the texts). .attr("fill", "red") .text(d => d.gdp) // BUT one can ALSO use a function with only one attribute (the datum) : // changes apply to all the text elements, but with their respective // datum content, here the gdp element defined just before. function update_text(){ // HERE is the real power: d3.select(this) // d3.select(this) refers to the element that emitted a click event .text(d => d.corruption) // but we can use the datum to update the text of this specific element. } return svg.node() }36:T919,{ const svg = d3.create("svg") .attr("height", height) .attr("width", width) // ---- proper graph construction --------------- for(let record of correction_records_2019){ svg.append("circle") // .attr("cx", correction_x(record.gdp)) // removal of .attr() method .datum( record ) // datum addition .attr("r", 5) // <----- MOVE ALL OF THESE METHODS .attr("cy", correction_y(record.happiness)) .attr("fill", "lightgrey") .attr("stroke", "black") .attr("stroke-width", 0.4) } svg.selectAll("circle") .attr("cx", d => correction_x(d.gdp)) // .attr() method with an anonymous function // ----- title and source -------------------- const title = svg.append("text") // Move me top left ! .text("The correlation between happiness and wealth is weak...") .attr("x", width-margin.right) .attr("text-anchor", "end") .attr("y", margin.top/2) .attr("font-family", "tahoma") const source = svg.append("text") // Move me bottom right ! .text("Happiness Report (2020)") .attr("x", width - margin.right) .attr("y", height - 1) .attr("font-family", "tahoma") .attr("font-size", 8) .attr("text-anchor", "end") .attr("fill", "grey") // ----- axes --------------------------------- const x_axis_y_pos = height-2*margin.bottom/3 const x_axis = svg.append("g").attr("transform", "translate(0 "+x_axis_y_pos+")") const make_x_axis = d3.axisBottom(correction_x) make_x_axis(x_axis) const x_axis_label = x_axis.append("text") .text("Log GDP per capita") .attr("fill", "grey") .attr("y", -2) .attr("x", (width-margin.right)/2) .attr("text-anchor", "end") const y_axis_x_pos = margin.left/2 const y_axis = svg.append("g").attr("transform", "translate("+y_axis_x_pos+" 0)") const make_y_axis = d3.axisLeft(correction_y) make_y_axis(y_axis) const y_axis_label = y_axis.append("text") .text("Average perceived happiness") .attr("fill", "grey") .attr("transform", "rotate(-90) translate(-50 10)") .attr("text-anchor", "end") // ------------------------------------------- return svg.node() }37:Tb9f,{ const div = d3.create("div") const select = div.append("select").style("position", "absolute").style("top", margin.top/2-10 + "px") select.append("option").attr("value", "gdp").text("Wealth") select.append("option").attr("value", "corruption").text("Corruption") const svg = div.append("svg") .attr("height", height) .attr("width", width) // ---- proper graph construction --------------- for(let record of correction_records_2019){ svg.append("circle").datum( {gdp: record.gdp, happiness: record.happiness, corruption: record.corruption} ) } svg.selectAll("circle") .attr("r", 5) .attr("fill", "lightgrey") .attr("stroke", "black") .attr("stroke-width", 0.4) .attr("cx", d => x_scales.gdp(d.gdp)) .attr("cy", d => correction_y(d.happiness)) // ----- subscription and transitions --------- // COMPLETE HERE // 1. create a function that // a. gets the value of the selector // b. gets the corresponding scale // c. computes the new x and y coordinates AND TRANSITIONS to them // d. changes the x axis label ( x_axis_label.text() ) // e. changes the title ( title.text() ) // remember that we constructed three objects // for instance: titles.gdp refers to the GDP title // or that x_scales.corruption refers to the corruption x-scale // 2. subscribe this function to the change event on the selector // ----- title and source -------------------- const title = svg.append("text") // Move me top left ! .text(titles.gdp) .attr("x", width-margin.right) .attr("text-anchor", "end") .attr("y", margin.top/2) .attr("font-family", "tahoma") const source = svg.append("text") // Move me bottom right ! .text("Happiness Report (2020)") .attr("x", width - margin.right) .attr("y", height - 1) .attr("font-family", "tahoma") .attr("font-size", 8) .attr("text-anchor", "end") .attr("fill", "grey") // ----- axes --------------------------------- const x_axis_y_pos = height-2*margin.bottom/3 const x_axis = svg.append("g").attr("transform", "translate(0 "+x_axis_y_pos+")") const make_x_axis = d3.axisBottom(correction_x) make_x_axis(x_axis) const x_axis_label = x_axis.append("text") .text(labels.gdp) .attr("fill", "grey") .attr("y", -2) .attr("x", (width-margin.right)/2) .attr("text-anchor", "end") const y_axis_x_pos = margin.left/2 const y_axis = svg.append("g").attr("transform", "translate("+y_axis_x_pos+" 0)") const make_y_axis = d3.axisLeft(correction_y) make_y_axis(y_axis) const y_axis_label = y_axis.append("text") .text("Average perceived happiness") .attr("fill", "grey") .attr("transform", "rotate(-90) translate(-50 10)") .attr("text-anchor", "end") // ------------------------------------------- return div.node() }38:T57d,md` ## 6. Going further 1. get inspired by browsing the [best projects of the year on Observable](https://observablehq.com/@observablehq/observables-favorite-notebooks-of-2020) 2. find simple exemples of graphs made in d3.js on [The D3.js Graph Gallery](https://www.d3-graph-gallery.com/index.html) 3. learn about how to steal ideas and reuse other's code on Observable with [this video](https://www.youtube.com/watch?v=uQlNU_zyK7Q) 5. do more with maps with [Mapbox](https://docs.mapbox.com/mapbox.js/api) or [Leaflet](https://leafletjs.com/) (spannable, zoomable maps) and [Turf](https://turfjs.org) (data wrangling) 6. learn about HTML and CSS so that you can run \`d3.js\` from your browser, without the need fro Observable 7. run \`d3.js\` in R Studio with [r2d3](https://rstudio.github.io/r2d3/) 8. learn [Vega](https://vega.github.io/vega), [Vegalite](https://vega.github.io/vega-lite), [Plotly](https://plotly.com/javascript/) or other higher-level graphing libraries 4. learn about [asychronoucity](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous) if you count on loading data, rendering images, connecting to web APIs, etc. 9. learn about [data binding]() if you plan to animate charts with a changing number of elements 10. learn about [\`d3.force\`]() if you plan to work with networks or dense data you want to pull appart from each other in an harmonious fashion `39:T6c1,{ const svg = d3.create("svg") .attr("height", height) .attr("width", width) for(let record of correction_records_2019){ svg.append("circle") .attr("r", 5) .attr("cy", correction_y(record.happiness)) .attr("cx", correction_x(record.gdp)) .attr("fill", "lightgrey") .attr("stroke", "black") .attr("stroke-width", 0.4) } const title = svg.append("text") // Move me top left ! .text("The correlation between happiness and wealth is weak") .attr("x", margin.left) .attr("y", margin.top/2) .attr("font-family", "tahoma") const source = svg.append("text") // Move me bottom right ! .text("Happiness Report (2020)") .attr("x", width - margin.right) .attr("y", height - 1) .attr("font-family", "tahoma") .attr("font-size", 8) .attr("text-anchor", "end") .attr("fill", "grey") const x_axis_y_pos = height-2*margin.bottom/3 const x_axis = svg.append("g").attr("transform", "translate(0 "+x_axis_y_pos+")") const make_x_axis = d3.axisBottom(correction_x) make_x_axis(x_axis) x_axis.append("text") .text("Log GDP per capita") .attr("fill", "grey") .attr("y", -2) .attr("x", (width-margin.right)/2) .attr("text-anchor", "end") const y_axis_x_pos = margin.left/2 const y_axis = svg.append("g").attr("transform", "translate("+y_axis_x_pos+" 0)") const make_y_axis = d3.axisLeft(correction_y) make_y_axis(y_axis) y_axis.append("text") .text("Average perceived happiness") .attr("fill", "grey") .attr("transform", "rotate(-90) translate(-50 10)") .attr("text-anchor", "end") return svg.node() }3a:T651,{ const svg = d3.create("svg") .attr("height", 50) .attr("width", width) svg.append("circle").attr("cx", 20) svg.append("circle").attr("cx", 50) svg.append("circle").attr("cx", 80) svg.append("circle").attr("cx", 110) svg.append("circle").attr("cx", 140) const welcome_text = "Select a couple of circles, or:" const text = svg.append("text") .text(welcome_text) .attr("y", 30) .attr("x", 160) const selector = svg.append("text") .text("CLICK HERE TO SELECT ALL") .attr("y", 30) .attr("x", 380) .attr("cursor", "pointer") const circles = svg.selectAll("circle") .attr("cy", 25) .attr("r", 10) .attr("fill", "lightgrey") .attr("stroke", "black") .attr("stroke-width", 0.4) .attr("cursor", "pointer") function toggle(){ const circle = d3.select(this) const current_color = circle.attr("fill") circle.attr("fill", current_color == "grey" ? "lightgrey" : "grey") svg.dispatch("update") } function update_comment(){ const selected_circles = circles.filter( function() { return d3.select(this).attr("fill")=="grey" } ) const n = selected_circles.size() const message = n > 1 ? n + " circles selected" : n==1 ? "1 single circle selected" : welcome_text text.text(message) } function select_all(){ // <---------- HERE circles.attr("fill", "grey") svg.dispatch("update") } selector.on("click", select_all) // <---------- HERE circles.on("click", toggle) svg.on("update", update_comment) return svg.node() }3b:T49b,{ const svg = d3.create("svg") .attr("height", height) .attr("width", width) // step 1: from countries, keep only the European ones const mediterranean = ["Albania", "Algeria", "Bosnia and Herz.", "Croatia", "N. Cyprus", "Cyprus", "Egypt", "France", "Greece", "Palestine", "Israel", "Italy", "Lebanon", "Libya", "Malta", "Macedonia", "Monaco", "Montenegro", "Morocco", "Portugal", "Serbia", "Slovenia", "Spain", "Syria", "Turkey", "Tunisia"] const mediterranean_countries = countries.filter( country => mediterranean.includes(country.properties.name) ) // step 2: create your projection that fit into the dimensions height x width const projection = d3.geoBonne() .parallel(52) .rotate([-15, 0]) .center([0, 52]) .translate([width / 2, 0]) .scale(width) // step 3: create your path factory const make_path = d3.geoPath(projection) // step 4: populate your map with paths for(let country of mediterranean_countries){ svg.append("path") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 0.3) .attr("d", make_path(country)) } return svg.node() }3c:T6be,md`### 5.1 Data binding When we will start adding, removing, sorting, fitering or animating dots from our graph, you will realise that it can be a pain to keep the array of data in sync with the graph. Instead, _d3.js_ offers a powefull syntax: \`\`\`js /* graph construction */ let countries_svg = container .selectAll("g") // these "g" elements do not exist yet .data(countries_data) // the empty selection is associated with data .join("g") // one "g" element is created per datum // now we can use anonymous functions that take the datum (d for short) // as a parameter ; we don't need to care about order anymore // because the datum is stored in the DOM countries_svg .append("circle") .attr("cx", d => x(d.income)) .attr("cy", d => y(d.life_expectancy)) .attr("r", radius) // (Q4.4) Try sorting countries_svg here, for instance. countries_svg .append("text") .attr("x", d => x(d.income) + radius + spacing ) .attr("y", d => y(d.life_expectancy) + 5 ) .text(d => d.name) \`\`\` Compared to using datum() in a loop, data() has the advantage of being able to distinguish between newly created and already existing object. This is useful, for instance for dealing with missing values, where objects with missing values must exit nicely the graph during an animation, and re-enter as gracefully. In the inspector, click on one of the \`g\` elements representing a country, and go to the "properties" tab (Chrome) or right-click and select "See DOM properties" (Firefox). Can you see a \`__data__\` property? What does it contain? --> `3d:T885,md`**Q5.1** From the browser's inspector, look at the console. In what order does the logging appear? Can you explain what it means to say that the anonymous function inside \`then()\` is called **asynchronously**? **Q5.2** Still looking at the console: can you access the \`countries_json\` object from outside \`then()\`? What are the options we have to remedy this problem? **Q5.4** The problem here is that we are mixing a little bit of everything (scales, drawing layers...). How could we preserve the structure of the code, while keeping the data loading at the end? Create the corresponding functions: \`compute_scales()\`, \`draw_countries()\`. _You may have to define global variables, and modify them from inside a function. For instance \`x\` can be defined first with \`let x\`, and modified in the \`compute_scale()\` function. Otherwise it won't be available to the \`draw_countries()\` function. An other solution is to pass \`x\` as an argument, i.e. something like \`draw_countries(data, x, y)\`._ **Q5.5** Does the toggling work with the newly added countries? Do you understand why? `3e:T8fb,chart2 = { // const height = margin.top+margin.bottom // overwrite general height const svg = d3.create("svg") .attr("height", height) .attr("width", width) const text = svg.append("text") .attr("y", margin.top/2) const line = d3.line() .x( d => correction_x(d.gdp) ) .y( d => correction_y(d.happiness) ) const paths = svg.append("g") const circles = svg.append("g") for(let country of countries3){ let path = paths.append("path") .attr("stroke", "grey") .attr("fill", "none") .attr("stroke-dasharray", "1 1") // .property("name", country.name) .property("data", country.data) } for(let country of countries3){ circles.append("circle") .attr("r", 3) .attr("fill", "grey") .attr("fill-opacity", 0.7) .attr("stroke", "black") .attr("stroke-width", 0.4) //.attr("cx", x(country.data[0].gdp)) //.attr("cy", y(country.data[0].happiness)) .property("name", country.name) .property("data", country.data) } const x_axis_y_pos = height-margin.bottom/2 const x_axis = svg.append("g").attr("transform", "translate(0 "+x_axis_y_pos+")") const make_x_axis = d3.axisBottom(correction_x) make_x_axis(x_axis) x_axis.append("text") .text("Log GDP per capita") .attr("fill", "grey") .attr("y", -2) .attr("x", correction_range_x[1]) .attr("text-anchor", "end") const y_axis_x_pos = margin.left/2 const y_axis = svg.append("g").attr("transform", "translate("+y_axis_x_pos+" 0)") const make_y_axis = d3.axisLeft(correction_y) make_y_axis(y_axis) return Object.assign(svg.node(), { update(year) { circles.selectAll("circle").transition() .attr("cx", function(){ const data = d3.select(this).property("data") return( correction_x( data[year-2015].gdp )) }) .attr("cy", function(){ const data = d3.select(this).property("data") return( correction_y( data[year-2015].happiness )) }) } }) return(svg.node()) }3f:T10c8,{ // const height = margin.top+margin.bottom // overwrite general height let map_width = height const svg = d3.create("svg") .attr("height", 0.8*height) .attr("width", 2*width) const map = svg.append("g") .attr("transform", "translate("+0.8*width+" 0) scale(0.8)") for(let country of countries){ map.append("path") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 0.3) .attr("d", make_path(country)) .property("name", country.properties.name) } const paths = map.selectAll("path") .property("selected", false) const graph = svg.append("g") .attr("transform", "scale(0.8)") const text = graph.append("text") .attr("y", margin.top/2) for(let record of correction_records_2019){ graph.append("circle") .attr("r", 5) .attr("cy", correction_y(record.happiness)) // .attr("cy", margin.top) .attr("cx", correction_x(record.gdp)) .attr("fill-opacity", 0.3) .attr("stroke", "black") .attr("stroke-width", 0.4) .property("name", record["Country name"]) //.attr("stroke-opacity", 1) } const circles = graph.selectAll("circle") .property("selected", false) .property("hovered", false) //.datum( function(){ return( {selected: false , hovered: false} ) } ) function toggle_circle( circle ){ circle.property("selected", ! circle.property("selected") ) circle.attr("stroke-width", circle.property("selected") ? 4 : 0.4) circle.dispatch("update") } function toggle_path( path ){ path.property("selected", ! path.property("selected") ) path.attr("fill", path.property("selected") ? "red" : "white") } function highlight(){ const circle = d3.select(this) circle.property("hovered", true) circle.attr("fill", "pink") circle.dispatch("update") } function unhighlight(){ const circle = d3.select(this) circle.property("hovered", false) circle.attr("fill", "black") circle.dispatch("update") } let selected_countries = new Set() function update_comment(){ const circle = d3.select(this) const country = circle.property("name") if( circle.property("selected") || circle.property("hovered")){ selected_countries.add(country) } else { selected_countries.delete(country) } let first_5_countries = Array.from(selected_countries.values()) if(first_5_countries.length > 5){ first_5_countries.length = 6 first_5_countries[5] = "..." } text.text( first_5_countries.join(", ") ) } circles.on("click", function() { const circle = d3.select(this) const path = paths.filter(function(){ return( circle.property("name") == d3.select(this).property("name")) }) toggle_path( path ) toggle_circle( circle ) } ) // circles.on("mouseenter", highlight) // circles.on("mouseleave", unhighlight) circles.on("update", update_comment) paths.on("click", function() { const path = d3.select(this) const circle = circles.filter(function(){ return( path.property("name") == d3.select(this).property("name")) }) toggle_path( path ) toggle_circle( circle ) } ) //paths.on("mouseenter", highlight2) //paths.on("mouseleave", unhighlight2) const x_axis_y_pos = height-margin.bottom/2 const x_axis = graph.append("g").attr("transform", "translate(0 "+x_axis_y_pos+")") const make_x_axis = d3.axisBottom(correction_x) make_x_axis(x_axis) x_axis.append("text") .text("Log GDP per capita") .attr("fill", "grey") .attr("y", -2) .attr("x", correction_range_x[1]) .attr("text-anchor", "end") const y_axis_x_pos = margin.left/2 const y_axis = graph.append("g").attr("transform", "translate("+y_axis_x_pos+" 0)") const make_y_axis = d3.axisLeft(correction_y) make_y_axis(y_axis) return(svg.node()) }40:[{"id":"71f0f3187d512706b95296de1835fa21a8067233478df521402ecb605415860ced8762d1a8b791f930927dd84adc9d57905c87c15ef3c0a1969e460b1f9706c5","href":"https://static.observableusercontent.com/files/71f0f3187d512706b95296de1835fa21a8067233478df521402ecb605415860ced8762d1a8b791f930927dd84adc9d57905c87c15ef3c0a1969e460b1f9706c5","name":"worldhappiness-2020-table-2.1.csv","type":"text/csv","lastModified":1673987143530.63,"size":586356},{"id":"5ca984697b9330ff1291c70d2b12dfb98b3db6807fe62ac50c7d915eb3aed96c7a357931a8ac3790dc09751c9eb60d61f1866dbfa78afcbc0a9835397d21c77e","href":"https://static.observableusercontent.com/files/5ca984697b9330ff1291c70d2b12dfb98b3db6807fe62ac50c7d915eb3aed96c7a357931a8ac3790dc09751c9eb60d61f1866dbfa78afcbc0a9835397d21c77e","name":"y-scale-mapping.png","type":"image/png","lastModified":1673987143530.63,"size":30750},{"id":"0d46e7e4aa7b3d8f0801dd26e171f4447c082d1a5a04da49a0f9c92477a5fb2a689813b74458d011d24eb1b55ce749e4c38c82deb46d32d539e3a62c08609f2c","href":"https://static.observableusercontent.com/files/0d46e7e4aa7b3d8f0801dd26e171f4447c082d1a5a04da49a0f9c92477a5fb2a689813b74458d011d24eb1b55ce749e4c38c82deb46d32d539e3a62c08609f2c","name":"event-driven-schema.png","type":"image/png","lastModified":1673987143530.63,"size":25081},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1673987143530.63,"size":756420}] 2d:{"title":"Data visualisation with d3.js (3/3)","cells":[{"id":4,"value":"md`# Data visualisation with \\`d3.js\\` (3/3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md `## Goal and schedule\n\n1. Introduction and refresher\n2. More event programming\n3. Transitions and animations\n4. Maps\n5. Mix and match\n6. Going further\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2258,"value":"// disclaimer: not all sections are finished\n// but there should be already enough material for 3h","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`\n\n## 1. Introduction and refresher\n\nIn this tutorial, we will use data from [the World Happiness Report 2020](https://worldhappiness.report/ed/2020), and will focus on **the link between income, (perceived) corruption and (perceived) happiness at the country level**, where income is measured as log-GDP per capita, corruption as the average answer by residents to the two questions:\n\n> _Is corruption widespread throughout the government?_ and _Is corruption widespread within businesses?_\n\n... and happiness as the average to the question:\n\n> _Please imagine a ladder, with steps numbered from 0 at the bottom to 10 at the top. The top of the ladder represents the best possible life for you and the bottom of the ladder represents the worst possible life for you. On which step of the ladder would you say you personally feel you stand at this time?_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"md`### 1.1 Data reading`","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"md`In Observable you can load data like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"records = d3.csvParse(file_content, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`... where \\`file_content\\` is a very long character string obtained by reading \\`file\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"file_content = file.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`... and where \\`file\\` is the representation of the file \\`worldhappiness-2020-table-2.1.csv\\`, which is hosted directly in this notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"file = FileAttachment(\"worldhappiness-2020-table-2.1.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2348,"value":"md`> ⚙️ It is slightly more difficult to read files outside Observable, because one may not expect the file to be read immediately: a lot of things can go wrong during the reading process, like a disk failure or a lost connection. The full story of the **asychronous** handling of the file (i.e. how to exectue code only when it is fully loaded, and not when we instruct JavaScript to start reading) is beyond the scope of this tutorial. Because Observable is **reactive**, the cell containing \\`d3.csvParse(file_content, d3.autoType)\\` is called only when \\`file_content\\` has been fully loaded, not before.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`### 1.2 Data wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`➡️ **A.** Create \\`records_2019\\`, a filtered version of the data set with only records from 2019 and where \\`name\\` stands for \"Country name\", \\`gdp\\` for \"Log GDP per capita\", \\`corruption\\` for \"Perceptions of corruption\", and \\`happiness\\` for \"Life Ladder\". You will remove incomplete observations.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2398,"value":"[1, 3, 4, 5, undefined].filter( value => value ) // astuce","pinned":true,"hidden":false,"mode":"ojs"},{"id":2396,"value":"({prop1: \"contenu\", prop2: [ {} , [] ] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2394,"value":"[0,1,2,3,4,5].filter(number => number % 2 == 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"records_2019 = records\n .filter(country => country.year==2019)\n .map(function (obj){ return {\n name: obj['Country name'],\n gdp: obj['Log GDP per capita'],\n corruption: obj['Perceptions of corruption'],\n happiness: obj['Life Ladder']\n }})\n .filter( obj => obj.name && obj.gdp && obj.corruption && obj.happiness)\n// your code here\n// you may want to use a mix of filter() and map() methods\n// or a for loop with the push() method","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"md`➡️ **B.** Create \\`records_europe\\`, a filtered version of the records with only a handful of European countries. _You will restructure the data set so that it looks like the following:_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"exemple = [\n {name: \"France\", data: [\n {year: 2015, happiness: 3, gdp:45, corruption: 1},\n {year: 2016, happiness: 4, gdp: 65, corruption: 2}\n ]},\n {name: \"Portugal\", data: [\n {year: 2016, happiness: 3.3, gdp:12, corruption: 3}\n ]}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2370,"value":"md`\n> 💡 Tips:\n> - \\`my_array.includes(my_value)\\` is \\`true\\` if \\`my_value\\` appears at least once in \\`my_array\\`\n> - \\`my_array.push(my_value)\\` adds \\`my_value\\` at the end of \\`my_array\\` (modifies \\`my_array\\` in place)\n> - \\`my_array.indexOf(my_value)\\` gets the index of \\`my_value\\` in \\`my_array\\`\n>\n> `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2428,"value":"records","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"md`### 1.3 Static graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"md`**Let's create a static graphic** with the 2019 data set. We will use the folowing graphic size:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"margin = ({left: 60, right: 10, top: 50, bottom: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"md`➡️ **C.** **Create a mapping, called \\`x()\\`, that computes an x-position given any GDP**, so that the x-positions span the \\`[margin.left, width - margin.right]\\` interval. _ You can compute the GDP domain on the whole \\`records\\` dataset. Do you remind \\`d3.extent\\` ?_`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"// your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"md`➡️ **D.** The measurement is actually the logarithm of the GDP. **If it was actually directly GDP, how would you change the definition of \\`x()\\`** so that you get a logarithmic scale?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"// your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"md`➡️ **E.** **Create a similar \\`y()\\` scale** that maps the happiness to the y-position. _You will respect the margins. Reming that the coordinates on the y-axis are inversed in comparison to mathemetical conventions._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"html`${await FileAttachment( \"y-scale-mapping.png\" ).image()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"// your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"md`➡️ **F.** Now **make the full happiness vs. GDP graph for the year 2019.** _You may want to also include a title and a source (Word Happiness Report, 2020). You can use _\\`correction_records_2019\\`, \\`correction_x()\\`, \\`correction_y()\\`, _etc. if you missed one of the preceding questions. Forget about correctly labelling the axes if it takes too long._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"height\", height)\n .attr(\"width\", width)\n \n // your code here\n \n // If you don't want to chose your own settings, I suggest you use circles:\n // - of radius 5\n // - of inner color \"lightgrey\" (attribute \"fill\")\n // - of border color black (attribute \"stroke\")\n // - of border width 0.4 (attribute \"stroke-width\")\n \n const title = svg.append(\"text\") // Give me text content and move me top left !\n .attr(\"font-family\", \"tahoma\")\n \n const source = svg.append(\"text\") // Give me text content and move me bottom right !\n .attr(\"font-family\", \"tahoma\")\n .attr(\"font-size\", 8)\n .attr(\"text-anchor\", \"end\")\n .attr(\"fill\", \"grey\")\n \n return svg.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`## 2. More event programming`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1939,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"md`### 2.1 Event dispatching, firing, triggering...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1970,"value":"md`Event dispatching is the fact to trigger ourselves an event, typically a custom one. This can de done in \\`d3.js\\` with :\n\n\\`\\`\\`element.dispatch(\"event name\")\\`\\`\\`\n\n... and it is then possible to subscribe a function to this even with:\n\n\\`\\`\\`\nelement.on(\"event name\", my_function)\n\\`\\`\\`.\n\nA typical use is would be when you want a separate action to happen, regardless of the first action perforemed by your reader. In the following exemple, only the \"click\" behaviour on the circles is implemented.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1990,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2048,"value":"md`➡️ **F.** What does the variable \\`circles\\` correspond to?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"md`➡️ **G.** Where is a custom event triggered? Is there any function subscribed to this event? Write with your own words what \"event triggering\" and \"event subscription\" are.\n\n> ⚙️ _When there is no more reason to attach an event to a specific element than to an other, suche as with \"update\" here, the convention is to attach it to the highest element in the DOM where it still makes sense (\\`svg\\` here)._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2059,"value":"md`➡️ **H.** Implement the \"CLICK HERE TO SELECT ALL\" button. Your function should toggle each circle and then trigger the \\`update\\` event once. _You sould not trigger \\`click\\` events._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2074,"value":"md`Event programming is best understood as a flow diagram, like the (very simple) one here for our toy exemple: _(**Disclaimer:** this is not a stantard representation.)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2082,"value":"html`${await FileAttachment( \"event-driven-schema.png\" ).image()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2090,"value":"md`### 2.2 User inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2093,"value":"// PLANNED\n// introduction to inputs","pinned":true,"hidden":false,"mode":"ojs"},{"id":2094,"value":"md`### 2.3 Storing states`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2106,"value":"// PLANNED\n// use datum to store multiple stages\n// combining hover and select events","pinned":true,"hidden":false,"mode":"ojs"},{"id":2102,"value":"md`### 2.4 Synchronising views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1539,"value":"// PLANNED\n// coordinate two objects (when you click on one, something also happens on the others)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`## 3. Transitions and animations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"height\", 30)\n .attr(\"width\", width)\n \n const circle = svg.append(\"circle\") // create a circle\n .attr(\"cx\", 15)\n .attr(\"cy\", 15)\n .attr(\"r\", 10)\n \n let increment = 100\n \n function move(){ // create a move function that adds \"increment\" to x\n // and transitions between the previous and the new state\n \n let cx = +circle.attr(\"cx\") + increment\n \n // change direction when at the end of the line\n if( (increment > 0 && cx > width) || (increment < 0 && cx < 0)) increment = -increment\n \n circle.transition().attr(\"cx\", cx) // <------ transition() here\n \n }\n \n d3.interval(move, 1000) // repeat move every 1000 ms (= every 1 s)\n \n return svg.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1281,"value":"md`\n➡️ **I.** Remove \\`.transition()\\` between \\`circle\\` and \\`.attr()\\` to see the effect.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"md`The power of \\`d3.js\\` comes from the fact **almost any attribute can be transitionned**: positions, colors, font size, etc. _(If need be, you may even design your own method to interpolate between uncommon attributes, but this is pretty unusual.)_ You don't have to care about the transition being interrupted by an other action from the user – which is surprisingly difficult otherwise. The transitions can be delayed with \\`delay()\\` – no delay by default – and their speed can be controlled with with \\`duration()\\` – 250 ms by default. **Multiple attributes can be changed simmultaneously and synchronously**, like color and radius in the following exemple:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1330,"value":"md`\n➡️ **J.** Replace the line with \\`duration()\\` by \\`delay()\\`. Do you perceive the difference?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"md`**The pace of transitions can also be controlled** to give an impression of smooth or on the contrary jerky movements, bouncings and so on. This is known as the **easing** of the transition. You will find the complete list [here](https://observablehq.com/@d3/easing-animations), but here are \\`d3.easeBounceOut\\` (top) in comparison to \\`d3.easeLinear\\` (bottom).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"chart(d3.easeBounceOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"chart(d3.easeLinear, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"md`➡️ **K.** In the former graph, replace the \\`.duraction()\\` or \\`delay()\\` statements by \\`.ease(...)\\` statements. You will replace \\`...\\` by any of the easing methods you please from [the full list](https://observablehq.com/@d3/easing-animations): \\`the default d3.easeCubic\\`, \\`d3.easeCubic\\`, \\`d3.easeExpIn\\`, etc.`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"md`### 3.2 Transitions in graphs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"md`\nTransitions are very useful for animating graphs, in order to highlight **object constancy**. The idea is to enhance the ability of the reader to understand which object correspond to which other in different views of the same data. The archetypical exemple is **animation over time**: even though the actual time steps are discrete, the animation allows the user to follow one individual point from one year to the next, more easily than with an abrupt graph change.\n\nHere is an exemple for you to play with:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"md`\n➡️ **K2.** In your opinion, which of the two views (with and without transition) better helps the user to understand the data?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"md`### 3.3 Persisting data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"md`A new thing that we have to consider is that **we now have multiple potential positions / colors / widths / etc. for each element on our graph**, one for each animation option. In our exemple above, we for instance have two x-positions. But we only have one position attribute, namely \\`cx\\` for \\`circle\\` elements.\n\nThus we must find :\n- either a way to get back at the data from the element (such as an identifier)\n- or a way to store data inside the element\n\nWe see that, **at the very minimum, we need to store an identifier at the element level**. Indeed, we cannot just remove all the circles and construct a whole new graph from scratch, since we would have no way of telling which objects from the original graph should be transitionned into which new objects.\n\n**In \\`d3.js()\\`, one can store such information at the element level with the \\`datum()\\` method**, which becomes available _inside_ the \\`attr()\\` method, as we are going to see right now.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"md`Let's look at an exemple:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":2276,"value":"md`\n➡️ **L1.** What is the role \\`.on(\"click\", update_text)\\` ?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"md`\n➡️ **L2.** In the \\`udpdate_text()\\` function, at the line \\`.text(d => d.corruption)\\`, where does the \\`d\\` come from in ? What does it correspond to? Could I use \\`r\\` (for record) or \\`c\\` (for country) instead?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1726,"value":"md`\n**In the following graph**, in preparation for the animation at the next section, **I have started to restructure the code:**\n\n1. In the for loop, I have added a call to the \\`datum\\` method: \\`.datum(record)\\`\n\n2. In parallel, I have removed \\`.attr(\"cx\", correction_x(record.gdp))\\` from the loop ...\n\n3. ... and have replaced it by :\n \n \\`svg.selectAll(\"circle\").attr(\"cx\", d => correction_x(d.gdp))\\`\n \n ... outside the loop. _(In the anonymous function_ \\`d => correction_x(d.gdp)\\`_, I could have used any variable name besides \\`d\\`, for instance continue using \\`record\\` as before, but the convention in the \\`d3.js\\` community is to use \\`d\\` for \"datum\".)_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2294,"value":"md`➡️ **M.** Can you finish the work by moving all the methods but \\`datum()\\` outside of the for loop? _(Not all of them need an anonymous function.)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":1747,"value":"md`\n➡️ **N.** Is the information about **each country's corruption** available inside the datum?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1750,"value":"md`### 3.4 Building a dynamic graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"md`Let's build a simpler version of the above graph, where **we animate between wealth and corruption on the x-axis!** From where we are, we just need a couple of components in double: two titles, two labels for the x-axis and most importantly two scale functions mapping from each variable's domain to the same x-range. Depending on which variable is selected, we will alternate between each of the pairs.\n\nLet's pack them into three objects, so that we can later call them simply with: \\`titles[\"gdp\"]\\`, \\`labels[\"corruption\"]\\`, etc. :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"titles = ({\n gdp: \"The correlation between happiness and wealth is weak...\",\n corruption: \"...but even weaker between happiness and corruption\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"labels = ({\n gdp : \"Log GDP per capita\",\n corruption: \"Average perceived corruption\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"x_scales = ({\n gdp : d3.scaleLinear().domain( correction_domain_gdp).range(correction_range_x),\n corruption : d3.scaleLinear().domain(correction_domain_corruption).range(correction_range_x)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1767,"value":"md`We also need **a selector button**, that enable the interaction with the user. It looks like this:\n\n\\`\\`\\`\nconst select = d3.create(\"select\")\nselect.append(\"option\").attr(\"value\", \"gdp\").text( \"Wealth\")\nselect.append(\"option\").attr(\"value\", \"corruption\").text(\"Corruption\")\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"md`We can access the current value of this selector with \\`select.property(\"value\")\\`, and we can subscribe actions to the \\`change\\` event (any time the value of the selector changes). When the option labelled \"Wealth\" is selected, the value of the selector is \\`\"gdp\"\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"md`\n➡️ **O.** Implement the transition between \"Wealth\" and \"Corruption\" on input change. _You will find detailed steps in the code._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1605,"value":"md`### 3.4 Timers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"// PLANNED\n// _d3.js_ has timers, i.e. objects that can trigger a callback function at regular intervals: ```js t = d3.interval(my_function, 300) // triggers my_function every 300 ms t.stop() // stops the timer ```\n// **Q8.1** Implement a function `increment()` that increases the slider by one year, until it reaches the maximal year. _The slider's value is available through `.property(\"value\")` and can be set through `.property(\"value\", value)`._\n// **Q8.2** Use a timer and the `increment()` function to implement the play functionality. _Hitting play when the cursor in on the maximal year should play the slider from the beginning._\n// **Q8.3** Implement the stop functionality.","pinned":true,"hidden":false,"mode":"ojs"},{"id":2132,"value":"md`### 3.5 Animating a graph over time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"// PLANNED\n// one can replace the select input by a range input\n// and the data source from records_2019 to records_europe\n// in order to produce an animation of hapiness vs. wealth over time\n// implement play and stop buttons","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`## 4. Maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"md`\\`d3.js\\` has a very rich mapping ecosystem, especially when it comes to projections. Here is an exemple of an advanced interactive map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"viewof context","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"md`In this part, we will focus on building **a simple, static map**. Building a map is like building a graph, where instead of circles of figures, we use \\`path\\` elements with specific forms, and instead of scales, we use projections. The tricky part is building the \\`d\\` attribute of each \\`path\\`. Luckily, we can rely on \\`d3.js\\` for this, if our data is in the \\`geojson\\` or \\`topojson\\` format.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2203,"value":"md`### 4.1 Reading a map file`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2208,"value":"md`We will start with the a shapefile representing all the countries in the world, which attached to this notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1014,"value":"md`This \\`world\\` object is in the \\`topojson\\` format, a format more and more common on the web, where, contrary to regular \\`geojson\\`, neighboring geometries that share a border (called here an \"arc\") do not need to encode this border twice. Each arc gets an identifier, and a complex shape is thus only a collection of arcs.\n\nHere, we have 2 series of objects constructed from the arcs (in \\`world.objects\\`) :\n\n- a 241-sized array of countries\n- an 1-sized array of land\n\nWe can convert the list of countries to an more classic \\`geojson\\` format, where each geometry is explicitly encoded, thanks to the \\`topojson.feature(context, \"objects\")\\` function from the \\`topojson\\` library. We obtain a \"feature collection\" and more precisely here **a collection of (multi)polygons**, since each country is represented by a (collection of) polygon(s). The actual list of (multi)polygons is available in the \\`features\\` attribute.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"country_collection = topojson.feature(world, \"countries\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"countries = country_collection.features","pinned":true,"hidden":false,"mode":"ojs"},{"id":1086,"value":"md`➡️ **P.** In the array \\`countries\\`, what property does each country have?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"md`### 4.2 Projections and paths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"md`Now that we have the data, **let's turn to the map-making process.** In order to produce a map, we need to project our 3-dimensionnal data to the plane. Luckily our data is standardized, like any data in the \\`geojson\\` or \\`topojson\\` formats, with coordinates in latitude-longitude format following the global WGS 84 cordinate system (aka GPS coordinates). Thus, **we only have to chose a planar projection**. \\`d3.js\\` possesses tens of them (many of them exemplified at the top of this section). Let's pick one:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"projection = d3.geoCylindricalEqualArea()\n .fitHeight(height, country_collection) // this option scales the projection so that the whole collection\n // of countries fit in the pre-defined height of the map","pinned":true,"hidden":false,"mode":"ojs"},{"id":1095,"value":"md`Exactly like we used to use \\`d3.scale\\` to generate the x and y-position of our cirlces, we now use \\`d3.geoPath(my_projection)\\` to create a mapping from each geometrical object (in the ellipsoid 3d oordinate system) to is plannar x-y representation. Like \\`d3.scale\\`, \\`d3.geoPath(my_projection)\\` results in a function : a mapping from any geographical objet into the \\`d\\` attribute of a SVG \\`path\\` tag.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"make_path = d3.geoPath(projection) // this is a function","pinned":true,"hidden":false,"mode":"ojs"},{"id":2171,"value":"countries[0].properties.name // get the name of the first country","pinned":true,"hidden":false,"mode":"ojs"},{"id":2168,"value":"make_path(countries[0]) // convert Zimbabwe's geometry to a path","pinned":true,"hidden":false,"mode":"ojs"},{"id":2196,"value":"md`... which corresponds to this shape:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2175,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"height\", height)\n .attr(\"width\", width)\n .attr(\"transform\", \"scale(14,14) translate(-50,-50)\")\n svg.append(\"path\")\n .attr(\"d\",make_path(countries[0])).attr(\"fill\", \"white\").attr(\"stroke\", \"black\").attr(\"stroke-width\", 0.1)\n return svg.node()\n}// let's visualise it!","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"md`### 4.3 The full picture`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"md`From here, the final step is an easy one. **In order to build the map**, we only call the path factory \\`make_path()\\` and the geographical data \\`countries\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"height\", height)\n .attr(\"width\", width)\n \n for(let country of countries){\n \n svg.append(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.3)\n .attr(\"d\", make_path(country))\n }\n \n return svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1108,"value":"md`➡️ **Q.** Let's repeat all the steps for the mediterranean countries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"height\", height)\n .attr(\"width\", width)\n \n // step 1: from countries, keep only the European ones\n const mediterranean = [\"Albania\", \"Algeria\", \"Bosnia and Herz.\", \"Croatia\", \"N. Cyprus\", \"Cyprus\", \"Egypt\", \"France\", \"Greece\", \"Palestine\", \"Israel\", \"Italy\", \"Lebanon\", \"Libya\", \"Malta\", \"Macedonia\", \"Monaco\", \"Montenegro\", \"Morocco\", \"Portugal\", \"Serbia\", \"Slovenia\", \"Spain\", \"Syria\", \"Turkey\", \"Tunisia\"]\n const mediterranean_countries = countries.filter( country => ... )\n \n // step 2: create a projection that fit into the dimensions height x width\n const projection = d3.geoBonne()\n .parallel(52)\n .rotate([-15, 0])\n .center([0, 52])\n .translate([width / 2, 0])\n .scale(width) // It can actually quit hard to tweak the parameters, so here you go!\n \n // step 3: create your path factory\n ...\n \n // step 4: populate your map with path elements\n for(let country of mediterranean_countries){\n ...\n }\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1191,"value":"md`➡️ **R.** Create a function that color a country when clicked, and uncolor it when clicked a second time. Set up the subscription accordingly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"function toggle_country(){ ... }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"height\", height)\n .attr(\"width\", width)\n \n for(let country of countries){\n \n svg.append(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.3)\n .attr(\"d\", make_path(country))\n }\n \n return svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1881,"value":"md`## 5. Mix and match`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1885,"value":"// PLANNED\n// - a map and a chart side by side with some interaction between them\n// - a couple of events to implement\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"md`## Corrections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"md`### Section 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"records","pinned":true,"hidden":false,"mode":"ojs"},{"id":860,"value":"correction_records_2019 = records\n .filter(record => record.year == 2019) // filter 2019\n .map(function(record){\n return {\n name: record[\"Country name\"],\n gdp: record[\"Log GDP per capita\"],\n corruption: record[\"Perceptions of corruption\"],\n happiness: record[\"Life Ladder\"]\n }\n })\n .filter(record => record.gdp && record.corruption && record.happiness ) // no missing","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"correction_domain_gdp = d3.extent(correction_records_2019, record => record.gdp)","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"correction_domain_happiness = d3.extent(correction_records_2019, record => record.happiness)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1625,"value":"correction_domain_corruption = d3.extent(correction_records_2019, record => record.corruption).reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"correction_range_x = [margin.left, width-margin.right]","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"correction_range_y = [height-margin.bottom, margin.top]","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"correction_x = d3.scaleLinear().domain(correction_domain_gdp).range(correction_range_x)\n// d3.scaleLog for logarithmic","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"correction_y = d3.scaleLinear().domain(correction_domain_happiness).range(correction_range_y)","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":2069,"value":"md`### Section 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2072,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":1119,"value":"md`### Section 5`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1819,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"height\", height)\n .attr(\"width\", width)\n \n for(let country of countries){\n \n svg.append(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.3)\n .attr(\"d\", make_path(country))\n .datum({selected: false}) // <--- for storing information about the state\n .on(\"click\", correction_toggle_country) // <--- event subscription\n }\n \n return svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1824,"value":"correction_toggle_country = function(){\n\n const path = d3.select(this) // <---- get the element that fired the click event\n const selected = ! path.datum().selected // <---- if was selected, it should not be anymore\n \n path.attr(\"fill\", selected ? \"red\" : \"white\") // <---- change fill color accordingly\n \n path.datum().selected = selected // <---- updagte the datum\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@2\", \"d3-array@^2.10\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"import {Range} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"import {viewof context, update} from \"@d3/projection-transitions\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1405,"value":"import {chart} from \"@d3/easing-animations\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"update","pinned":true,"hidden":false,"mode":"ojs"},{"id":2363,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"// possible improvements\n// [ ] add d3.extent and alike to a table\n// [ ] map clipping\n// [ ] correction last exercice section 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"md`## Historical area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"md`### 5.3 Asynchronous reading\n\nMost of the time, we store the data in the form of an external file, typically in the \\`json\\` format, so that we can update the data without the need to change the \\`html\\` file. That is precisely what the following code tries to do:\n\n\\`\\`\\`js\n/* you need to have a \"data\" folder at the same level as the gapminder.html file\nwith the countries.json file (found on Moodle) downloaded in it */\n \nd3.json(\"data/countries.json\")\n .then(function(countries_json){\n \n // this function is called a \"callback\"\n // it takes as a parameter the data issued from the reading phase\n \n console.log(\"See my data here!\")\n console.log(countries_json)\n \n })\n\nconsole.log(\"See my data there?\")\nconsole.log(countries_json)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2239,"value":"md`## Experimental area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":1945,"value":"chart2.update(year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"countries3 = {\n \n let countries = {}, name, record, year, index\n let authorized_years = [2015, 2016, 2017, 2018, 2019]\n \n for(record of records){\n \n name = record[\"Country name\"]\n year = record[\"year\"]\n \n if( ! authorized_years.includes(year)) continue\n \n if( (! record[\"Life Ladder\"]) || (! record[\"Log GDP per capita\"]) ) continue\n \n if( ! countries[name]) countries[name] = {name: name, count: 0, data: []}\n \n index = year - authorized_years[0]\n \n countries[name].count += 1 \n countries[name].data[index] = {}\n countries[name].data[index].happiness = record[\"Life Ladder\"]\n countries[name].data[index].gdp = record[\"Log GDP per capita\"]\n }\n \n return Object.values(countries).filter(c => c.count == 5)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"records_europe2 = {\n \n let rec, recs = [] // used to store the reorganized records\n let name, names = [] // used to store the names of already seen countries\n \n let european_countries = [\"Austria\", \"Belarus\", \"Belgium\", \"Croatia\", \"Denmark\", \"Estonia\", \"Finland\", \"France\", \"Germany\", \"Greece\"]\n \n for(let rec of records){\n \n let name = rec[\"Country name\"]\n \n if( european_countries.includes(name) ) {\n \n if( ! names.includes(name) ) {\n \n recs.push({name: name, data:[]})\n names.push(name)\n \n }\n \n let index = names.indexOf(name)\n recs[index].data.push({happiness: rec[\"Life Ladder\"], year: rec[\"year\"], gdp: rec[\"Log GDP per capita\"]})\n \n }\n \n }\n \n return recs\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"// chart.update(year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}