2d:null 2e:["$","title",null,{"children":"Intro to D3.js (spring 2025 archive) | tiga1231 | Observable"}] 33:T50d,--- ## Common HTML tags - <h1> to <h6> - headings

This is a h3 heading

--- - <p> - Paragraph

This is a plain paragraph

This is another paragraph

--- - <div> - Division

This is a division. Doesn't look like doing much until you style it.

This is another division.

--- - <span> - Span This is a span. This is another span. --- - <img> - Image

--- - <a> - Anchor / links The link --- - <ol>, <ul>, <li> - Ordered and unordered list; list item

Apples
Kimchi

Apples
Kimchi

--- - <table>,<tr>,<th>,<td> - Tables, table row, table header, table data

Col 1	Col 2	Col 3
first row	item	item
second row	item	item

34:T6c1,### Path The path element lets you draw arbitrary shape using the d (data?) attribute. ```html ``` Decoding the path: - M - move, defines the starting of the path for the following points - L - line, defines the ending of a straight line - C - curve, defines two control points, and ending of a Bézier curve. - Upper case letters takes the x and y coordinates of the point. There are also lower case counter parts m, l, and c that uses relative coordinates to the previous point Here is the same example using relative coordinates ```html ``` Note in the last c move, all coordinates are relative to the end point of the previous letter (l). As you can see, manually specifying d in paths can get intricating. In practice, we will most likely use d3 to automatically generate this curve data for us. 35:T464, If we want to move every circle to the right, without grouping we will have to add the same amount to the x coordinates of the each circle, which can annoying and error-prone as we have to keep track of the elements in operation. With grouping, we first enclose the circles with a g tag. This does nothing visually, but every attributes added to the g element will be applied to all its descendants. In this case, we use transform to move the circles horizontally and fill to change their color: ```html ``` 36:T57e,{ let svg = d3 .create("svg") .attr("width", width) .attr("height", 300) .style("background", "#eee"); let circles = svg .selectAll("circle") .data(d3.range(5)) .enter() .append("circle") .attr("cx", (d) => 40 + d * 100) .attr("cy", (d) => 100) .attr("r", 20); // // svg.selectAll("circle").data(d3.range(5)).exit().remove(); svg .selectAll("circle") .data(d3.range(3)) .join("circle") // shortcut for enter update and exit.remove(), return union of enter and update .attr("r", 40) .attr("cx", (d) => 40 + d * 100) .attr("cy", (d) => 100) .attr("fill", "orange"); // //more data svg .selectAll("circle") .data(d3.range(7)) .join( (enter) => enter .append("circle") .attr("r", 40) .attr("cx", (d) => 40 + d * 100) .attr("cy", (d) => 100), (update) => update.attr("r", 40).attr("fill", d3.schemeCategory10[0]), (exit) => exit.attr("r", 10) ) .attr((d) => d * 10); // less data // svg // .selectAll("circle") // .data(d3.range(3)) // .join( // (enter) => enter.append("circle"), //not in effect as there is less data item than before // (update) => update.attr("r", 40).attr("fill", d3.schemeCategory10[0]), // (exit) => exit.attr("r", 10) // ) // .attr((d) => d * 10); return svg.node(); }37:[{"id":"146e2a0a397100a20029181716d3dd01e8b1fcf6e2a5c1d43550022fd4970ca3a32bc83824b70a9b1151c89bdb004c6cfa8320154d742e5aee88d6ab1701cb9f","href":"https://static.observableusercontent.com/files/146e2a0a397100a20029181716d3dd01e8b1fcf6e2a5c1d43550022fd4970ca3a32bc83824b70a9b1151c89bdb004c6cfa8320154d742e5aee88d6ab1701cb9f","name":"image.png","type":"image/png","lastModified":1766173691608.553,"size":89490}] 31:{"id":"0242b9abd69e58a2","slug":"introduction-d3-js-spring-2025-archive","title":"Intro to D3.js (spring 2025 archive)","thumbnail":"f68199e488a977a33d3e42773df77f713302b4898701c4e83741dc680ba92bca","access_level":"public","create_time":"$D2025-12-19T19:48:11.608Z","update_time":"$D2025-12-19T19:52:37.705Z","view_time":null,"first_public_time":"$D2025-12-19T19:48:11.608Z","has_unpublished_edits":null,"fork":{"id":"431a6d68bf1e43e8","slug":"d3-intro","title":"Introduction to D3.js","owner":{"id":"7775d06948a95c4e","login":"tiga1231","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7775d06948a95c4e","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":"starter_2024"},"version":2239,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null}],"members":[{"type":"team","id":"7775d06948a95c4e","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":"starter_2024","role":"editor"},{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Intro to D3.js (spring 2025 archive)","cells":[{"id":0,"value":"# Intro to D3.js (spring 2025 archive)\nGet latest version of this note at: https://observablehq.com/@tiga1231/d3-intro\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":962,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"---\n# 1. HTML\n\nHTML is the standard markup language for creating Web pages.\nThe content page is created by HTML. \nIn a browser, we can right-click anywhere on this page, and use 'inspect' to see its source code.\n\nIn this class, the browser’s built-in HTML inspector and JavaScript console will be your best tools.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"\n```html\n

