2c:null 2d:["$","title",null,{"children":"Drawing SVG with D3 1 | Dynamic Data Visualization 373 | Observable"}] 32:T6bb,{ let w = d3.min([800, width]); let h = 0.625 * w; let pad = 16; let svg = d3.create("svg").attr("width", w).attr("height", h); let root = d3.hierarchy(rendered); d3.tree().size([h - pad, w - pad])(root); let diagonal = d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x); let g = svg.append("g").attr("transform", `translate(${pad / 2})`); let links = root.links(); g.append("g") .attr("id", "links") .selectAll("path") .data(root.links()) .join("path") .attr("d", diagonal) .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); let nodes = root.descendants(); g.append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr("cx", (d) => d.y) .attr("cy", (d) => d.x) .attr("r", 4) .attr("fill", "lightgray") .attr("stroke", "black") .attr("stroke-width", 1) .attr("data-tagName", function (o) { return o.data.tagName; }) .attr("data-className", function (o) { return o.data.className; }) .on("pointerenter", function () { d3.select(this).attr("stroke-width", 3); }) .on("pointerleave", function () { d3.select(this).attr("stroke-width", 1); }) .nodes() .forEach(function (c) { let rows = [`

tagName: ${c.getAttribute("data-tagName")}

`]; let className = c.getAttribute("data-className"); if (className) { rows.push(`

className: ${className}

`); } let html = "

" + rows.join("") + ""; tippy(c, { content: html, theme: "light-border", allowHTML: true }); }); return svg.node(); }33:T4b8,Here are a few comments on the new elements: - The `viewBox` is used to specify the coordinate system. It has the form `[xmin,ymin,width,height]`. Thus, the SVG coordinate system above satifies ${tex.block`-1.2 \leq x \leq 1.2 \: \text{ and } -1.2 \leq y \leq 1.2.`} - The mathematically astute reader might notice that the pentagon is upside down. That's because ${tex`y`} increases as we move *down* the figure. If we place the axes so that the meet in the upper left corner of the figure, then they might look something like so:
${Plot.plot({ width: 200, height: 120, margin: 10, x: { axis: false }, y: { axis: false }, marks: [ Plot.arrow( [ { x1: 0, y1: 0, x2: 1, y2: 0 }, { x1: 0, y1: 0, x2: 0, y2: -1 } ], { x1: "x1", x2: "x2", y1: "y1", y2: "y2" } ) ] })} - If we specify the `width` to be `'100%'`, instead of `500`, the SVG will fill the space available in its surrounding container. We don't need to specify the `height`, since the aspect ratio is specified by the `viewBox`. This is an important technique in *response design*, which aims to produce good output on devices of different sizes.34:T1303,Let's again pick apart some of the new elements here. - The SVG `g` element is used for grouping. This is very common in larger situations where a visual component might consist of multiple SVG elements. Grouping them together not only makes the code easier to understand but we can also apply certain stylistic attributes at the group level. In this example, we set the common radius at the group level. You can also uncomment the `transform` attribute to see its effect. - In the penultimate block of code (prior to the return statement) we join a collection of circles onto the `g` element via a *selection/join*. This is a tremendously important and common idiom in D3 programming - worthy of its own sub-subsection. #### The selection/join idiom *Did I mention that this is important?* D3 has a reputation for having a bit of a steep learning curve. Some might even call it [famously steep](https://davidwalsh.name/learning-d3). One of the commonly mentioned features in this context is the so-called *selection/join* idiom. It's also one of the most commonly used techniques in D3 programming, though. Again and again, we'll select elements from the DOM (most often from an SVG) and modify, remove, or join more elements to powerful effect. Thus, we gotta get a handle on this technique. Fortunately, this is a 14 week class so we've got plenty of time absorb these ideas at the appropriate pace. Today, all we're going to do is learn how to: - create a selection, - bind data to the selection (and understand what that means), - join DOM elements to the selection, and - specify the attributes of the elements in terms of the data. That's all encapsualted in the following bit of code from our last example: g.selectAll("circle") .data(pts) .join("circle") .attr("cx", (c) => c.x) .attr("cy", (c) => c.y) // .attr("fill", (c, i) => d3.schemeCategory10[i % 10]) // Try this! .attr("r", 4); So, let's go through this line by line. First, don't forget that `g` was created by a line that looked like: let g = svg.append("g") Thus, `g` is itself a D3 object, since `svg` is a D3 object. As D3 objects, they've got all kinds of built in methods to do fun things. That brings us to the first line in our block of code: g.selectAll("circle") This creates a D3 Selection object containing all the circles in the group. The selection is empty at the moment, since `g` has just been created and contains no circles or anything else yet. At the next step, we get g.selectAll("circle") .data(pts) Recall that `pts` is a list of 100 objects with numeric `x` and `y` properties; we might think of that list as *data*. This line binds that data to the selection. In part, this means that once we join some SVG elements to the selection, we'll be able to define their attributes in terms of the data using the code coming up. That brings us to g.selectAll("circle") .data(pts) .join("circle") At this point, we've actually joined new circles onto the selection; it's no longer empty but contains 100 circles, one for each data point in `pts`. The circles are not well defined yet, since they have no center or radius attributes. We'll do the centers next: g.selectAll("circle") .data(pts) .join("circle") .attr("cx", (c) => c.x) .attr("cy", (c) => c.y) This step defines the ${tex`x`}-coordinate of the center `"cx"` and the ${tex`y`}-coordinate of the center `"cy"` using functions - often called the *accessor function*: - `(c) => c.x` for the ${tex`x`}-coordinate and - `(c) => c.y` for the ${tex`y`}-coordinate. Note that the accessor function is applied to each element of the selection and each of those corresponds to one of data `pts`. Thus, for example, if the list of `pts` contains an object of the form {x: 1.23, y: 3.45} then, the code above will generate a circle with center `[1.23,3.45]`. This happens for every point in the list of `pts`. If we now move to include that next line that's not commented out, we come to: g.selectAll("circle") .data(pts) .join("circle") .attr("cx", (c) => c.x) .attr("cy", (c) => c.y) .attr("r", 4); The `"r"` attribute is constantly 4 for all circles so we don't need a function; we can just specify the constant value 4. Th bit of code that we have to this point specifies all that we need for generate all 100 circles. We might, though, want to experiment with the line that's been commented out: g.selectAll("circle") .data(pts) .join("circle") .attr("cx", (c) => c.x) .attr("cy", (c) => c.y) .attr("fill", (c, i) => d3.schemeCategory10[i % 10]) // Try this! .attr("r", 4); Including that line should yield a more colorful picture; one where each circle is one of 10 colors specified in `d3.schemeCategory10`:35:[{"id":"d5247370cb1c95321094d66278adce0a33817c15f69acb94b8ad531ba7d2f98b0d067d5037b38b224e4400a6b6012b0ff4c03ab75e4b943c08a6eb07a0166b8c","href":"https://static.observableusercontent.com/files/d5247370cb1c95321094d66278adce0a33817c15f69acb94b8ad531ba7d2f98b0d067d5037b38b224e4400a6b6012b0ff4c03ab75e4b943c08a6eb07a0166b8c","name":"house@1.svg","type":"image/svg+xml","lastModified":1673801258966.657,"size":4165}] 30:{"id":"2c29abdfdcdd1fb7","slug":null,"title":"Drawing SVG with D3 1","thumbnail":"37a2d633baeafad7cd6ff5ec8ddea00f37d8615e795ff592881c44f2fb8738a3","access_level":"public","create_time":"$D2023-01-15T10:22:57.261Z","update_time":"$D2024-06-10T23:12:23.204Z","view_time":null,"first_public_time":"$D2023-09-06T21:02:53.480Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024"},"version":741,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"},{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Drawing SVG with D3 1","cells":[{"id":0,"value":"# Drawing SVG with D3 1\n## Day 2: Tuesday, January 17\n\nToday, we're going to learn how to draw with D3 and SVG. We're going to start by discussing how SVG fits in with two other native, browser based tools, namely HTML and CSS.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"## HTML\n\nHTML, or HyperText Markup Language, dates back to 1993. It's the language that we use to write webpages. Any modern browser knows how to interpret and render HTML.\n\nHere's a sample of some HTML:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"html_fragment = `\n

Mark's favorite things

Some of my favorite things include:

Bikes
Beer
OSU Football

\n All images from WikiMedia and licensed via CC BY 3.0.\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"When rendered, this HTML fragment might look something like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"rendered = {\n let rendered = html`${html_fragment}`;\n if (remove_styling) {\n d3.select(rendered).selectAll(\"*\").attr(\"class\", \"\");\n }\n return rendered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"Here are a few observations:\n\n- Each HTML Element (generally, the visible objects on the page) corresponds to some `` in the code. For example,\n - `

` - Some *division* of the page that could contain just about anything,\n - `

` - a third level heading,\n - `` - kinda like a `
` but intended for short, inline elements,\n - `
` - a bulleted list; you could try `
` with a closing `
`, if you like,\n - `
` - the list items, or\n - `` - an image.\n- Most HTML tags need to be closed, as in `
...content...
`. The exception is when the corresponding element has no children, as in the `` tags.\n- Many of the HTML tags have attributes, such as `class` or `src`.\n- The HTML shown above is rendered by the `html` tagged template literal, as you can see by expanding the cell.\n- The nested structure of HTML can be modeled by a tree. Here's the tree for our HTML fragment:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"Any web browser maintains an abstract representation of the web page called the DOM, or Document Object Model. A lot of web programming involves manipulating the DOM. Since this model has a tree structure, low level web programming often involves algorithms like tree traversal. D3 has a lot of built in functionality that makes this easy but it's often useful to understand this model.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"## CSS\n\nHTML describes the content of the page. There's still a lot that goes into the appearance of the elements and overall layout - the style, if you will. That style is controlled by CSS or Cascading Style Sheets.\n\nHere's the style specification that affects the rendered version of our HTML fragment:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"Click the checkbox below, if you'd like to see how the rendered fragment would look without the styling.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"viewof remove_styling = Inputs.toggle({\n value: false,\n label: \"Remove styling:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"Books have been written about HTML and CSS. Web development is not really our thing, though, so we're not going into it any further right now. It's worth seeing the basics, though, since we'll work with HTML some and, more importantly, SVG is very similar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"## SVG\n\nSVG is very much like HTML. Rather than describing the contents of a webpage, though, SVG describes the contents of an image or diagram. Here's a short, but complete, block of code that describes a simple SVG diagram:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"svg_code = `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"SVG is interpreted and rendered natively by all modern browsers. Thus, we can render this simply by passing it to the `html` template literal tag:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"html`${svg_code}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"Some more observations\n\n- The top level `