2c:null 2d:["$","title",null,{"children":"Layout | Dynamic Data Visualization 373 | Observable"}] 32:T533,# Layout Let's start by looking at a few notebooks I've written over the years: - [A look at the Big South](https://observablehq.com/d/cbbe8ab362fb60e2) - [The dance of Earth and Venus](https://observablehq.com/@mcmcclur/the-dance-of-earth-and-venus) - [Reproductive rights correlates](https://observablehq.com/@mcmcclur/reproductive-rights-and) - [NCAA Brackets](https://observablehq.com/@mcmcclur/ncaa-brackets) - [Cycling maps](https://observablehq.com/d/236f4450264ea8bb) While the topics explored in these notebooks are all quite different, there is a common method shared in the construction of the visualizations created in all of them - namely, they all combine several visualization elements (SVG, HTML, Canvas, and/or controls) into a single DIV output. There are several advantages that this gives you in the construction of your visualizations: - It allows you to place components side by side, - It allows you to overlay components, and - It allows you to choose the right type of component for the job. Combining components of your visualization in this way requires more use of HTML and CSS that we've needed to this point and that's what we'll focus on today. The definitive reference source on this material is, of course, [on MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction).33:T946,{ let container = d3 .create("div") .style("background-color", "#eee") .style("padding", "10px") .style("position", "relative"); let lorem_display = container .append("div") .style( "mask-image", "linear-gradient(to bottom, black 0%, transparent 100%)" ) .html(lorem.split("\n").slice(0, 2).join("\n")); lorem_display .selectAll("div.paragraph") .style("max-width", "800px") .style("padding", "10px"); lorem_display.selectAll("span.italic").style("font-style", "italic"); lorem_display.selectAll("span.red").style("color", "blue"); let state = "collapsed"; let expander = container .append("div") .style("position", "absolute") .style("bottom", "6px") .style("left", "46%") .style("background", "rgba(255,255,255,0.9)") .style("border", "solid 1px slategray") .style("border-radius", "4px") .style("padding", "4px") .style("cursor", "default") .text("more") .on("pointerenter", function () { d3.select(this) .style("background", "lightblue") .style("border", "solid 2px slategray"); }) .on("pointerleave", function () { d3.select(this) .style("background", "rgba(255,255,255,0.9)") .style("border", "solid 1px slategray"); }) .on("click", function () { if (state == "collapsed") { lorem_display.style("mask-image", null).html(lorem); lorem_display .selectAll("div.paragraph") .style("max-width", "800px") .style("padding", "10px"); lorem_display.selectAll("span.italic").style("font-style", "italic"); lorem_display.selectAll("span.red").style("color", "blue"); expander.text("less"); state = "expanded"; } else { lorem_display .style( "mask-image", "linear-gradient(to bottom, black 0%, transparent 100%)" ) .html(lorem.split("\n").slice(0, 2).join("\n")); lorem_display .selectAll("div.paragraph") .style("max-width", "800px") .style("padding", "10px"); lorem_display.selectAll("span.italic").style("font-style", "italic"); lorem_display.selectAll("span.red").style("color", "blue"); expander.text("more"); state = "collapsed"; } }); return container.node(); }34:T571,{ let div = d3 .create("div") .style("width", "800px") .style("height", "400px") .style("border", "solid 2px black") .style("position", "relative"); div .selectAll("div") .data(big_south_teams) .join("div") .attr("class", "team") .style("position", "absolute") .style("left", () => `${d3.randomUniform(0, 710)()}px`) .style("top", () => `${d3.randomUniform(0, 360)()}px`) .style("border", "solid 1px darkgray") .style("background", (s) => s == "UNC Asheville" ? "darkblue" : "lightgray" ) .style("color", (s) => (s == "UNC Asheville" ? "white" : "black")) .style("cursor", "default") .text((team) => team); let tooltip = div .append("div") .style("transform", "translate(-10px, -16px)") .style("position", "absolute") .style("border", "solid 1px black") .style("padding", "3px") .style("opacity", 0) .style("background", "white"); div .selectAll(".team") .on("pointerenter", function (evt, team) { let pos = big_south_teams.indexOf(team); let left = d3.select(this).style("left"); let top = d3.select(this).style("top"); tooltip .text(pos) .style("opacity", 1) .style("left", left) .style("top", top); }) .on("pointerleave", function () { tooltip.style("opacity", 0); }); return div.node(); }35:Tacd,// The argument "team" is a string that holds the full name of the team. // Thus create_game_chart("UNC Asheville") generates our game chart. function create_game_chart(team) { // Grab just those games that let team_games = big_south_games.filter( (g) => g.WTeamName == team || g.LTeamName == team ); let div = d3 .create("div") .style("width", "300px") // It's important that this div be positioned *relative* since the // absolutely positioned tooltip will be placed relative it. .style("position", "relative") .style("background", "#eee") .style("margin", "10px") .style("padding-left", "10px") .style("border-radius", "8px"); div.append("h4").text(team); let table = div.append("table"); let tooltip = div .append("div") .style("transform", "translate(-10px, -16px)") .style("position", "absolute") .style("border", "solid 1px black") .style("padding", "3px") .style("opacity", 0) .style("background", "white") .style("pointer-events", "none"); // The following *would* place the tooltip at the top right of the // chart. These properties are redefined in terms of the mouse // interaction, though. // .style("right", "0px") // .style("top", "0px") // Add the content to the table. let header_row = table.append("tr"); header_row.append("th").text("Date"); header_row.append("th").text("Opponent"); header_row.append("th").text(`${team} score`); header_row.append("th").text("Opponent score"); team_games.forEach(function (g) { let row = table.append("tr").style("border-bottom", "solid 0.5px #aaa"); row.append("td").text(d3.timeFormat("%m/%d/%y")(g.date)); if (g.WTeamName == team) { row.append("td").text(g.LTeamName); row.append("td").text(g.WScore); row.append("td").text(g.LScore); } else { row.append("td").text(g.WTeamName); row.append("td").text(g.LScore); row.append("td").text(g.WScore); } div // Turn the tooltip on when we enter the div .on("pointermove", function (evt, d) { let [x, y] = d3.pointer(evt); tooltip .style("opacity", 1) .style("left", `${x - 35}px`) .style("top", `${y - 10}px`); }) // Turn the tooltip off when we leave .on("pointerleave", function () { tooltip.style("opacity", 0); }); row // Position the tooltip relative to the row. .on("pointerenter", function () { d3.select(this).style("border-bottom", "solid 1px black"); tooltip.text(g.WTeamName == team ? "Win!" : "Loss"); }) .on("pointerleave", function () { d3.select(this).style("border-bottom", "solid 0.5px #aaa"); }); }); return div.node(); }36:T463,games = { let [games, teams, conferences, team_conferences] = await Promise.all([ FileAttachment("games@3.csv").csv(), FileAttachment("teams@2.csv").csv(), FileAttachment("conferences@2.csv").csv(), FileAttachment("team_conferences@3.csv").csv() ]); let teamid_to_teamname = d3.rollup( teams, (a) => a[0].TeamName, (o) => o.TeamID ); let teamid_to_confAbbrev = d3.rollup( team_conferences, (a) => a[0].ConfAbbrev, (o) => o.TeamID ); let confAbbrev_to_Conference = d3.rollup( conferences, (a) => a[0].Description, (o) => o.ConfAbbrev ); let teamid_to_conf = (id) => confAbbrev_to_Conference.get(teamid_to_confAbbrev.get(id)); games.forEach(function (g) { g.date = d3.utcParse("%Y-%m-%d")(g.date); g.WTeamName = teamid_to_teamname.get(g.WTeamID); g.LTeamName = teamid_to_teamname.get(g.LTeamID); g.WTeamConfAbbrev = teamid_to_confAbbrev.get(g.WTeamID); g.LTeamConfAbbrev = teamid_to_confAbbrev.get(g.LTeamID); g.WTeamConf = teamid_to_conf(g.WTeamID); g.LTeamConf = teamid_to_conf(g.LTeamID); }); return games; }37:[{"id":"6bd94c3734abebc225359254c8429b78809cf6b64afb551d4b2231760fec4c4d60572794633a798ec1d113b8135365ae13fba2be3400b2ff9fc30239dffc23df","href":"https://static.observableusercontent.com/files/6bd94c3734abebc225359254c8429b78809cf6b64afb551d4b2231760fec4c4d60572794633a798ec1d113b8135365ae13fba2be3400b2ff9fc30239dffc23df","name":"games@3.csv","type":"text/csv","lastModified":1677563745162.12,"size":139405},{"id":"d56339f49ea05825daa52f0424a61a9cd2785bb47e4da4a3c8a6360c7805439d0bc28c765a92efcc7e9d7d6c48807a42d1ef47a68fb3005295a38733f2370da6","href":"https://static.observableusercontent.com/files/d56339f49ea05825daa52f0424a61a9cd2785bb47e4da4a3c8a6360c7805439d0bc28c765a92efcc7e9d7d6c48807a42d1ef47a68fb3005295a38733f2370da6","name":"conferences@2.csv","type":"text/csv","lastModified":1677564077144.631,"size":1592},{"id":"ec47540f4a0e216e382797a9c4542bfada0f842d38b75d34bc5c34a83b5d2e3097cf5461db7a2c0a11b5b062e3ae57fa9bd11a7bc940d82853ad396f2f709eb5","href":"https://static.observableusercontent.com/files/ec47540f4a0e216e382797a9c4542bfada0f842d38b75d34bc5c34a83b5d2e3097cf5461db7a2c0a11b5b062e3ae57fa9bd11a7bc940d82853ad396f2f709eb5","name":"teams@2.csv","type":"text/csv","lastModified":1677564106035.108,"size":5556},{"id":"90e11bdfc51df119fcf49fbaf3838b2fb039efa1f8e06a4de7eb245bbe113589f09ea595452728ca4b70ee2e923f116a0e5abf094d8bb28cb1bf08fcea88221f","href":"https://static.observableusercontent.com/files/90e11bdfc51df119fcf49fbaf3838b2fb039efa1f8e06a4de7eb245bbe113589f09ea595452728ca4b70ee2e923f116a0e5abf094d8bb28cb1bf08fcea88221f","name":"team_conferences@3.csv","type":"text/csv","lastModified":1677564093421.302,"size":4099}] 30:{"id":"eedbf5ebeaed4f01","slug":null,"title":"Layout","thumbnail":"7ade833d811eef0932d1d009348edd182eea3aa8a316e20e18ae7a30df8b089a","access_level":"public","create_time":"$D2023-02-25T10:22:57.364Z","update_time":"$D2023-03-12T12:57:04.701Z","view_time":null,"first_public_time":"$D2023-09-07T00:23:48.606Z","fork":false,"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":694,"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":0,"collection":null,"type":"notebook","body":{"title":"Layout","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"## HTML and CSS in Observable\n\nOften, we can write HTML with CSS into an Observable notebook, just as you might as a web developer:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"