Example: Hello HTML!

Hello h2

This is a paragraph.\nline breaks are not rendered\n

\n```\n\n

Example: Hello HTML!

Hello h2

This is a paragraph.\nline breaks are not rendered\n

\n\n---\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1984,"value":"In HTML, contents (texts) are enclosed by HTML tags. This hints the web browser the semantic structure of your document and helps it decide how it is supposed to be rendered. \n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"## Getting Started - the boilerplate\n```\n\n\n \n \n Title Here\n \n \n \n \n \n\n```\n\n- <head> is where we put meta data, links to style sheets, and library codes.
\n- <body> has the content of the page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"\n\n---\n## Attributes \nThe key-value pairs we put between the equal signs are called attributes.\nHTML tags accepts particular attributes, such as href=\"...\" for <a> and src=\"...\" for <img>\n\n- id and class let you assign names and categorize to HTML elements.\n - id is commonly used to refer to particular locations of a page, such as particular sections in Wikipedia: https://en.wikipedia.org/wiki/Klein_bottle#4-D_non-intersecting. It can also be use to jump within a page, like top of this page\n - class is most useful when specifying styles. More on this later.\n \n- the style attribute provides inline style to any element. For example,\n ```html\n

Red and heavy

```\n gives us:\n

Red and heavy

\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":644,"value":"## More on HTML:\n\n- Book\n - Chapter 3 of Interactive Data Visualization for the Web by Scott Murray.\n - The other parts of the book talks about D3.js which for this class. The books is very well-written and easy to read. Get this book if you can!\n - Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Niederst Robbins\n - How I learned HTML and CSS\n- Online refs\n - W3 Schools https://www.w3schools.com/\n - MDN https://developer.mozilla.org/en-US/docs/Web/HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"---\n# 2. CSS\nIn coding a website, it is a good practice to separate the content from its style. To this end, HTML will be in charge of the content / text, while Cascading Style Sheet (CSS) specifies how the content is shown.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"\n---\nHere is our good old divs:\n ```\n

This is a division. Doesn't look like doing much until you style it.

This is another division.

\n```\n\n---\nWe can style it by first giving class names to them. Note that an HTML element can have multiple classes:\n\n```html\n

...

\n```\n\n---\nNext, we add a style tag somewhere in the HTML, specifying the background color of the divs with class \"mydiv\".\n```html\n\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"---\nHere is the result:\n\n

This is a div. Doesn't look like doing much until you style it.

This is another div.

