2b:null 2c:["$","title",null,{"children":"Data visualisation with d3.js (2/3) | Arthur Katossky | Observable"}] 31:Ta46,xaxis = svg` `32:T6e2,{ const svg = d3.create("svg") const a = 179.5 // ad-hoc values for scaling const b = -119 // ad-hoc values for scaling const domain = [10, 1000] // values for the income const range = [10, 550] // x-positions svg .attr("width", 600) .attr("height",40) const g = svg.append("g") // create an alias so that I can refer to it .attr("transform", "translate(-40,20)") .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "right") // add and style the text g.append("text") .attr('fill', 'grey') .attr('y', -3) .attr('x', "419") .text('Income per inhabitant (dollars at purchasing power parity, logarithmic scale)') .attr('text-anchor', "end") // add and style path g.append("path") .attr("fill", "none") .attr("stroke", "red") //.attr("stroke", "black") .attr("d", "M60.5,6V0.5H419V6") // could be computed from "range" for(let i = 1; i<4; i++){ for(let j = 1; j<10; j++){ // the limits could be computed from "domain" let number = j*10**i // add the ticks here let translation = "translate(" + (a * Math.log10(number) + b) + ",0)" // The translation could be computed from "domain" and "range" // and we could get rid of "a" and "b". let tick = g.append("g").attr("transform", translation) tick.append("line") .attr("stroke", "black") .attr("y2", 6) if(j <= 3){ tick.append("text") .attr("y", 16) .attr("x", -3) .text(number) } if(number >= domain[1]) break } } return svg.node() }33:Tdca,countries = [ { "name": "Bangladesh", "population": 37900000, "region": "asia", "income": 1120, "co2_emissions": 0.0262, "life_expectancy": 40.4 }, { "name": "Brazil", "population": 54000000, "region": "americas", "income": 2900, "co2_emissions": 0.365, "life_expectancy": 51.2 }, { "name": "Canada", "population": 13700000, "region": "americas", "income": 12300, "co2_emissions": 11.2, "life_expectancy": 68.3 }, { "name": "China", "population": 554000000, "region": "asia", "income": 637, "co2_emissions": 0.142, "life_expectancy": 41.5 }, { "name": "Colombia", "population": 12000000, "region": "americas", "income": 3410, "co2_emissions": 0.608, "life_expectancy": 51.6 }, { "name": "Congo, Dem. Rep.", "population": 12200000, "region": "africa", "income": 1570, "co2_emissions": 0.122, "life_expectancy": 42.9 }, { "name": "France", "population": 41800000, "region": "europe", "income": 8530, "co2_emissions": 4.83, "life_expectancy": 66.5 }, { "name": "Germany", "population": 70000000, "region": "europe", "income": 7840, "co2_emissions": 7.31, "life_expectancy": 67 }, { "name": "India", "population": 376000000, "region": "asia", "income": 824, "co2_emissions": 0.177, "life_expectancy": 35.2 }, { "name": "Indonesia", "population": 69500000, "region": "asia", "income": 1430, "co2_emissions": 0.141, "life_expectancy": 37.3 }, { "name": "Italy", "population": 46600000, "region": "europe", "income": 6470, "co2_emissions": 0.89, "life_expectancy": 65.8 }, { "name": "Japan", "population": 82800000, "region": "asia", "income": 3020, "co2_emissions": 1.24, "life_expectancy": 59.7 }, { "name": "Mexico", "population": 27900000, "region": "americas", "income": 4180, "co2_emissions": 1.09, "life_expectancy": 49 }, { "name": "Pakistan", "population": 37500000, "region": "asia", "income": 1260, "co2_emissions": 0.143, "life_expectancy": 37.5 }, { "name": "Philippines", "population": 18600000, "region": "asia", "income": 2010, "co2_emissions": 0.194, "life_expectancy": 56.8 }, { "name": "Poland", "population": 24800000, "region": "europe", "income": 4760, "co2_emissions": 4.52, "life_expectancy": 59.2 }, { "name": "Romania", "population": 16200000, "region": "europe", "income": 1600, "co2_emissions": 1.2, "life_expectancy": 61.3 }, { "name": "Russia", "population": 103000000, "region": "europe", "income": 6820, "co2_emissions": 4.11, "life_expectancy": 57.3 }, { "name": "South Africa", "population": 13600000, "region": "africa", "income": 6020, "co2_emissions": 4.48, "life_expectancy": 46.9 }, { "name": "Spain", "population": 28100000, "region": "europe", "income": 4100, "co2_emissions": 1.18, "life_expectancy": 61.6 }, { "name": "Ukraine", "population": 37300000, "region": "europe", "income": 4250, "co2_emissions": 3.44, "life_expectancy": 61.7 }, { "name": "United Kingdom", "population": 50600000, "region": "europe", "income": 10800, "co2_emissions": 9.9, "life_expectancy": 68.7 } ]34:T51a,d3_scale = md` | Syntax | Effect | |--------|--------| | \`scale = d3.scaleLinear()\` | Linear mapping... | | \`scale.domain([min, max])\` | ... from the variable _domain_ \`[min, max]\` ...
| | \`scale.range([min, max])\` | ... to the channel _range_ \`[min, max]\`.
💡 The specified range may be two colors! | | \`scale(variable_value)\` | Get the graphical representation (position, color, etc.)
for some value | | \`scale.invert(channel_value) \` | Get the value resulting in a given graphical representation | | \`scale.unknown(channel_value) \` | Set the default (channel) value for missing inputs | | \`scale.interpolate(interpolator) \` | Use \`interpolator\` to compute the actual mapping?
💣 Advanced! See https://github.com/d3/d3-interpolate
and: https://github.com/d3/d3-scale-chromatic. | | \`d3.scalePow().exponent(k)\` | Mapping of the form ${tex`y \propto x^k`} | | \`d3.scaleSqrt()\` | Special case of the former with \`k=0.5\` | | \`d3.scaleLog()\` | Logarithmic mapping | | \`d3.scaleTime() \` | Linear mapping for time variables | | \`d3.scaleQuantize() \`| Linear scale with continuous _domain_ but discrete _range_ | | \`d3.scaleOrdinal() \` | Mapping for discrete _domain_ (ordinal or not) | `35:T879,{ const inner_margin = 30 // between axes and points const outer_margin = 40 // between border and axes const margin = inner_margin+outer_margin // between border and points const graph = d3.create("svg") .attr("width", width) .attr("height", height_2d) const x_domain = d3.extent(countries, country => country.life_expectancy) const x_range = [margin, width-margin] const y_domain = d3.extent(countries, country => country.income) const y_range = [height_2d-margin, margin] const r_domain = [0, d3.max(countries, country => country.population)] const r_range = [0, 20] const c_domain = ["americas", "asia", "europe", "africa"] const c_range = ["#6EBB87", "#DA94CE", "#DE9D6C", "#2CB8EA"] const x = d3.scaleLinear().domain(x_domain).range(x_range) const y = d3.scaleLog().domain(y_domain).range(y_range) const r = d3.scaleSqrt().domain(r_domain).range(r_range) const c = d3.scaleOrdinal().domain(c_domain).range(c_range) for(let country of countries){ // part 2 graph.append("circle") .attr("cx", x(country.life_expectancy)) .attr("cy", y(country.income)) .attr("r", r(country.population)) .attr("fill", c(country.region)) .attr("stroke", "black") .attr("stroke-width", 0.4) } const make_x_axis = d3.axisBottom(x) const make_y_axis = d3.axisLeft(y) const x_axis = graph.append("g") const y_axis = graph.append("g") make_x_axis(x_axis) make_y_axis(y_axis) x_axis .attr("transform", "translate(0,"+(height_2d-outer_margin)+")") .append("text") .text("Life expectancy (years)") .attr("x", width-margin) .attr("y", -3) .attr("text-anchor","end") .attr("fill","grey") y_axis .attr("transform", "translate("+outer_margin+",0)") .append("text") .text("Income per inhabitant (dollars PPP, logarithmic scale)") .attr("transform", "rotate(-90) translate("+-250+","+-60+")") .attr("x", 0) .attr("y", margin) .attr("text-anchor","start") .attr("fill","grey") .attr("font-size",8) return graph.node() }36:T48c,md`## 3. Basic interactions We now want to implement the following behaviour: - if a country is not selected, clicking on it _selects_ it - if a country is selected, clicking on it _unselects_ it A selected country: - has thicker borders - has its name shown nearby Simple enough? \`d3.js\` has helper functions in order to prevent us from digging into the (quite technical) issue of JavaScript events. ### 3.1 Event subscriptions Let's build our exemple, starting with the border of the circles. \`d3.js\` grants us with the \`on()\` method, that is used like following: \`\`\` circle.on("click", do_something) // do_something() is defined just after \`\`\` This means that **every time a circle is clicked, the function \`do_something()\` will be called**. In the _event programming_ parlance we often express this idea in more elaborate ways. We say for instance: - the \`do_something()\` is _called back_ whenever this \`circle\` element _triggers_ (or _fires_) a \`click\` event, or - the \`do_something()\` function has a _subscription_ to the \`click\` event _in the context of_ this \`circle\`... ... but this sentences all mean the same thing.`37:T55a,md` | Event name | Context | Description | |--------------|--------------------|---------------| | \`resize\` | \`document\` | when the browser window is being or has been resized | | \`scroll\` | \`document\` | when the user is scrolling or has just scrolled | | \`keypress\` | \`document\` | when the user is typing or has just typed | | \`keydown\` | \`document\` | when the user starts pressing a key | | \`keyup\` | \`document\` | when the user stops pressing a key | | \`click\` | any element | when a user clicks on the element
⚙️ _If several elements are piled on top of each other at the click spot,
every element triggers the event._| | \`dblclick\` | any element | when a user double-clicks on the element | | \`mousedown\`| any element | when a user presses the mouse button down on the element | | \`mouseup\` | any element | when a user releases the mouse button | | \`mouseover\`| any element | when the mouse pointer enters the element | | \`mouseout\` | any element | when the mouse pointer exits the element | | \`mousemove\`| any element | whenever the mouse moves | | \`change\` | any form input | whenever the content of a form input is changed by the user | `38:T983,{ const inner_margin = 30 const outer_margin = 40 const margin = inner_margin+outer_margin const graph = d3.create("svg") .attr("width", width) .attr("height", height_2d) const x_domain = d3.extent(countries, country => country.life_expectancy) const x_range = [margin, width-margin] const y_domain = d3.extent(countries, country => country.income) const y_range = [height_2d-margin, margin] const r_domain = [0, d3.max(countries, country => country.population)] const r_range = [0, 20] const c_domain = ["americas", "asia", "europe", "africa"] const c_range = ["#6EBB87", "#DA94CE", "#DE9D6C", "#2CB8EA"] const x = d3.scaleLinear().domain(x_domain).range(x_range) const y = d3.scaleLog().domain(y_domain).range(y_range) const r = d3.scaleSqrt().domain(r_domain).range(r_range) const c = d3.scaleOrdinal().domain(c_domain).range(c_range) for(let country of countries){ // part 2 graph.append("circle") .attr("cx", x(country.life_expectancy)) .attr("cy", y(country.income)) .attr("r", r(country.population)) .attr("fill", c(country.region)) .attr("stroke", "black") .attr("stroke-width", 0.4) .on("click", do_something) // <------- THIS IS THE ONLY NEW THING ! .style("cursor", "pointer") // <------- this is not 100% needed // but it is nice to have a "pointer" mouse icon // that will hint the user that some interaction is possible. } const make_x_axis = d3.axisBottom(x) const make_y_axis = d3.axisLeft(y) const x_axis = graph.append("g") const y_axis = graph.append("g") make_x_axis(x_axis) make_y_axis(y_axis) x_axis .attr("transform", "translate(0,"+(height_2d-outer_margin)+")") .append("text") .text("Life expectancy (years)") .attr("x", width-margin) .attr("y", -3) .attr("text-anchor","end") .attr("fill","grey") y_axis .attr("transform", "translate("+outer_margin+",0)") .append("text") .text("Income per inhabitant (dollars PPP, logarithmic scale)") .attr("transform", "rotate(-90) translate("+-250+","+-60+")") .attr("x", 0) .attr("y", margin) .attr("text-anchor","start") .attr("fill","grey") .attr("font-size",8) return graph.node() }39:Tbce,{ function toggle_circle(){ let g = d3.select(this) let circle = g.select("circle") let text = g.select("text") let is_unselected = circle.attr("stroke-width") == 0.4 // when it starts it has a border width of 0.4 circle.attr("stroke-width", is_unselected ? 4 : 0.4) text .attr("display", is_unselected ? "inherit" : "none") } const inner_margin = 30 const outer_margin = 40 const margin = inner_margin+outer_margin const graph = d3.create("svg") .attr("width", width) .attr("height", height_2d) const x_domain = d3.extent(countries, country => country.life_expectancy) const x_range = [margin, width-margin] const y_domain = d3.extent(countries, country => country.income) const y_range = [height_2d-margin, margin] const r_domain = [0, d3.max(countries, country => country.population)] const r_range = [0, 20] const c_domain = ["americas", "asia", "europe", "africa"] const c_range = ["#6EBB87", "#DA94CE", "#DE9D6C", "#2CB8EA"] const x = d3.scaleLinear().domain(x_domain).range(x_range) const y = d3.scaleLog().domain(y_domain).range(y_range) const r = d3.scaleSqrt().domain(r_domain).range(r_range) const c = d3.scaleOrdinal().domain(c_domain).range(c_range) for(let country of countries){ let g = graph.append("g") // <---- G ELEMENT INSTEAD OF CIRCLE DIRECTLY g.append("text") // <---- NEST THE TEXT ELEMENT INSIDE G .attr("x", x(country.life_expectancy)) .attr("y", y(country.income)-r(country.population)-4) .attr("text-anchor", "middle") .attr("font-size",13) .attr("display", "none") // <---- hide the text to start with .text(country.name) g.append("circle") // <---- NEST THE CIRCLE ELEMENT INSIDE G .attr("cx", x(country.life_expectancy)) .attr("cy", y(country.income)) .attr("r", r(country.population)) .attr("fill", c(country.region)) .attr("stroke", "black") .attr("stroke-width", 0.4) g .style("cursor", "pointer") .on("click", toggle_circle) // <---- SUBSCRIPTION } const make_x_axis = d3.axisBottom(x) const make_y_axis = d3.axisLeft(y) const x_axis = graph.append("g") const y_axis = graph.append("g") make_x_axis(x_axis) make_y_axis(y_axis) x_axis .attr("transform", "translate(0,"+(height_2d-outer_margin)+")") .append("text") .text("Life expectancy (years)") .attr("x", width-margin) .attr("y", -3) .attr("text-anchor","end") .attr("fill","grey") y_axis .attr("transform", "translate("+outer_margin+",0)") .append("text") .text("Income per inhabitant (dollars PPP, logarithmic scale)") .attr("transform", "rotate(-90) translate("+-250+","+-60+")") .attr("x", 0) .attr("y", margin) .attr("text-anchor","start") .attr("fill","grey") .attr("font-size",8) return graph.node() }3a:[] 2f:{"id":"dad0ce476e86deb6","slug":"data-visualisation-with-d3-js-2-3","title":"Data visualisation with d3.js (2/3)","thumbnail":"5384966cd1830ee0d6dda1871b065e960f55ba66d6b3a399b9cfa739daf8aa8c","access_level":"public","create_time":"$D2021-03-01T12:49:16.992Z","update_time":"$D2023-03-02T09:57:45.277Z","view_time":null,"first_public_time":"$D2021-03-03T17:28:33.287Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7ef1324cda5ddb82","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":"starter_2024"},"version":1583,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}],"members":[{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null,"role":"editor"}],"comments":[{"id":"d2e3d5cf22882b20","reply_to_id":null,"content":"M. C'est une liste d'objet. \nN. countries[4].icome","create_time":"$D2022-03-10T09:02:04.184Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a33f03b0b2ae65b2","login":"a33f03b0b2ae65b2","name":"Oriane Foussard","avatar_url":"https://avatars-next.observableusercontent.com/bedd86ad92d64cb183cdf22528f92afc3a0a3dd70eb6e6588255733e90ea66a5","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":84,"collection":{"id":"32ec334e82a9ef2a","slug":"data-visualisation-with-d3-js","title":"Data visualisation with d3.js","owner":{"id":"7ef1324cda5ddb82","login":"katossky","name":"Arthur Katossky"}},"type":"notebook","body":{"title":"Data visualisation with d3.js (2/3)","cells":[{"id":29,"value":"md`# Data visualisation with \\`d3.js\\` (2/3)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"md `## Goal and schedule\n\n1. Refresh the basics\n2. Axes and scales\n3. Basic interactions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"md`## 1. Refresh the basics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"md`### 1.1 Observable\n\n➡️ **A.** How do you write text cells in Observable?
\n➡️ **B.** In what language can you write code cells?
\n➡️ **C.** Does it matter in what order you arrange your code cells?
\n➡️ **D.** How can you show the (hidden) code corresponding to a cell? How can you make it permanently visible?
\n➡️ **E.** What is the shortcut to run a cell? \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"md`### 1.2 Markdown\n\nHere is the Markdown syntax cheat-sheet again. Use it when you need it!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"markdown","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`### 1.3 SVG\n\nHere is a logarithmic x-axis encoded in SVG. _(We will soon learn how to create such an axis programmatically.)_ The SVG cheat-sheet has been copied below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"md`\n➡️ **F.** List 5 SVG tags contained in this excerpt. What does each tag represent?\n\n➡️ **G.** What do the \\`transform\\` attributes do?\n\n➡️ **H.** Change the \\`font-family\\` attribute to \\`monospace\\`. What happens? \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"md`➡️ **I.** Add a circle at position \\`(40,0)\\`. Are you surprised by what finally shows up and where?\n\n> 💡 _Don't forget to give your circle a radius, because it is 0 by default!_\n\n> ⚙️_The **coordinate system** starts at the top left and counts downward on the y-axis. The \\`svg\\` element is a rectangle defined by its width and heigth and by default the viewing cannot exceed this recatngle._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1220,"value":"\n\nmd`➡️ **J.** Draw the DOM (document-object-model, or structure) of this SVG object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"md`\n\\`\\`\\`\nsvg\n |- g\n | |- text\n | | |- \"Income per ...\"\n | |- path\n |- g\n | |- line\n |- text\n |- \"10\"\n\n-------------------> CONTINUE HERE <--------------------------\n(you don't have to continue once have understood the principle)\n\n\\`\\`\\`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"svg_cheatsheet","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"md`### 1.4 d3.js()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1228,"value":"md`The \\`d3.js\\` library help us with the most repetitive tasks when building SVG graphs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"d3 = require(\"d3\") // importation of the d3 library","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"md`\nLet us re-write our code so that we programtically construct our axis with \\`d3.js\\`! _(We will soon find a simpler way to do this.)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"md`\n➡️ **K.** Check that the code produces almost the same SVG graphic. You can compare the DOM of the two codes to convince yourself. What does \\`d3.create(\"svg\")\\` do? How is it different from \\`svg.append(\"g\")\\` ?\n\n> ⚙️ _\\`d3.create(\"svg\")\\`, \\`d3.create(\"circle\")\\` etc. create objects outside the DOM – it can be inserted later – whereas \\`svg.appends(\"g\")\\` inserts a \\`g\\` element directly into the DOM._\n\n➡️ **L.** The text of the axis is missing. Complete the code! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"md`\n🎉 **We are almost at the point where we can fully automate graph construction!**\n\nWe have created a code that in theory can work for any range of values for the income (a.k.a. the _**domain**_) and any size of the x-axis (a.k.a. the _**range**_). Said in an other way, we've just been **_mapping_** income **_values_** to the x-axis **_channel_**. Of course it is quite tedious to systematically write our own mapping ourselves, so in the future will rely heavily on \\`d3.js\\`' ready-made scale functions, that we are going to discover in a minute.\n\nBut first let's finish the refreshers with some JavaScript...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"md`### 1.5 JavaScript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1263,"value":"md`In the rest of the tutorial, we are going to use the following dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":456,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":549,"value":"md`\n➡️ **M.** What kind of JavaScript object is that? \n\n➡️ **N.** How can you access the \\`income\\` of the 5th country? \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"countries[4].income // your solution","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"md`\n➡️ **O.** What do the following lines of code produce? What does the arrow mean? How do you call this type of functions? \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"countries.map(country => country.life_expectancy)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"countries.map( function(country){ return( country.life_expectancy ) } )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"countries.filter(country => country.name==\"Brazil\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"countries.filter(country => [\"Brazil\", \"Colombia\"].includes(country.name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":537,"value":"countries.filter(country => country.population > 100000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":517,"value":"countries\n .filter( country => country.population > 100000000)\n .map( country => country.name) // you chain methods one to the other","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"md`➡️ **P.** How do you write a proper loop over the countries?\n\n> 💡 _JavaScript does not play by the rules here..._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"{\n let emissions = [] // empty array\n \n for(let country of countries){\n\n emissions.push(country.co2_emissions) // this goes into the loop, adds the emission number to the array\n \n }\n \n return emissions\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"md`Pfeeeeeeeew! We're are done with the revewing, so... **let's build some graphs!** 📈`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"md`## 2. Axes and scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"md`Simmilarly to ggplot2 in R, \\`d3.js\\` offers tools to:\n\n1. declare our mappings from values to channels\n2. use them to transform the data\n3. add axes and legends to guide the reader\n\nThe easiest way to understand is probably through an exemple. So let's build a **one-dimensionnal dot diagram**, showing the life-expectancy of different countries, using our \\`countries\\` dataset.\n\n### 2.1. Declare the mapping\n\nImagine that we know the **domain** (the min and max for life expectancy) and the **range** of the x-axis (the smallest and biggest x). Thanks to the \\`d3.scaleLinear()\\` function, we can then easily compute \\`x()\\`, a linear mapping that computes the x-position corresponding to any possible life expectancy.\n\n> ⚙️ _Using the words \"domain\" and \"range\" for indicating the variable's and the channel's value ranges is a \\`d3.js\\` convention, that is not universally accepted. I use them here to avoid confusion when reading the documentation._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"x_range = [60, 600]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"expectancy_domain = d3.extent(countries, country => country.life_expectancy)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":610,"value":"x = d3.scaleLinear().domain(expectancy_domain).range(x_range)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1308,"value":"x(50) // an life expectancy of 50 will be mapped to x=276","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1286,"value":"md`\n➡️ **Q.** Define \\`r()\\`, a mapping function that gives the radius associated with each country's population, where the radius varies between zero and some upper threshold you will define. Test it for \\`r(0)\\` and \\`r(30000000)\\`.\n\n> 💡 _\\`d3.scaleLinear()\\` is proabably not advised, since one expects the **area** of the circle to be proportionnal to the population, not the radius. Use \\`d3.max(array)\\` or \\`d3.max(data, element => element.property)\\` to get the max of \\`population\\`._`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1457,"value":"pop_max = d3.max(countries, country => country.population)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1456,"value":"r2 = d3.scaleSqrt().domain([0, pop_max]).range([1, 30])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1462,"value":"r2(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1464,"value":"r2(30000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1467,"value":"r2.invert(4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":744,"value":"md`You will find [here](https://github.com/d3/d3-scale) (https://github.com/d3/d3-scale), the full documentation for scales, but here is a summary:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":749,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"md`### 2.2 Transform the data\n\nThis \\`x()\\` function maps any value to its position. We can thus use it in a loop, in order to build our graph programmatically:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":582,"value":"{\n const graph = d3.create(\"svg\")\n .attr(\"width\", x_range[1]+10)\n .attr(\"height\", height_1d)\n \n for(let country of countries){\n \n graph.append(\"circle\")\n .attr(\"cx\", x(country.life_expectancy)) // x() used for positionning the circles\n .attr(\"cy\", height_1d/2)\n .attr(\"r\", 10 )\n }\n \n return graph.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1323,"value":"md`\n➡️ **R.** Use your \\`r()\\` function to change the radius as well.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"md`### 2.3. Axes and legends\n\nThe mapping functions (such as \\`x()\\` and \\`r()\\`) can also be used to build legends. For instance we can use \\`x()\\` inside the \\`d3.axisBottom()\\`, \\`d3.axisTop()\\`... family of functions in order to get yet a new function – so many functions, I'm getting lost 😱, let's call it the axis factory – that will build the x-axis.\n\nIt is always easier with an exemple:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":652,"value":"{\n const graph = d3.create(\"svg\")\n .attr(\"width\", x_range[1]+10)\n .attr(\"height\", height_1d)\n \n const x_axis = graph.append(\"g\") // create a container\n \n const make_x_axis = d3.axisBottom(x) // create the axis factory – we can add options here\n \n make_x_axis(x_axis) // transforms the countainer into a proper axis\n // you will often see: x_axis.call(make_x_axis), which is the same\n \n return graph.node()\n}\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1337,"value":"md`For a list of the (very limitted) options provided by d3.js to customize the axes, see [here](https://github.com/d3/d3-axis). Also, \\`d3.js\\` only has legend support for x and y coordiantes. For similar tools for colors and sizes, see https://d3-legend.susielu.com.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":717,"value":"md`### 2.4 Our first complete graph\n\nPutting everything together, we obtain **our first programatically built (one-dimensionnal) graph!** It does not look like much, but we now have all the ingredients to make complex graphs. In fact, we are now equipped to make arbitrary complex designs, as you are going to experiment just now.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1356,"value":"r = d3.scaleSqrt().domain([0,d3.max(countries, c => c.population)]).range([0,20])\n// in case of conflict with your earlier code, you can comment either definitions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":723,"value":"{\n const graph = d3.create(\"svg\")\n .attr(\"width\", x_range[1]+10)\n .attr(\"height\", height_1d)\n \n for(let country of countries){ // 2.2\n graph.append(\"circle\")\n .attr(\"cx\", x(country.life_expectancy))\n .attr(\"cy\", height_1d/3)\n .attr(\"r\", r(country.population))\n }\n \n const x_axis = graph.append(\"g\") // 2.3\n \n const make_x_axis = d3.axisBottom(x)\n \n make_x_axis(x_axis)\n \n x_axis\n .attr(\"transform\", \"translate(0,40)\") // <---------- THIS IS NEW.\n // Change the \"dy\" translation to adjust the bar vertically.\n .append(\"text\")\n .text(\"Life expectancy (years)\")\n .attr(\"x\", x_range[1])\n .attr(\"y\", -3)\n .attr(\"text-anchor\",\"end\")\n .attr(\"fill\",\"grey\")\n \n \n return graph.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"md`\n➡️ **S.** Copy the exemple in a new cell. Add a mapping \\`c()\\` from regions to colors.\n\n> _There are only 4 broad regions: \\`[\"asia\",\"africa\",\"europe\",\"americas\"]\\` You may use this range of colors: \\`[\"#6EBB87\", \"#DA94CE\", \"#DE9D6C\", \"#2CB8EA\"]\\`, because the design of perceptually uniform color schemes is beyond the scope of this tutorial._\n\n➡️ **T.** Process similarly for mapping the income to th y-axis.\n\n> _You may chose whether you prefer a linear scale or a logarithmic one. Use \\`d3.extent(array)\\` or \\`d3.extent(data, element => element.property)\\` to get the domain of \\`income\\`. Remember that (0,0) is the top-left corner._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":879,"value":"md`**ET VOILÀ!** Here is your first graph!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":882,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":982,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"md`There are plenty of events that are predefined _( see [here](https://developer.mozilla.org/en-US/docs/Web/Events) for the complete list. _🤯_)_ but we can also define our own events and fire them programmatically. Most of the predefined events involve interaction with the user through the mouse or the keybord.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1077,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"md`We also need to design the behaviour we want. We said we would first focus on the border thickness:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1027,"value":"function do_something(){\n \n let circle = d3.select(this).selectAll('circle') // \"this\" is a special keyword\n // Inside even callback functions,\n // it refers to the \"context\" of the event\n // i.e. the element that triggered the event.\n \n let is_unselected = circle.attr(\"stroke-width\") == 0.4 // circles start unselected with a stroke width of 0.4\n \n circle.attr(\"stroke-width\", is_unselected ? 4 : 0.4) // If it is unselected (thin border),\n // then we select it (make it thicker)\n // and conversely.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1037,"value":"md`You can now try the new version of the graph, just hereunder. Notice how we only needed one new line for enabling the interaction.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1022,"value":"\nmd`\n### 3.2 Practice time\n\nIn order to implement the desired behaviour for the labels, we need to have labels in the first place!\n\n➡️ **U.** Copy the previous code in a new cell and, instead of adding the \\`circle\\` elements directly to the graph, add a \\`g\\` element, in which you will put both a \\`circle\\` and a \\`text\\` element containing the corresponding label.\n\n> 💡 _Make sure the labels are centered above the circle!_\n\nInstead of:\n\n\\`\\`\\`\nsvg\n |- circle\n |- circle\n |- circle\n...\n\\`\\`\\`\n\n... you should now have:\n\n\\`\\`\\`\nsvg\n |- g\n | |- text \n | |- circle\n |- g\n | |- text \n | |- circle\n...\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1134,"value":"md`\n➡️ **V.** Hide the text with the \\`opacity=0\\` or \\`display=\"none\"\\` attributes.\n\n> 💡 _The differentce between the two is that a transparent element can still be clicked._\n\n➡️ **W.** Write a \\`toggle_circle()\\` function that changes back and forth : (a) the thickness of the circle's border and (b) the visibility of the text (\\`opacity=1\\` or \\`display=\"inherit\"\\` depending on your former choice).\n\n➡️ **X.** Subscribe this function to the click events on the \\`g\\` elements you just created.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1154,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1186,"value":"md`\n➡️ **[If you find the time.] Y. ** Add a reactive legend at the top of the graph, whose content is updated when you hover a new circle.\n\n> _The label should read something like: \"[Country] has a life-ecpectancy of [number] years and an income of [number] dollars.\"_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1203,"value":"md`## Appendices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":660,"value":"height_1d = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":885,"value":"height_2d = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"import {markdown, svg_cheatsheet} from \"@katossky/data-visualisation-with-d3-js-1-3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1392,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1051,"value":"// TO DO: how to build a simple legend for circles and colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"