2b:null 2c:["$","title",null,{"children":"Data visualisation with d3.js (1/3) | Arthur Katossky | Observable"}] 31:T4ef,markdown = md` | Rendering | Syntax | | ----------------------- | ------------------------------------- | |

Heading 1

| \`# Heading 1\` | |

Heading 2

| \`## Heading 2\` | |

Heading 3

| \`### Heading 3\` | |

Heading 4

| \`#### Heading 4\` | | paragraph | \`paragraph\` | | **bold** | \`**bold**\` | | _italic_ | \`_italic_\` | | blockquote | \`> blockquote\` | | \`inline-code\` | \`\` \`inline-code\` \`\` | | \`block-code\` | \`\` \`\`\` \`\` \`{optionnal-language-identifier}\`
\`block-code\`
\`\` \`\`\` \`\`| | list (unordered) | \`[empty line]\`
\`* Item 1\`
\`* Item 2\`
\`* Item 3\`| | list (ordered) | \`[empty line ; the actual numbers do not matter]\`
\`1. Item 1\`
\`1. Item 2\`
\`3. Item 3\`| | image | \`![description](path/to/image.jpg)\` | | [hyperlink](/) | \`[hyperlink](/path/to/page)\` | `32:T452,## 2. SVG ### 2.1 A vector image format ideal for graphics **SVG** is a XML language for **vectorial images**, i.e. **images described by parametrized curves**. It represents images in a completely different philosophy than pixel-based image formats, also called rasters, such as PNG or JPG. Instead of pixels, it uses basic geometrical shapes, such as circles, squares, ellipses and curves, to construct more complex structures. It is wildly used for fonts, icons, schemas, graphs, etc. ${await FileAttachment("raster-vs-vector@2.png").image()} The advantage of this approach is that **a given image can be magnified at will**. The downside is that it may take a huge file to represent very detailed, realistic, complex images. If you think of the depiction of a lion's fur, its SVG representation would be insanely voluminous since in theory each individual hair of the fur would need its own vectorial representation encoded into the file! But we don't mind since **graphics are generally simple but scalable**. It is indeed encoded in the name of the format: **S**calable, **V**ector, **G**raphics.33:Taac,svg_cheatsheet = md` | Tag | Attributes | Effect | |--------|-----------------------------------|--------| | \`svg\`| \`width\`, \`height\`, \`viewBox\`| declares a SVG image of size \`width×height\`
\`viewBox\` can change the units of the coordinate system
⚠️ _All the elements inside this tag are positionned
from the top-left corner. This can be counter-intuitive:
we are used to coordinate systems stemming
from the bottom-left._| | \`rect\` | \`x\`, \`y\`, \`width\`, \`height\` | a rectangle whose top-left corner is positionned at \`(x,y)\`
with dimensions \`width×height\`| | \`circle\` | \`cx\`, \`cy\`, \`r\` | a circle centered at \`(cx,cy)\` with a radius \`r\` | | \`line\` | \`x1\`, \`x2\`, \`y1\`, \`y2\` | a line from point \`(x1,y1)\` to point \`(x2,y2)\` | | \`polygon\` | \`points\` | a (closed) polygon | | \`polyline\` | \`points\` | an (open) broken line | | \`path\` | \`d\` | a complex curve specified by \`d\`
_The exact specification of a path is complicated ;
most of the time paths are conputational results
and do not need to be explicitly constructed._ | | \`text\` | \`x\`, \`dx\`, \`y\`, \`dy\`, \`text-anchor\` | a text at position \`(x+dx,y+dy)\`, where position by default
references the leftmost letter, but possibly the word's
center (\`text-anchor='middle'\`) or the rightmost
letter (\`text-anchor='right'\`) | | \`g\` | \`-\` | a group of elements, to be manipulated as a single entity | | [many tags] | \`fill\` | color of the inside of an element | | [many tags] | \`fill-opacity\` | transparency of the inside | | [many tags] | \`stroke\` | color of the line components of an element | | [many tags] | \`stroke-width\` | width of the line components | | [many tags] | \`stroke-opacity\` | transparency of the line components | | [many tags] | \`transform\` | operates a series geometrical transformations
(rotations, translations, etc.) to an element | | [many tags] | \`id\` | a unique identifier of this element | | [many tags] | \`class\` | one or several categories to which this element belongs | | text | \`font-family\` | font for the text, either a category among:
\`serif\`, \`sans-serif\`, \`cursive\`, \`fantasy\` or \`monospace\`
or a specifc font such as \`Arial\`, \`Verdana\`, \`Times\`, etc. | | text | \`font-size\` | size of the text | `34:T464,blue_icon = { const icon = d3.create("svg") // create a svg element and refer to this element as "icon" .attr("width", 48) // change the attributes .attr("height", 48) icon.append("circle") // add a circle nested in the svg element .attr("fill", "blue") // change the attributes .attr("cx", 24) .attr("cy", 24) .attr("r", 24) const i = icon.append("g") // add a g nested in the svg element, after the circle // and refer to this element as "i" (this is NOT a copy, but rather an alias) i.append("circle") // add a circle nested in the g element aliased as "i" .attr("fill", "white") // change the attributes .attr("cx", 24) .attr("cy", 11.6) .attr("r", 4.7) i.append("path") // add a path nested in the g element aliased as "i" .attr("fill", "white") .attr("d", "m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6") return icon.node() // return the proper SVG }35:T7c3,md `## 3. JavaScript and \`d3.js\` basics ### 3.1 JavaScript overview JavaScript is the language used by every single web browser to enable interactivity between the user and any web page. **We are not going to spend time trying to learn JavaScript properly**, since superficially the syntax is not much different from, say, Python. Instead, I am giving you hereunder you a couple cheat-sheets that you can refer to whenever you code. However, you should keep the three following possibly confusing things in mind: - **JavaScript is weakly typed:** types are not a strict property of variables and conversions can happen without a warning. For instance \`[]==0\` gives true, even though \`[]\` is an empty array! A lot of basic functions (such as \`+\`) behave differently when they work with number (\`+\` means plus) or strings of characters (\`+\` means concatenation). That can cause a lot of errors. - **JavaScript assigns by reference functions, arrays and objects, and by value the rest.** Let say you have a variable \`a=35\`. When you create a new variable \`b=a\`, a language that assigns _by reference_ does not actually create a new variable. Instead, it just creates an alias that points to the same original variable. Changing the value of \`b\` thus changes also the value of \`a\`. The opposite behaviour is called assigning by value. But JavaScript changes behaviour depending on the type of the variable, alike Python but contrary to R! - **JavaScript does not have a standard way to emphasize the methods that change an object in place.** As most programming languages, JavaScript has a mix of functions that change a variable _in place_ and of functions that preserve the variable and return a modified copy. But JavaScript does not have a clear syntax for making the difference. R for instance has the <- syntax that tells the user that he is modifying some properties of a variable, such as in \`colnames(matrix)<-names\`. This is not the case in JavaScript. `36:T4fe,md` #### Basic types | Syntax | Effet | |------------------------------------|------------------------| | \`true\`, \`false\` | Boolean | | \`18\`, \`3.11\`, \`0.111\`, etc. | Number | | \`NaN\` | Not a number
_Special value for the number type._ | | \`Infinity\`, \`-Infinity\` | Infinity
_Special value for the number type._ | | \`"elephant"\`, \`'🐬'\`, \`"Waw!"\`, etc. | String | | \`undefined\`, \`null\` | No value
_The difference between the two is very subtle._ | | \`function(a,b){return a+b} \` | Function | | \`{}\` | Empty object | | \`[]\` | Empty array | | \`{ attribute1 : "A", attribute2 : "B" }\` | Object | | \`["A", 1, null, false, "B"]\` | Array | | \`{array_attribute : [false, "two", 3]}\` | Object containing an array | | \`[{x:3}, {x:5}, {x:2.5, y:10}]\` | Array containing objects
_**Datasets are usually represented as arrays of objects.**_ | `37:Ta30,md` #### Operations | Syntax | Effet | |----------------------------|------------------------| | \`+\`, \`-\`, \`*\`, \`/\` | Usual operations on numbers | | \`%\` | Modulo | | \`**\` | Exponentiation | | \`Math.sqrt()\`, \`Math.log()\`, \`Math.ceiling()\`, etc. | Other operations | | \`<\`, \`<=\`, \`>\`, \`>=\` | Order comparisons | | \`!\` | Logical NOT | | \`==\`, \`!=\`, \`===\`, \`!==\` | (Strict) (in)equality
_Strict equality does not perform conversions.
\`[]==0\` is true but not \`[]===0\`_ | | \`&&\` | Logical AND | | || | Logical OR | | \`"aaaa"+"bbbbb" \\\\ "aaaabbbbb" \` | Concatenation | | \`"aaaa".length \\\\ 4\` | Character strings have properties | | \`"aaaa".toUpperCase() \\\\ "AAAA"\` | Character strings have methods | | \`person = {age: 35}\` | | | \`person.age\` | Access a property of an object | | \`person['age']\` | Access a property of an object | | \`person['height']=160 \` | Change the property of an object
_The property does not need to exist._ | | \`var = 'age' ; person[var]\` | Progamatically access a property of an object | | \`persons = [{age:45}, {height:160}]\` | | | \`persons[0] \\\\ {age:45}\` | Access an element of a array
_Indices start at 0._ | | \`persons.length \\\\ 2\` | Number of elements | | \`persons[100] = {} \` | Change an element of the array
_The new position is created if it does not exist._ | | \`persons.sort()\`, \`persons.reverse()\`, etc. | Arrays have methods
_Some of those methods change the array itself
("in-place" modification) whereas others
return the new value. See [here](https://github.com/d3/d3-array) for a list._ | | \`persons.map(person => person.age)\` | Return a copy of the array,
to each element of which the function
\`person => person.age\`
has been applied| | \`persons.join(sep)\` | Return a copy of all the elements,
converted to string and concatenated
with the \`sep\` separator | | \`persons.reverse()\` | Return a copy of the array, starting from the last element | | \`persons.indexOf(person) \` | Return the index (position) of \`person\` in \`persons\` | | \`persons.push(person) \` | Add \`person\` at the end of \`persons\`, in place | | \`persons.includes(person) \` | Return \`true\` if \`persons\` contains \`person\` | `38:T5d9,md` #### Basic statements | Syntax | Effet | |----------------------------|------------------------| | \`3+4 \\\\ This is a comment. \` | Inline comments | | \`\\* This is a comment. *\\\` | Multiline comments | | \`console.log("Hello!")\` | Write into the console
_In order to see the console in a browser,
you need to open the developer tools
(right-click then "Inspect" on Chrome for instance)._ | | \`const variable = value\` | Immutable assignment | | \`let variable = value\` | Mutable assignment | | \`typeof variable\` | Get the type | | \`function add(a, b){return a+b}\` | Function definition
_Functions can be defined after (!) their use,
a behaviour known as **hoisting**._ | | \`function(a,b){return a+b}\` | Anonymous (unassigned) function | | \`(a,b) => a+b\` | Anonymous (unassigned) function | | \`let add = (a,b) => a+b\` | Anonymous functions can be assigned | | \`for(let i = 0; i < 10; i++) { ... }\` | For loop with counter | |

for(let elt of my_array){ ... }

| For loop without counter
⚠️ Unusual syntax | | \`if(condition) { ... } else { ...}\` | If-else statement | | \`let animal = purrs ? "cat" : "dog"\` | One-line if-else assignment | | \`while (condition) { ... }\` | While loop | | \`continue\` | Quit the current iteration | | \`break\` | Quit the loop | `39:T5b4,countries = [ {color: "#6EBB87", x: 424, y: 128, r: 16.85, name: "China"}, {color: "#6EBB87", x: 437, y: 158, r: 14.23, name: "India"}, {color: "#DA94CE", x: 642, y: 116, r: 6.33, name: "Russia"}, {color: "#6EBB87", x: 651, y: 88, r: 5.80, name: "Japan"}, {color: "#DA94CE", x: 678, y: 98, r: 4.76, name: "Germany"}, {color: "#6EBB87", x: 512, y: 145, r: 6.54, name: "Indonesia"}, {color: "#DE9D6C", x: 605, y: 129, r: 5.96, name: "Brazil"}, {color: "#DA94CE", x: 654, y: 97, r: 4.04, name: "United Kingdom"}, {color: "#DA94CE", x: 662, y: 95, r: 4.04, name: "Italy"}, {color: "#DA94CE", x: 666, y: 93, r: 3.96, name: "France"}, {color: "#6EBB87", x: 424, y: 164, r: 4.86, name: "Bangladesh"}, {color: "#6EBB87", x: 478, y: 145, r: 4.76, name: "Pakistan"}, {color: "#DA94CE", x: 593, y: 111, r: 3.81, name: "Ukraine"}, {color: "#DA94CE", x: 644, y: 90, r: 3.31, name: "Spain"}, {color: "#DE9D6C", x: 617, y: 118, r: 4.48, name: "Mexico"}, {color: "#DA94CE", x: 608, y: 107, r: 3.22, name: "Poland"}, {color: "#6EBB87", x: 531, y: 128, r: 3.71, name: "Philippines"}, {color: "#DA94CE", x: 623, y: 108, r: 2.56, name: "Romania"}, {color: "#DE9D6C", x: 675, y: 92, r: 2.66, name: "Canada"}, {color: "#2CB8EA", x: 609, y: 152, r: 2.90, name: "South Africa"}, {color: "#DE9D6C", x: 563, y: 115, r: 2.83, name: "Colombia"}, {color: "#2CB8EA", x: 454, y: 169, r: 2.76, name: "Congo, Dem. Rep."} ]3a:T70a,### 3.3 `d3.js` `d3.js` is a collection of JavaScript modules (or libraries) intendended to help you make very customized, advanced graphs. They are several other libraries available to produce graphs from high-level templates, such as [Vega Lite](https://vega.github.io/vega-lite), [Plotly](https://plotly.com/javascript) or more recently [Plot](https://observablehq.com/@observablehq/plot). But more often than not, you need to solve a specific issue and Vega's or Plotly's _prêt-à-porter_ needs to be replaced by `d3.js`' _sur-mesure_. Each of `d3.js`'s modules is very well documented, but the documentation can be intimidating for beginners, since it contains a lot of JavaScript jargon, even when most of the time you don't need to understand what is going on under the hood. I will provide a summary of the main features of each modules, so that you don't need to cope with the documentation right from the beginning. Here are the ones we are going to learn using: - [`d3-selection`](https://github.com/d3/d3-selection), for simple construction of SVG elements - [`d3-array`](https://github.com/d3/d3-array), for manipulating datasets and computing summary statistics - [`d3-scale`](https://github.com/d3/d3-scale), for defining visual channels - [`d3-axis`](https://github.com/d3/d3-axis), for constructing x and y-axes - [`d3-color`](https://github.com/d3/d3-color), for dealing with colors - [`d3-transition`](https://github.com/d3/d3-transition), for smooth animations If you are curious, ** you will find [here](https://github.com/d3/d3/blob/master/API.md) a list of all existing features**. This is extremely usefull when you know what you want but you don't know the name of a function. But **for now we are going to focus on `d3.select`**, which is the founding block for the rest.3b:Tb22,md` | Syntax | Effect | |--------| -------| | \`parent = d3.create("type1")\` | Create \`parent\` an element of type \`type1\`
_Typically an SVG tag such as \`cicle\`, \`line\`, \`g\`, etc.
The element is not yet inserted anywhere
and exists only in the code, but not in the DOM._| | \`parent.append("type2")\` | Create an element of type \`type2\` (the "child")
inside the \`parent\` element| | \`child = d3.create("type2")\`
\`parent.append(child)\` | Same as above
_...but with an alias for the child element, for later use_ | | \`child = d3.create("type1").append("type2)\` | Same as above
_Methods can be chained_ | | \`child = parent.select("type")\` | Select **the first** descendent
(child, or grandchild, or grandgrandchild...)
of type \`type\` contained in the parent element | | \`children = parent.selectAll("type")\` | Select **all** the descendents
(child, or grandchild, or grandgrandchild...)
of type \`type\` in the parent element
_The result is a collection of several elements_ | | |
_Some of the following functions are suited
for collections of elements, some for a single element,
some for both. It is wise to check!_ | | \`element.text()\` | Get the text content of an element | | \`element.text("Some text")\` | Set the text content of an element | | \`element.attr("attribute_name")\` | Get the atribute value of an element | | \`element.attr("attribute_name", value)\` | Set the attribute value of en element | | \`element.style("attribute_name")\` | Get the style attribute of an element | | \`element.style("attribute_name", value)\` | Set the style attribute of an element | | \`element.property("name")\` | Get the property of an element
_This is used for interacting with buttons, sliders, etc._ | | \`element.property("name", value)\` | Set the property of an element
_This is used for interacting with buttons, sliders, etc._| | \`elements.node()\` | Get the actual first SVG element | | \`element.call(my_function)\` | Same as \`my_function(element)\`
but returns \`element\` so that you can
chain with other methods. | | |
_The following functions also work for single elements._ | | \`elements.each(my_function)\` | Call a function for each element. | | \`elements.nodes()\` | Returns an array of all selected elements.| | \`elements.size()\` | Get the number of elements in the collection | | \`elements.on("event_type", my_function)\` | Make the \`my_function()\` function called back
any time any element from the \`elements\` collection
triggers an event of type \`event_type\` | | \`elements.dispatch("event_type")\` | Make each element from the \`elements\` collection
trigger an event of type \`event_type\` | `3c:T44e,md` ➡️ **M.** With \`d3.js\` add a \`g\` element to the \`svg\` element, and inside it, add a circle. _Make sure you give it a positive radius (\`r\` attribute). You may wish to change the color (\`fill\` attribute)._ Add a second one and a third circle. _Change the \`cx\` and \`cy\` attributes of each so that they do not get exactly superimposed._ ➡️ **N.** In one statement, select all the added circles, and make their border red. _You can use \`selectAll("type")\` to select all elements of type \`type\` and you can chain methods._ ➡️ **O.** Add a \`text\` element to the \`svg\`, with the text content: "Number of circles: 3". ➡️ **P.** Create a \`counter\` variable initiated at 3. Write a function \`add_circle()\` that adds a circle to the \`g\` element at a random position in the square and updates the counter and the text accordingly. > 💡 _\`Math.floor(Math.random() * 200)\` gives you an integer between 0 and 200._ ➡️ **Q.** Subscribe the \`add_circle()\` function to the "click" event on the svg element. Test it by clicking on the graph. `3d:T6a3,{ let svg = d3.create("svg") .attr("height", 300) .attr("width", 300) .style("cursor", "pointer") // cherry on the cake: make the mouse pointer know something can happen // question M const g = svg.append("g") // "const" because the objet does not change g.append("circle").attr("r", 10).attr("cx", 20).attr("cy", 40) g.append("circle").attr("r", 5).attr("cx", 100).attr("cy", 10) g.append("circle").attr("r", 30).attr("cx", 50).attr("cy", 130).attr("fill", "pink") // question N g.selectAll("circle").attr("stroke", "red").attr("stroke-width", "2") // question O const text = svg.append("text") // "const" because the objet does not change .text("Number of circle: 3, click for more.") .attr("x", 3) .attr("y", 180) .attr("font-size", 10) // Question P let counter=3 // "let" because the counter's value is going to change let radius = 10 function random(min, max) { // helper function, generates random bumbers between min and max return Math.random() * (max - min) + min; } function add_circle(){ // good approaches: // let random_x = Math.floor(Math.random() * 200) // let random_x = random(0, 200) // even better approach: // (prevents the circle to lend outside the viewing window) let random_x = random(radius, 200-radius) let random_y = random(radius, 200-radius) g.append("circle").attr("cx", random_x).attr("cy", random_y).attr("r", radius) counter = counter + 1 text.text("Number of circle: "+counter+", click for more.") } add_circle() // test // Question Q svg.on("click", add_circle) return svg.node() }3e:[{"id":"28ac886696f6c34ad056cee734320fe5795e66483f38c7b1f76d423c89a6e1882b42601de7becea41b721fb1709c5b34ebc23b8e2d808930f25a7a214366d065","href":"https://static.observableusercontent.com/files/28ac886696f6c34ad056cee734320fe5795e66483f38c7b1f76d423c89a6e1882b42601de7becea41b721fb1709c5b34ebc23b8e2d808930f25a7a214366d065","name":"raster-vs-vector@2.png","type":"image/png","lastModified":1614082082096.007,"size":91711}] 2f:{"id":"4048c53343c937fc","slug":"data-visualisation-with-d3-js-1-3","title":"Data visualisation with d3.js (1/3)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-02-11T16:02:18.620Z","update_time":"$D2023-02-09T10:05:01.023Z","view_time":null,"first_public_time":"$D2021-03-01T15:46:04.778Z","fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"7ef1324cda5ddb82","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":"starter_2024"},"version":2019,"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":"7b082f6e019a9406","reply_to_id":null,"content":"Here is a possibility:\n","create_time":"$D2021-02-23T17:03:56.686Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"4eea39d83946be11","reply_to_id":"7b082f6e019a9406","content":"`fill='none'` and `fill-opacity=0` are more or less equivalent.","create_time":"$D2021-02-23T17:14:37.585Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"69474fd1c545bc3c","reply_to_id":null,"content":"You can affect multiple element with a single statement. If you wanted to do the same at each level, you would have to change the center of the circle and completely change the coordinates of the path attribute.","create_time":"$D2021-02-23T17:54:06.858Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"cdcc6d4680e9e362","reply_to_id":null,"content":"In const i = icon.append(\"g\"), i is really an ALIAS referring to the element. If you remove the g element from icon itself, i's content will go away too!=","create_time":"$D2021-02-24T09:38:18.472Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"303bb3363c99c392","reply_to_id":null,"content":"A possible solution: function dist (a,b) {\n let sum = 0\n for(let i = 0; i < a.length; i++){\n sum += (a[i]-b[i])**2\n }\n return Math.sqrt(sum)\n}","create_time":"$D2021-02-24T14:40:28.575Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"5dfb976a5841185d","reply_to_id":null,"content":"Quand la caissière lui eut rendu la monnaie de sa pièce de cent sous, Georges Duroy sortit du restaurant.","create_time":"$D2021-03-10T16:09:21.925Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e4d381230fb52857","login":"capin","name":"Alexandre Tillatte","avatar_url":"https://avatars-next.observableusercontent.com/9cfbe71c877a5af54f24c4bc0186d80397f08314988fe9bf9e02bfd00ec40857","tier":null}},{"id":"04476cd3321bc346","reply_to_id":null,"content":"A chaque fin de ligne de code, on doit mettre \"/\" avant le \">\" ? Pourquoi à la troisième ligne, on n'a pas de \"/\", alors qu'on en a un a la ligne 4 ?","create_time":"$D2021-03-10T16:18:40.719Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"77d20fb8700b6acc","login":"clotilde-23","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dc3e4df0178d48b0d25c7107710a6f5970992c7169a0eedf0312797b8da5320","tier":null}},{"id":"a983087864f5c0f2","reply_to_id":"04476cd3321bc346","content":"Non, en fait les attributs se placent DANS la balise. La balise c'est (parce que c'est une balise simple). Du coup quand je rajoute les attributs ça donne: . Par contre pour ... (qui une paire de balise), cela donne .... C'est plus clair?","create_time":"$D2021-03-10T16:48:26.718Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"fc5e9b3878a896a5","reply_to_id":"04476cd3321bc346","content":"Oui merci beaucoup, j'ai compris !","create_time":"$D2021-03-10T20:12:12.424Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"77d20fb8700b6acc","login":"clotilde-23","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dc3e4df0178d48b0d25c7107710a6f5970992c7169a0eedf0312797b8da5320","tier":null}},{"id":"b6d3663012ec2abd","reply_to_id":null,"content":"je ne sais pas si c'est mon anglais ou mon absence de talent mais la moindre ligne de code m'indique une erreur","create_time":"$D2021-03-10T20:36:44.422Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"6c07537a0eea6dbf","login":"louispetatlenoir","name":"","avatar_url":"https://avatars-next.observableusercontent.com/59f0b685b6025896b2eb4107e751b51e0f730ea7c5c60039260b9f921252ce13","tier":null}},{"id":"98f06e61e5a22d72","reply_to_id":"69474fd1c545bc3c","content":"Je pense que j’insère la ligne de code au mauvais endroit car cela ne me renvoi rien. On doit bien y mettre dans l'avant dernière ligne ?!","create_time":"$D2021-03-10T20:58:25.175Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"6c07537a0eea6dbf","login":"louispetatlenoir","name":"","avatar_url":"https://avatars-next.observableusercontent.com/59f0b685b6025896b2eb4107e751b51e0f730ea7c5c60039260b9f921252ce13","tier":null}},{"id":"dc26bd525856754a","reply_to_id":"b6d3663012ec2abd","content":"Hahahaha! Non, ce n'est pas du code :) C'est des commentaires.\n\nDonc non c'est normal que cela fasse des erreurs. Et ton talent n'y est pour rien.","create_time":"$D2021-03-10T22:25:18.447Z","update_time":"$D2021-03-10T22:25:54.169Z","resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"198097bd2e3327b6","reply_to_id":"69474fd1c545bc3c","content":"Ah oui je vois la confusion. Non, pour les PAIRES de balises, les attributs se mettent dams la balise ouvrante, donc cela donne ici ....","create_time":"$D2021-03-11T07:09:46.138Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"23f31619d8abe7f1","reply_to_id":"5dfb976a5841185d","content":"Moi, Adam et Eve, j'y crois plus tu vois, parce que je suis pas un idiot : la pomme ça peut pas être mauvais, c'est plein de pectine... \nJCVD","create_time":"$D2021-03-11T07:34:42.038Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c9c9330dc8604682","login":"maximebeaulieu","name":"Maxime Beaulieu","avatar_url":"https://avatars-next.observableusercontent.com/0b52030dd9de62101b43e40e45e41a3f1aa7422f5ea17c2f2b9908e7ffd72e9c","tier":null}},{"id":"fa01cf33f73aac00","reply_to_id":"5dfb976a5841185d","content":"Entre Van Damme et Maupassant, je ne sais pas qui a ma préférence...","create_time":"$D2021-03-11T07:39:58.494Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}},{"id":"9ae71ddeebaf192b","reply_to_id":"5dfb976a5841185d","content":"Who does the malin fall in the ravin.","create_time":"$D2021-03-11T09:05:52.584Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e4069b9b0eb3829b","login":"angelds","name":"angelina denis","avatar_url":"https://avatars-next.observableusercontent.com/d5bfe170f601c8283487cdd8486f49c5e28582ab6ff8e6786a643a4b64f110c6","tier":null}},{"id":"8e7b93fa964f17f3","reply_to_id":null,"content":":)","create_time":"$D2023-02-09T09:01:39.760Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"0b8e3c76ed43ba05","login":"maximeboissy26","name":"Maxime Boissy","avatar_url":"https://avatars-next.observableusercontent.com/81f9884595945168c5e57d5b0706ad87fb98020548e0844c4ab556ecfcb99a94","tier":null}},{"id":"8e9a097c24281113","reply_to_id":"5dfb976a5841185d","content":"comment","create_time":"$D2023-02-09T09:17:50.342Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"e72272034244c944","login":"marine-vierling3","name":"Marine Vierling","avatar_url":"https://avatars-next.observableusercontent.com/2b404c929e6aa65ba250959ae6c6f5e6b69179dde98635688667c0ec32c45d2c","tier":null}},{"id":"fcca93bc2ad5ec84","reply_to_id":"5dfb976a5841185d","content":"Another comment","create_time":"$D2023-02-09T09:24:05.247Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1b6cfc27b490bd68","login":"horeb","name":"Horeb SEIDOU","avatar_url":"https://avatars-next.observableusercontent.com/57ab5344ae8c42de70dfd437d563dd6c2e4d8bb7c69593703d43584e1d14bcd3","tier":null}},{"id":"d11a38489f7143d3","reply_to_id":"8e7b93fa964f17f3","content":"My value here was 15 :)","create_time":"$D2023-02-09T09:25:15.641Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c6c1f82544ca8e78","login":"tomagon","name":"Tom AGONNOUDE","avatar_url":"https://avatars-next.observableusercontent.com/46b7c92aa451ea8cd5ec62f7db7175784da01060a3ad345254b68e6dd189d43e","tier":null}},{"id":"95ad3ec2efbf73dc","reply_to_id":"8e7b93fa964f17f3","content":":))))))))))))","create_time":"$D2023-02-09T09:26:28.844Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"2b02ffb67d83e97a","login":"melissa-baietto","name":"Melissa Baietto","avatar_url":"https://avatars-next.observableusercontent.com/4728676c47697cad8317ba7bf85cf99ed2cced641710a6d9b2fa9730ceb7e744","tier":null}},{"id":"9445154993566f3b","reply_to_id":null,"content":";)","create_time":"$D2023-02-09T09:27:41.712Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"e3ca2e8b0282ffd6","login":"marie-anais-verdin","name":"Marie-Anaïs","avatar_url":"https://avatars-next.observableusercontent.com/26da28f31adc3cb76fd08da7051c23ffabf474b26a181378596992854538fbb8","tier":null}},{"id":"40c1236fc4f8fd1f","reply_to_id":"04476cd3321bc346","content":"C'est très clair !","create_time":"$D2023-02-09T09:28:30.986Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9b4d9fbbe094d374","login":"gaulvoland","name":"Gaulthier Voland","avatar_url":"https://avatars-next.observableusercontent.com/7c921048b4a885af200d691f309def739153bdfa1832c90f576df1c7886c53b6","tier":null}},{"id":"d7ec567bc3103815","reply_to_id":"9445154993566f3b","content":"COUCOU","create_time":"$D2023-02-09T09:28:56.065Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"2b02ffb67d83e97a","login":"melissa-baietto","name":"Melissa Baietto","avatar_url":"https://avatars-next.observableusercontent.com/4728676c47697cad8317ba7bf85cf99ed2cced641710a6d9b2fa9730ceb7e744","tier":null}},{"id":"269fae2b7430282e","reply_to_id":"9445154993566f3b","content":"Moi j'adore l'eau, dans 20 ou 30 ans y en aura plus","create_time":"$D2023-02-09T09:31:12.714Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b42e4b714f97b7ca","login":"hirtzetienne","name":"Etienne Hirtz ","avatar_url":"https://avatars-next.observableusercontent.com/7b9404a8b1b32e6110033b2dd393cca8487aed9c53e9ff81966578ccb7d3148e","tier":null}},{"id":"a402d6562fe7e32b","reply_to_id":null,"content":"COMMENTAIRE","create_time":"$D2023-02-17T13:34:06.508Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9452344cbc627004","login":"apolline","name":"Apolline","avatar_url":"https://avatars-next.observableusercontent.com/4b84bd1c5c99fcc2d29d0eafc0753bded30351410ef03886b611424af3458d2d","tier":null}},{"id":"4970fa2ac9361ddc","reply_to_id":"9445154993566f3b","content":"bravo~","create_time":"$D2025-10-25T10:25:55.334Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"150237755228ec26","login":"yolo-huang","name":"yolo huang","avatar_url":"https://avatars-next.observableusercontent.com/d6cd7afa8f19462d88adc2eb5a01caff4141f88dc48de93316163fb697049fdb","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":91,"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 (1/3)","cells":[{"id":0,"value":"md`# Data visualisation with \\`d3.js\\` (1/3)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"md `## Goal and schedule\n\n1. Get to work with Observable\n2. SVG basics\n3. Javascript and \\`d3.js\\` basics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"md `## 1. Get to work with Observable\n\n### 1.1 A notebook for JavaScript\n\n**Observable** is a tool for writing _coding notebooks_ for _JavaScript_. It is similar to R Studio's R Makdown notebooks for R, or Jupyter's notebooks for Python.\n\nA (coding) **notebook** is a quite recent programming interface where programmers can freely mix code and comments in an unstructured way. Notebooks are good places for experimentations (doing a statistical analysis, sketching a graph, testing a new algorithm) or teaching but should be avoided for proper, clean computer development.\n\n**JavaScript** is the language executed by all browsers when users interact with web pages, and thus the most widespread language for interactive graphics! We will get into the details of JavaScript at the end of this tutorial, but I am sure that you will understand the few exemples I will use up to then, since its syntax is superficially similar to Python's.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"md`### 1.2 Notebook basics\n\nAs with all notebooks, code is organised into **cells** and each cell can contain either **code** or **text**, written in the **Markdown** format.\n\n#### Code\n\nIn Observable, by default, a cell is analysed (or \"interpretted\", or \"parsed\") as JavaScript code, and its result (if any) is shown just before the cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"Math.sqrt( 4**2 + 3**2 ) // this is JavaScript, the result is shown just above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"md`A cell can have a name, that is signalled by \\`name=...\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"my_string = \"some value\" // my_string is the name of the cell","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"md`... and you can reference this named cell's value in an other cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"my_string + \" is \" + my_string\n// 1. note that references to other cells are underlined in blue\n// 2. + on strings means concatenate in JavaScript","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"md`Most importantly **in Observable, the order of the cells does _not_ matter**: you can use a variable that you define _later_ in the notebook. 🤨 It may be weird at first, but this is useful if the order in which you want to present your results is not the same as the order in which you need to code. This is called **reactive** programming: every time the content of a cell changes, all the other cells that depend on it are re-evaluated, and then the cells that depend on them, and so on.\n\nIndeed, you often want to present the big picture first, and the details later, or never. Observable notebooks thus often have a \"Appendix\" section where authors relegate everything that is not central to their narrative.\n\nHere is an exemple:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"my_number_plus_3 = 3 + my_number // my_number is not defined yet ! We'll get to it...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1975,"value":"#### Comments\n\nCells can also contain formatted text, like the one you are reading right now. For that, we just select \"Markdown\" after we press \"+\" to create a new cell, in order to signal that we are using the Markdwon syntax. Type shift+enter to execute and exit the Markdown code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1982,"value":"... here is an exemple of Makdown-formatted text, with some **bold statements** and some _cautious statements_. We may also get wild and make a bullet list:\n\n- some interesting facts\n- some weird facts","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":421,"value":"md`It is worth it to learn the complete Mardown syntax because it is more and more widespread. Here is a summary of the main features:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"md`_Note that several extensions to Markdown (called \"flavours\") enable extra features, such as figure numbering, footnotes, checkboxes, etc. The one used by Observable is the \"Github-flavoured\" Markdown ([link](https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax)) and allows for checkboxes, syntax highlighting, etc._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"md`### 1.3 Interact, collaborate and save\n\nObservable notebooks are **interactive**, and you can change the content of any cell or add cells at any time. All the cells that depend on the content will be re-evaluated whenever the value changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"md`➡️ **A1.** Try changing the value of \\`my_number\\` and click on the play button (or hit shift+enter).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"my_number = 28","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"md`Watch the value of \\`my_number_plus_3\\` change accordingly :
\\`my_number_plus_3 = ${my_number_plus_3}\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"md`You can also edit the content of a cell whose code is not visible (... > Edit), give comments (... > Add comment), make the code visible or invisible (click on the pin). Most importantly **you can fork a notebook and save it as your own**, so that your changes are not lost on refresh.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1470,"value":"md`➡️ **A2.** **Leave a comment** on any of the preceding cells!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":537,"value":"md`➡️ **B.** **Save a copy of this notebook**, so that the changes that you do to this notebook are saved. (You may need to create an account first.) _Click on the ... button at the top right corner of the window, then on Fork._ If you want to give comments, for asking questions or correcting typos, **remember to comment on _my_ notebook, not on yours!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"md`**Great. Now you've got Observable's basics. We're good to go!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":561,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":569,"value":"md`### 2.2 SVG is XML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"md`SVG is a subset of the **XML language**. XML is a markup language (🇫🇷 language balisé) used to encode documents so that both humans and machines understand their contents. It consists in a series of tags (🇫🇷 balises), that can go by pair like this: \\` content \\`, or stand alone like this: \\`\\`. Tags can have attributes and tag pairs can contain other tags or regular text, resulting in a nested structure called the **document object model** or **DOM** for short.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"md`The following XML document:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"md`\\`\\`\\`xml\n\n\n \n \n Regular text is allowed!\n \n \n\n\\`\\`\\``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"... corresponds to the following document object model: _(Attributes and comments are usually omitted from the model.)_\n\n```\npairtag1\n |- standalonetag\n |- pairtag2\n |- \"Regular text is allowed!\"\n |- standalonetag\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1502,"value":"md`### 2.3 An SVG icon`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"md`Let's investigate a real exemple, for instance this simple SVG icon:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"md`➡️ **C.** Click ... > Download SVG and open the file on your computer. If you open it with your browser, the image will show up. What happens if you zoom in on this image?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":899,"value":"md`➡️ **D.** If you now open it with your your favourite IDE (R Studio, Spyder, Sublime or else) you will see the code creating this image. Can you write the DOM that correponds to this SVG file?\n\n_1. Remember that you can edit any cell on your notebook. The changes will be automatically saved. 2. If you run into difficulties, you can comment *my* notebook to ask for help, and of course you can answer questions to your classmates if you know the answer. 3. For this question, you don't have to write the complete DOM, just a couple of lines until you understand the principle._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":783,"value":"```\n|- svg\n |- circle (the circle element is nested inside the SVG element)\n\n[PLEASE COMPLETE!]\n\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":894,"value":"md`### 2.4 The SVG survival kit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"md`Of course you can't use any made-up tag! **SVG**, as any subset of XML, has a finite number of authorized tags with specific attributes, that are interpretted in a certain way. For instance \\`\\` is rendered as a circle of radius 24, centered in the point \\`(24,24)\\` from the top-left corner and of color blue. **An SVG image always starts with a pair of \\`\\` tags, containing all the rest.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"md`Here is a list of the most used tags, and their attributes. You do _not_ need to go through all of them in detail now, but at least you have a reference somewhere!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"md `### 2.5 Playing with SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"md`Exactly as we can declare Markdown cell, we can declare SVG cells in Observable! We just need to wrap all the code inside a \\`\\`\\`svg\\`......\\` \\`\\`\\` tag. Let's revisit our previous exemple:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"md`➡️ **E.** Check that you understand what each attribute is doing. In particular, how is the dot on the \"i\" encoded? And what about the body of the \"i\"? Play a little a bit by changing the cell's content! You may want to change the background color or the inside color, the size of the elements or their positionning! _You may want to post suggestions in comment._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":833,"value":"md`➡️ **F.** Directly in the cell, add a red hollow rectangle _behind_ the logo. _1. The last elements to appear in the code are drawn on top. 2. You probably need to investigate the \\`rect\\` tag as well as the \\`fill\\` and \\`stroke\\` attributes in the table above._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":815,"value":"md`➡️ **G.** Add the \\`transform=\"rotate(-180 24 24)\"\\` attribute to the \\`g\\` tag. _Attributes for tag pairs must be in the opening tag._ What happens? What is the benefit of using a rotation at the \\`g\\` level, instead of directly changing the attributes of the \\`circle\\` and \\`path\\` elements?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"md`### 2.6 \\`d3.js\\` syntax\n\nIt is possible to rewrite the code for the icon thanks to the \\`d3.js\\` library, in a way that is clearly more verbose, but which is also more convenient to program with. Let's got through an exemple first. How would we produce the exact same SVG image as our information desk icon?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":914,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":972,"value":"md`➡️ **H.** Dowload the SVG image and check with your favourite IDE that the content is the same as the previous icon.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":978,"value":"md`Don't worry if you do not get the details right away! _(We are going to dig into \\`d3.js\\` in the next section.)_ Let's focus on the big picture. **Why is the new syntax a progress?** Because it is now **easier to add interactivity to the graphic!** For instance, suppose that we get a dynamic \\`size\\` variable. Can we make the icon grow accordingly? We do, and we just need a few changes to the code.\n\n➡️ **I.** You can play with the size slider! Then look at the code to see how little change there was...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":938,"value":"viewof size = Range([48,480], {\"label\": md`\\`size\\``, \"step\":1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":937,"value":"{\n const icon = d3.create(\"svg\")\n .attr(\"width\", size) // I replace all the 48 by \"size\"\n .attr(\"height\", size)\n \n icon.append(\"circle\") \n .attr(\"fill\", \"blue\")\n .attr(\"cx\", size/2) // ... and all the 24 by \"size/2\"\n .attr(\"cy\", size/2) \n .attr( \"r\", size/2) \n \n const i = icon.append(\"g\")\n \n i.append(\"circle\")\n .attr(\"fill\", \"white\")\n .attr(\"cx\", size/2)\n .attr(\"cy\", size*11.6/48) // a little bit of proportionality here\n .attr( \"r\", size* 4.7/48) \n \n i.append(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"transform\", \"scale(\"+size/48+\")\") // -------- NEW ----------\n // using transform smartly here prevents me from\n // messing with the obscure \"d\" attribute !\n .attr(\"d\", \"m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6\")\n \n return icon.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"md`Or, reusing the \\`transform=rotate()\\` syntax from earlier, we could make the icon roll instead!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":983,"value":"viewof roll = Range([0,720], {\"label\": md`\\`roll\\``, \"step\":1, value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":989,"value":"{ \n const icon = d3.create(\"svg\")\n .attr(\"width\", 48)\n .attr(\"height\", 48)\n .attr(\"transform\", \"translate(\"+ roll + \")\") // a translation here\n \n icon.append(\"circle\") \n .attr(\"fill\", \"blue\")\n .attr(\"cx\", 24)\n .attr(\"cy\", 24) \n .attr( \"r\", 24) \n \n const i = icon.append(\"g\")\n .attr(\"transform\", \"rotate(\" + roll + \" 24 24)\") // a rotation there\n \n i.append(\"circle\")\n .attr(\"fill\", \"white\")\n .attr(\"cx\", 24)\n .attr(\"cy\", 11.6)\n .attr( \"r\", 4.7) \n \n i.append(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"d\", \"m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6\")\n \n return icon.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1333,"value":"md`OK, but let us not get ahead of ourselves! If we want to understand a little bit more what we're are doing here, we need some bases in JavaScript and \\`d3.js\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1042,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1578,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1584,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1581,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1212,"value":"md`### 3.2 Exercice time!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1346,"value":"md`➡️ **J.** Using the above cheat-sheet, write a function named \\`dist\\` that takes two arrays of numbers and computes the euclidean distance between them ${tex`\\sqrt{\\sum_i(a_i-b_i)^2}`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1353,"value":"a = [-41,21,33,21]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1357,"value":"b = [10,14,21,31]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1360,"value":"/* YOUR CODE GOES HERE */","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1367,"value":"dist(a,b) // verification that your function works","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1341,"value":"md`Here is a dataset consisting into 22 countries. You can click on the ► to explore the dataset. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1218,"value":"md`➡️ **K.** Write a for loop that concatenates the names of all the countries.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1205,"value":"{\n let result = \"\"\n // YOUR CODE GOES HERE\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1224,"value":"md`➡️ **L.** It is also possible to obtain the same effect with the \\`map()\\` and \\`join()\\` methods of arrays. Here are some hints:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1230,"value":"countries.map(x => x.color) // The map method takes each element one by one\n // and applies the specified anonymous function.\n // The map method does NOT modify the original array.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1243,"value":"['China', 'India', \"Russia\"].join(\", \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"['China', 'India', \"Russia\"].reverse().join(\", \") // You are allowed to chain methods to one another !","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1249,"value":"/* YOUR CODE GOES HERE */","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1387,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1642,"value":"### 3.4 `d3-selection` survival kit","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1666,"value":"**Sidenote:** _The `d3` package is loaded by default in Observable. In a web page or in an application, we would have to load it properly. We neglect this aspect here for the sake of brievity._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1686,"value":"md`We've already seen one exemple of \\`d3.js\\` code above, but **here is a condensed cheat-sheet for \\`d3-selection\\`**, that you will be able to reuse later in the exercices:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1409,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1784,"value":"md`### 3.5 Last exercice`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1788,"value":"md`Here is a template for a graph, that you have to complete. If you feel that you are stuck, you are welcome to check the solution just under. But give it a try!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1952,"value":"maxR = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1937,"value":"viewof r = Inputs.range([0, maxR], {value: 5, step: 1, label: \"Radius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1790,"value":"{\n let svg = d3.create(\"svg\")\n .attr(\"height\", 300)\n .attr(\"width\", 300)\n \n // YOUR CODE GOES HERE\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1809,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1898,"value":"md`### 3.6 Suggestion of correction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1856,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1798,"value":"md`## Appendix\n\n_(Nothing interesting to see here!)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"import {Range} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1751,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 30:"$2f:body"