\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"---\n## Selectors\n\nNote the dot before the class name in CSS:\n```css\n.mydiv {\n background: cyan;\n}\n```\nSpecifiers such as this are called CSS selectors. \nLater in JavaScript or D3, we can use the same selectors to modify DOM elements programmatically.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2008,"value":"---\nCommon selectors include:\n- #myid - used for unique element a page.\n- .myclass - used for any number of elements with the same class.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2011,"value":"- .theparent > .thechild select all children nodes of some node(s).\n E.g., em > u { color: red; } only colors those underline (u) tags that are a direct children of the emphasis em tag \n\n ```html\n \n this will be red\n this will also be red\n but this will not\n \n \n \n ```\n \n \n this will be red\n this will also be red\n but this will not\n \n \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"\n- .someparent .descendant selects all descendant nodes of a node. Using a similar example,\n E.g., i u { color: red; } not only colors those u tags that are a direct children of the italic i tag, but also their grandchildren, great-grandchildren, etc.\n ```html\n \n this will be red\n this will also be red\n this will be red this time\n \n \n \n ```\n \n \n this will be red\n this will also be red\n this will be red this time\n \n \n\n\n\nMore on selectors: https://www.w3schools.com/cssref/css_selectors.php","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"---\nCSS can get really fancy, the only limitation is your imagination.\n\n

Fancy Text

\n\n\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"- There are three places for style sheets\n - As an HTML attributes\n - In a style tag\n - In a separate file\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"More examples:\n- https://prismic.io/blog/css-text-animations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"---\n# 3. SVG\nAs you may have noticed, much of HTML focuses on text. However, in this class, we primarily work with visual elements like shapes, colors, and charts. Scalable Vector Graphics (SVG) is designed specifically for this purpose.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"SVG starts with an svg canvas:\n- ```html\n\n```\n\nwith special SVG elements within it, such as:\n- Rectangle\n ```html\n ```\n- Circle\n ```html\n ```\n- Ellipse
\n ```html\n ```\n- Line
\n ```html\n ```\n- Text
\n ```html\n Text!``` ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"The result:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":313,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":581,"value":"---\n## More interesting SVG elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":538,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"---\n### SVG Grouping g\nGrouping provides an abstract layer for a set of elements. This is most commonly used when we want to perform the same transform to a group of elements. \n\nConsider a number of circles.\n\n\n```html\n\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":681,"value":"# 4. JavaScript\n\nJavaScript is the programming language of the web. It is mainly used to handle interactions, and dynamically generated contents.\n\nJavaScript is a dynamically typed language. Which means the data type of a variable is determined, at runtime, by the value it hold. This means the type of a variable can change over time if we re-assign some other type to some existing variable. \n\nE.g., this is valid:\n```javascript\nlet v = \"a\";\nv = 3;\n```\n\nOther basic data types\n```javascript\nlet a = 0; // number\nlet b = 34.56; // number\nlet c = false; // boolean\nlet d = \"abc\"; // string\nlet e = [1, 2, \"3\", [4]]; // array\n```\nNote that in JavaScript array can hold a mixture of data types, including other arrays.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":740,"value":"Another commonly used data type is object. Objects works like dictionary in Python, which holds key-value pairs:\n\n```javascript\nlet obj = {}; // initialize an empty object\nobj.a = 34.56;\nobj.b = \"abc\";\nobj.c = [1,2,3];\nconsole.log(obj); // Object { a: 34.56, b: \"abc\", c: (3) […] }\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":733,"value":"obj = {\n let obj = {}; // initialize an empty object\n obj.a = 34.56;\n obj.b = \"abc\";\n obj.c = [1, 2, 3];\n\n obj[\"a\"] = 123;\n let key = \"b\";\n obj[key] = \"def\";\n obj[\"asd.asd\"] = \"def\";\n console.log(obj); //\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2124,"value":"data = [\n { x: 10, y: 100 },\n { x: 12, y: 1230 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"---\n## JS Functions \n\n```javascript\nfunction someFunction(v) {\n if (v < 10) {\n return v;\n } else {\n return v*v;\n }\n}\n```\n\nor \n```javascript\nlet someFunction = function(v) {\n ...\n}\n```\n\nor \n```javascript\nlet someFunction = (v) => {\n ...\n}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2126,"value":"f = (d) => d.x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"f(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"---\n## Anonymous functions\n\n```javascript\nfunction(args){\n ...\n}\n```\nor \n```javascript\n(args)=>{\n ...\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2109,"value":"Without the braces, the function can be used a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":803,"value":"Functions are first-class citizens in JavaScript. \n- This means that functions can be assigned to different variable names:\n ```javascript\n function myfunc(){...}\n function myotherfunc(){...}\n \n let alias_to_myfunc = myfunc;\n alias_to_myfunc();// calling myfunc\n \n alias_to_myfunc = myotherfunc;\n alias_to_myfunc();// calling myotherfunc\n ```\n\n- Stored in an object:\n ```javascript\n let myobj = {\n my_method: ()=>{...}\n }\n \n myobj.my_method();\n ```\n \n- Passed as function arguments:\n ```javascript\n function callme(func){\n func();\n }\n \n callme(()=>{\n console.log(\"a\");\n });\n\n callme(()=>{\n console.log(\"b\");\n });\n ```\n\n- Or returned by a function\n ```javascript\n function add(num1){\n return (a)=>{\n return a+num1;\n }\n }\n let add5 = add(5);\n add5(10); //return 15;\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"---\n## this keyword\nThe meaning of depends of its context\n\n- In an object method, this refers to the object.\n\n```javascript\nconst person = {\n firstName : \"John\",\n lastName : \"Doe\",\n id : 5566,\n getFirstName : function() {\n return this.firstName; //\"John\"\n }\n};\n```\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":857,"value":"person = {\n return {\n firstName: \"John\",\n lastName: \"Doe\",\n id: 5566,\n getFirstName: function () {\n return this.firstName; //\"John\"\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"person.getFirstName()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"- When used alone, this refers to the global object. In browsers, it is the Window object.\n```javascript\nconsole.log(this); // prints Window {...}\n```\n\nFor a full explanation, see https://www.w3schools.com/js/js_this.asp","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"---\n## Map, filter, forEach","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1113,"value":"d3.range(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"d3.range(10).map((d) => d * 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"d3.range(10).filter((d) => d % 3 === 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"d3.range(10).forEach((d) => {\n let x = d * 2;\n console.log(`x = 2d = ${x}`);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"---\n## Manipulating DOMs with JavaScript\nWe can use JavaScript to control both content and styling of DOM elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1247,"value":"

