41:null 42:["$","title",null,{"children":"‹3› d3 v6 bar chart exercises | Joe Murphy | Observable"}] 48:[{"id":"414af96fba889a42a58238c8eee82a05df45289ccd654ea60ebef67be7e58a1742d970aa6198108f5736e8d94ffd3faaef023691b77dcfd7b34dc0ea70b80baa","href":"https://static.observableusercontent.com/files/414af96fba889a42a58238c8eee82a05df45289ccd654ea60ebef67be7e58a1742d970aa6198108f5736e8d94ffd3faaef023691b77dcfd7b34dc0ea70b80baa","name":"comments-by-date.csv","type":"text/csv","lastModified":1623452167149.145,"size":2584}] 46:{"id":"35f05b0d88da9383","slug":"three-d3-v6-bar-chart-exercises","title":"‹3› d3 v6 bar chart exercises","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-06-11T22:31:09.333Z","update_time":"$D2021-06-26T15:51:33.160Z","view_time":null,"first_public_time":"$D2021-06-14T20:47:15.511Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a6af4dee8234e6ec","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":"starter_2024","bio":"Data editor @ NBC News.","following":false},"version":135,"publish_version":135,"role":null,"authored":false,"authors":[{"type":"individual","id":"c2537b21a76a81f1","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":null,"bio":"Data editor @ NBC News.","following":false}],"members":[{"type":"individual","id":"c2537b21a76a81f1","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"36878a45e144981a","slug":"about-d3","title":"about-d3","owner":{"id":"a6af4dee8234e6ec","login":"freejoe76","name":"Joe Murphy"}},"type":"notebook","body":{"titling":"auto","title":"‹3› d3 v6 bar chart exercises","cells":[{"id":0,"value":"# ‹3› d3 v6 bar chart exercises\nScale / svg / axis creation and configuration exercises. Note: Don't scroll down to the next exercise unless you want to spoil the current exercise's answer. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## ‹1› Write the d3 you need to create a scale.\nWhen you succeed at this, text that reads \"BAND WIDTH IS\" will render on a blank svg with a red border.\n\nNote about the data: There are two values, \"date,\" a date-like string, and \"count,\" an integer that's less than 100. Also: There is a value for every date we want to display.\n\nTip: This is essentially the scale configuration object, which to configure you need to tell it what kind of scale it is, what values will be in it and the range of those values.\n\nDocumentation: https://github.com/d3/d3/blob/main/API.md#ordinal-scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"

Hint: These are the parts you'll need

A scale
A domain
A range

Hint: This is the general pattern:

\nconst svg = d3.select(container)

\n  \nsvg.selectAll(element-type)
\n  .data(array)
\n  .join(element-type)
\n  //attributes of that element-type;

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"chartNoSvg = {\n const width = 400;\n const height = 100;\n const margin = { top: 5, right: 5, bottom: 5, left: 5 };\n\n const x = d3\n .scaleBand()\n .domain(data.map((d) => d.date))\n .rangeRound([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.count)])\n .range([height - margin.bottom, margin.top]);\n\n const parseTime = d3.timeParse(\"%b %d %Y\");\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n // SVG creation goes here\n //svg\n // .append(\"g\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"## ‹3› Write the d3 you need to add a x axis to the chart\nTip: There are multiple ways to do this, and using d3's `.call()` functionality is the quickest path to the goal. There are three parts to the x axis: Where in the svg it goes, adjusting its position within its wrapper element, and the actual axis call itself.\n\nDocumentation: https://github.com/d3/d3/blob/main/API.md#axes-d3-axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"chartNoAxis = {\n const width = 400;\n const height = 100;\n const margin = { top: 5, right: 5, bottom: 5, left: 5 };\n\n const x = d3\n .scaleBand()\n .domain(data.map((d) => d.date))\n .rangeRound([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.count)])\n .range([height - margin.bottom, margin.top]);\n\n const parseTime = d3.timeParse(\"%b %d %Y\");\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#fd4d61\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", (d) => x(d.date))\n .attr(\"y\", (d) => y(d.count))\n .attr(\"height\", (d) => y(0) - y(d.count))\n .attr(\"width\", x.bandwidth());\n\n // PUT THE x axis here:\n // svg.append(\"g\")...\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = d3\n .csvParse(await FileAttachment(\"comments-by-date.csv\").text(), d3.autoType)\n .reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 47:"$46:body"