\n Lorem ipsum\n

\n Elit non duis dolore esse aliquip deserunt ut. \n Occaecat sint est voluptate consectetur duis. \n Laborum et proident sint nulla nulla laborum nisi.\n

\n Ex excepteur anim culpa dolore. \n Excepteur duis irure ex officia cupidatat in. \n Id nulla reprehenderit culpa proident duis.\n

\n Lorem eiusmod deserunt ut culpa qui amet aliqua. \n Adipisicing culpa aliqua excepteur nisi Lorem eiusmod nisi. \n Labore reprehenderit laboris exercitation irure nostrud proident.\n

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"Often though, we'll generate HTML and attach style directives programmatically. This is particularly true, when the HTML is generated by complicated data, and/or we want it to be interactive.\n\nFor example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"### The `display` property\n\nThe CSS `display` property affects the way that HTML elements are positioned and laid out. Here are a few of the basic values of `display` illustrated:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"viewof display = Inputs.radio([\"inline\", \"block\", \"inline-block\", \"none\"], {\n value: \"block\",\n label: \"display:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"{\n let div = d3.create(\"div\");\n div\n .selectAll(\"div\")\n .data(big_south_teams)\n .join(\"div\")\n .text((team) => team)\n .style(\"padding\", \"4px\")\n .style(\"margin\", \"5px\")\n .style(\"width\", \"120px\")\n .style(\"background\", \"#eee\")\n .style(\"display\", display);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"There are also `display` properties that apply to *containers*; thus, they affect the way that things are laid out inside them. The two most important examples are `flex` and `grid`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"viewof container_display = Inputs.radio([\"flex\", \"grid\"], {\n value: \"flex\",\n label: \"container display:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"{\n let div = d3.create(\"div\");\n if (container_display == \"flex\") {\n div.style(\"display\", \"flex\").style(\"flex-direction\", \"row\");\n } else {\n div\n .style(\"display\", \"grid\")\n .style(\"gap\", \"20px\")\n .style(\"grid-template-columns\", \"300px 300px 300px\");\n }\n\n div\n .selectAll(\"div\")\n .data(big_south_teams)\n .join(\"div\")\n .text((team) => team)\n .style(\"padding\", \"4px\")\n .style(\"margin\", \"5px\")\n .style(\"width\", \"120px\")\n .style(\"background\", \"#eee\");\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"### The `position` property\n\nThe `position` property is useful when you want to have absolute control over the placement of an element. For example, you might want one element placed on top of another.\n\nIn the example below, there's a containing DIV that's positioned `relative` and 10 randomly placed DIVs that are positioned `absolute` on top.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"## Final example\n\nI've got a function below called `create_game_chart`. It's built specifically for the Big South and will create a chart of any team's season. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":530,"value":"create_game_chart(\"UNC Asheville\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"Note that you can hover over the chart to get a silly tooltip that's implemented as an absolutely positioned DIV within the relatively positioned DIV that contains the chart.\n\nNow, suppose that we want a grid of these for the whole big south. We could accomplish that like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"{\n let div = d3\n .create(\"div\")\n .style(\"display\", \"grid\")\n .style(\"grid-template-columns\", \"320px 320px 320px\");\n big_south_teams\n // .slice(0, 10)\n // .forEach((s) => div.append(() => html`

`));\n .forEach((s) => div.append(() => create_game_chart(s)));\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"Here's the implementation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"## Assignment\n\nThe assignment has a fair amount of supplementary code so I've placed it in [this notebook](https://observablehq.com/d/8b8fbdfe054c9083).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":640,"value":"## Data and code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"big_south_games = games.filter(\n (g) => g.WTeamConfAbbrev == \"big_south\" && g.LTeamConfAbbrev == \"big_south\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"big_south_teams = _.uniq(\n games\n .filter(\n (g) =>\n g.WTeamConfAbbrev == \"big_south\" && g.LTeamConfAbbrev == \"big_south\"\n )\n .map((g) => [g.WTeamName, g.LTeamName])\n .flat()\n).sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"lorem = `

Lorem ipsum

\n${loremipsum({\n count: 20,\n maxSentencesPerParagraph: 12,\n maxWordsPerSentence: 25\n})\n .split(\"\\n\\n\")\n .map((s) => `

${s}

`)\n .join(\"\\n\")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"import { loremipsum } from \"@jashkenas/lorem-ipsum\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"