Hello

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1206,"value":"{\n document.getElementById(\"hello\").innerHTML = Math.random();\n document.getElementById(\"hello\").style.color = \"red\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"---\n## Manipulating SVG elements with JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1315,"value":"cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"cars_plot = {\n let ns = \"http://www.w3.org/2000/svg\";\n\n let svg = document.createElementNS(ns, \"svg\");\n svg.setAttribute(\"width\", 500);\n svg.setAttribute(\"height\", 200);\n svg.style.background = \"#eee\";\n\n cars.forEach((d, i) => {\n let circ = document.createElementNS(ns, \"circle\");\n circ.setAttributeNS(null, \"cx\", 40 * d.cylinders + 20 * Math.random());\n circ.setAttributeNS(null, \"cy\", 290 - 10 * d[\"0-60 mph (s)\"]);\n circ.setAttributeNS(null, \"r\", 4);\n circ.setAttributeNS(null, \"fill\", \"#444\");\n svg.appendChild(circ);\n });\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"# 5. D3.js\n\nData-Driven Documents, or D3, is a JavaScript library that helps to write HTML that is driven by data. It hides those cumbersome for loops in the last example and more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"cars_plot_d3 = {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 400)\n .style(\"background\", \"#eee\");\n\n let circles = svg\n .selectAll(\"circle\")\n .data(cars)\n .join(\"circle\")\n .attr(\"cx\", (d) => 40 * d.cylinders + 20 * Math.random())\n .attr(\"cy\", (d) => -120 + 20 * d[\"0-60 mph (s)\"])\n .attr(\"r\", 4)\n .attr(\"fill\", \"#444\");\n\n circles.on(\"mouseover\", function () {\n console.log(this);\n d3.select(this).attr(\"fill\", \"red\");\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"## D3 Selections\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1678,"value":"---\n### d3.select(...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1688,"value":"

Hello2

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1702,"value":"d3.select(\"#hello2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"//getter\nd3.select(\"#hello2\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"//setter\nd3.select(\"#hello2\").text(\"HELLO\")\n// .node().innerHTML","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"d3.select(\"#hello2\").style(\"color\", \"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"---\n### d3.selectAll(...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1720,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1728,"value":"d3.select(\"#mysvg2\").selectAll(\"circle\") //.remove()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"orange_it = {\n return d3\n .select(\"#mysvg2\")\n .selectAll(\"circle\")\n .attr(\"fill\", \"orange\")\n .transition()\n .attr(\"r\", 10);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1776,"value":"---\n### Associating data to DOM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1841,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1787,"value":"//chalkboard diagram\n\nd3.select(\"#mysvg3\")\n// .selectAll(\"rect\")\n// .data(d3.range(6).map((i) => ({ index: i, x: i * 10 + 1 })))\n// .join(\"rect\") // for every data item, associate a rect to it.\n// .attr(\"x\", (d) => d.x * 6)\n// .attr(\"y\", 50)\n// .attr(\"width\", 50)\n// .attr(\"height\", 50)\n// .attr(\"fill\", \"#333\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1718,"value":"---\n### Enter, update, exit\n\n

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1660,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"---\n## Convenient Functions\n\n### Scales\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1598,"value":"#### d3.scaleLinear","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1557,"value":"sx = d3.scaleLinear().domain([0, 10]).range([20, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"[sx(0), sx(5), sx(10), sx(10000)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"sx.invert(100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"---\n#### Scales can take multiple checkpoints for both domain and range","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1566,"value":"sx_multistep = d3\n .scaleLinear()\n .domain([0, 50, 100, 500])\n .range([20, 100, 280, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"{\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 300)\n .style(\"background\", \"#eee\");\n\n let circles = svg\n .selectAll(\"circle\")\n .data(d3.range(500))\n .join(\"circle\")\n .attr(\"cx\", (d) => d)\n .attr(\"cy\", (d) => sx_multistep(d))\n .attr(\"r\", 3);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"sx_multistep.invert(80)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"#### Scales can be used for color too!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1605,"value":"sc = d3.scaleLinear().domain([0, 40]).range([\"blue\", \"orange\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"[sc(0), sc(0.5), sc(10), sc(40)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"{\n let div = d3.create(\"div\");\n div\n .selectAll(\"span\")\n .data(d3.range(40))\n .join(\"span\")\n .style(\"font-weight\", \"bold\")\n .style(\"color\", (d) => sc(d))\n .text((d) => d % 10);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"---\n### Axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1639,"value":"ax = {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 60)\n .style(\"background\", \"#eee\");\n\n //first we create a scale:\n let sx = d3\n .scaleLinear()\n .domain([0, range])\n .range([50, width - 50]);\n\n let ax = d3.axisBottom(sx).ticks(10);\n svg.append(\"g\").attr(\"transform\", \"translate(0,20)\").call(ax);\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2054,"value":"viewof range = Inputs.range([0, 100], { label: \"Amount\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"---\n### Colors\nhttps://d3js.org/d3-scale-chromatic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1948,"value":"---\n#### Discrete / categorical colors\n- d3.schemeCategory10","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1158,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"legend(d3.schemeCategory10, {\n padding: 0,\n rect_size: 32\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1933,"value":"#### d3.scaleOrdinal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1937,"value":"so = d3.scaleOrdinal().range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2206,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1940,"value":"[so(\"1\"), so(\"2\"), so(\"1\")]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1951,"value":"#### Continuous color scales\n- d3.interpolateViridis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1187,"value":"[\n d3.interpolateViridis(0.0),\n d3.interpolateViridis(0.5),\n d3.interpolateViridis(1.0)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"legend(\n d3.range(10).map((d) => d3.interpolateViridis(d / 10)),\n {\n padding: 0,\n rect_size: 32\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"---\n### Data processing\n\n#### d3.mean, d3.max, d3.min, d3.extent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2209,"value":"data1 = d3.range(10).map((d) => ({ x: Math.random() }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"d3.extent(data1, (d) => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"d3.mean(d3.range(10).map((d) => Math.random()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1917,"value":"#### d3.csv\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1891,"value":"await d3.csv(\n \"https://gist.githubusercontent.com/netj/8836201/raw/6f9306ad21398ea43cba4f7d537619d0e07d5ae3/iris.csv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"d3\n .csv(\n \"https://gist.githubusercontent.com/netj/8836201/raw/6f9306ad21398ea43cba4f7d537619d0e07d5ae3/iris.csv\",\n d3.autoType\n )\n .then((data) => {\n console.log(data);\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"---\n# Extra D3 topics\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1392,"value":"## Curves\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1352,"value":"line = {\n let sx = d3.scaleLinear().domain([0, 10]).range([0, width]);\n let sy = d3.scaleLinear().domain([0, 10]).range([270, 30]);\n let line = d3\n .line()\n .x((d) => sx(d.x))\n .y((d) => sy(d.y))\n .curve(d3.curveCatmullRom.alpha(0.5));\n return line;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"line([\n { x: 0, y: 1 },\n { x: 1, y: 2 },\n { x: 2, y: 1 }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"line_plot = {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 300)\n .style(\"background\", \"#eee\");\n svg\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-width\", 5)\n .attr(\n \"d\",\n line([\n { x: 0, y: 1 },\n { x: 1, y: 10 },\n { x: 2, y: 1 },\n { x: 3, y: 5 },\n { x: 4, y: 4 },\n { x: 5, y: 9 }\n ])\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1397,"value":"---\n## Brushes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1404,"value":"brushable_canvas = {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 300)\n .style(\"background\", \"#eee\");\n let brush_text = svg.append(\"text\").attr(\"y\", 20);\n\n let brush = d3.brush()\n .on(\"brush\", (event) => {\n console.log(event);\n brush_text.text(\n event.selection\n .flat()\n .map((d) => Math.round(d))\n .join(\", \")\n );\n });\n\n svg.append(\"g\").attr(\"class\", \"brush\").call(brush);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"---\n## Transitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1428,"value":"animated_circles = {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 300)\n .style(\"background\", \"#eee\");\n\n let circles = svg\n .selectAll(\"circle\")\n .data(d3.range(width / 20))\n .join(\"circle\")\n .attr(\"cx\", (d) => d * 20)\n .attr(\"cy\", (d) => 150 + Math.sin(d / 10) * 100)\n .attr(\"fill\", \"#333\")\n .attr(\"r\", 1);\n\n let sc = d3.interpolateHcl(d3.schemeCategory10[0], d3.schemeCategory10[1]);\n circles\n .transition()\n .duration(1000)\n .delay(100)\n .attr(\"r\", 10)\n .transition()\n .duration(1000)\n .attr(\"fill\", (d, i) => sc(i / 10))\n .attr(\"r\", (d, i) => 8 + 2 * Math.sin(i / 10));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"---\n## Animations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1470,"value":"animation = {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 300)\n .style(\"background\", \"#eee\");\n\n let circles = svg\n .selectAll(\"circle\")\n .data(d3.range(width / 20))\n .join(\"circle\")\n .attr(\"cx\", (d) => d * 20)\n .attr(\"fill\", \"#333\")\n .attr(\"r\", 10);\n\n function redraw(t) {\n // console.log(t);\n circles.attr(\"cy\", (d) => 150 + 100 * Math.sin(t / 800 + d / 3));\n requestAnimationFrame(redraw);\n }\n\n requestAnimationFrame(redraw);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"---\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":958,"value":"import { toc } from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"import { legend } from \"@tiga1231/lib\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"