31:T643,boundsDemo = { const svg = htl.svg`` const bounds = d3.select(svg).select("#bounds") bounds.selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(xAccessor(d))) .attr("cy", d => yScale(yAccessor(d))) .attr("r", 4) const xAxisGenerator = d3.axisBottom() .scale(xScale) .ticks(5) .tickFormat(d3.timeFormat("%-m/%-d/%Y")) bounds.selectAll(".x-axis") .data([""]) .join("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${boundsHeight})`) .call(xAxisGenerator) const yAxisGenerator = d3.axisLeft() .scale(yScale) .ticks(5) bounds.selectAll(".y-axis") .data([""]) .join("g") .attr("class", "y-axis") .attr("transform", `translate(0, 0)`) .call(yAxisGenerator) const wrapper = d3.select(svg) wrapper.selectAll(".wrapper") .data([""]) .join("rect") .attr("class", "wrapper") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#9980FA22") .attr("stroke", "#9980FA") .attr("stroke-width", 6) wrapper.selectAll(".bounds") .data([""]) .join("rect") .attr("class", "bounds") .attr("x", margins.left) .attr("y", margins.top) .attr("width", boundsWidth) .attr("height", boundsHeight) .attr("fill", "#15CBC422") .attr("stroke", "#15CBC4") .attr("stroke-width", 3) return svg }32:T4cd,lineChart = { const svg = htl.svg`` const bounds = d3.select(svg).select("#bounds") const lineGenerator = d3.line() .x(d => xScale(xAccessor(d))) .y(d => yScale(yAccessor(d))) bounds.append("path") .attr("d", lineGenerator(data)) .attr("fill", "none") .attr("stroke", "pink") .attr("stroke-width", 3) bounds.selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(xAccessor(d))) .attr("cy", d => yScale(yAccessor(d))) .attr("r", 4) const xAxisGenerator = d3.axisBottom() .scale(xScale) .ticks(5) .tickFormat(d3.timeFormat("%-m/%-d/%Y")) bounds.selectAll(".x-axis") .data([""]) .join("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${boundsHeight})`) .call(xAxisGenerator) const yAxisGenerator = d3.axisLeft() .scale(yScale) .ticks(5) bounds.selectAll(".y-axis") .data([""]) .join("g") .attr("class", "y-axis") .attr("transform", `translate(0, 0)`) .call(yAxisGenerator) return svg }33:[{"id":"9ae1c0ef602c5f2ff292d0445fe229d5cbb47a434f539279dcc7e9ab27ec4699a902b4e705df414d1a87fc95944be139c7393be2122e39e3fb4a1ab73cf79ade","href":"https://static.observableusercontent.com/files/9ae1c0ef602c5f2ff292d0445fe229d5cbb47a434f539279dcc7e9ab27ec4699a902b4e705df414d1a87fc95944be139c7393be2122e39e3fb4a1ab73cf79ade","name":"bounds-diagram@1.svg","type":"image/svg+xml","lastModified":1628642466700.25,"size":249840},{"id":"053f13547217bba3363f46121b72dbe6a9ec3c1f717345d55ce614bef2c38d01a7ec4426cbbe4f8a2fc66c85a1069790e22db7d0f73cf04c696c58a9935d4283","href":"https://static.observableusercontent.com/files/053f13547217bba3363f46121b72dbe6a9ec3c1f717345d55ce614bef2c38d01a7ec4426cbbe4f8a2fc66c85a1069790e22db7d0f73cf04c696c58a9935d4283","name":"yscale-diagram.svg","type":"image/svg+xml","lastModified":1628693501886.191,"size":75756},{"id":"8ce38648d481e53b4e3200bf59fc5dc8bb96c0ea2190d1339a24ca6e292f5498be513d27440f75ea20f940895e239406103f3a0106fb2942de792459795e282a","href":"https://static.observableusercontent.com/files/8ce38648d481e53b4e3200bf59fc5dc8bb96c0ea2190d1339a24ca6e292f5498be513d27440f75ea20f940895e239406103f3a0106fb2942de792459795e282a","name":"spectrum-diagram.svg","type":"image/svg+xml","lastModified":1628727391740.088,"size":31096},{"id":"e139bb2e6f7b06a056590aa45e981fd8025e4ca5351bda8a481b896bc7a52905797c628d18cd945599f3a4bca6c42b4aff9439b14498b3486ab754f0c5fb1060","href":"https://static.observableusercontent.com/files/e139bb2e6f7b06a056590aa45e981fd8025e4ca5351bda8a481b896bc7a52905797c628d18cd945599f3a4bca6c42b4aff9439b14498b3486ab754f0c5fb1060","name":"why@2.png","type":"image/png","lastModified":1628728403484.406,"size":2170117},{"id":"51bbfec77cec5ec92f93252e67f185d5cc5a1ed47e5fbff059fdbe27571d48b48bb32e2883dab8f3fc7646f57122d745bf4da6d6cba9df6f947e1d2bf0aee7e7","href":"https://static.observableusercontent.com/files/51bbfec77cec5ec92f93252e67f185d5cc5a1ed47e5fbff059fdbe27571d48b48bb32e2883dab8f3fc7646f57122d745bf4da6d6cba9df6f947e1d2bf0aee7e7","name":"scale-diagram@2.svg","type":"image/svg+xml","lastModified":1628645435728.593,"size":78486},{"id":"e91fd0cd7cec8ddafaa1021e65d4e4d0753ff4d40cd6fb22fe6a057088781ea258d2e9767812c251d250ac4fe64a623b8ffe7a40b798cfbb5b92240ba38d4464","href":"https://static.observableusercontent.com/files/e91fd0cd7cec8ddafaa1021e65d4e4d0753ff4d40cd6fb22fe6a057088781ea258d2e9767812c251d250ac4fe64a623b8ffe7a40b798cfbb5b92240ba38d4464","name":"washington_dc_weather.json","type":"application/json","lastModified":1628549638515.262,"size":402380},{"id":"022533ad314fa0976030f2d0ff6063f195d72da3a597b90876644c02815218a650fcaad118ee6e43484bac9cbe9e535affa7342ece3f37f008ba1d8742b0d87f","href":"https://static.observableusercontent.com/files/022533ad314fa0976030f2d0ff6063f195d72da3a597b90876644c02815218a650fcaad118ee6e43484bac9cbe9e535affa7342ece3f37f008ba1d8742b0d87f","name":"yscale.svg","type":"image/svg+xml","lastModified":1628804744295.359,"size":74637},{"id":"e58e6f34f7d357d47d309e9ae8a36860b046467ad5d568d9d28a5ffb9c757f74d88f4aee44f330cfb93bd62271bb80c691d819520944f9c3ccaac631069e6caf","href":"https://static.observableusercontent.com/files/e58e6f34f7d357d47d309e9ae8a36860b046467ad5d568d9d28a5ffb9c757f74d88f4aee44f330cfb93bd62271bb80c691d819520944f9c3ccaac631069e6caf","name":"xscale-diagram@1.svg","type":"image/svg+xml","lastModified":1628804731229.955,"size":79961}] 2f:{"title":"Creating custom data visualizations using ✨ D3.js ✨","cells":[{"id":0,"value":"# Creating custom data visualizations using ✨ D3.js ✨\n","pinned":false,"hidden":false,"mode":"md"},{"id":1499,"value":"md`### ❓ Why learn D3.js?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"FileAttachment(\"spectrum-diagram.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"md`### ❓ What can I make with it?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"FileAttachment(\"why@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"md`### ❓ How do I get started?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"md`Here's an overview of the different modules: https://wattenberger.com/blog/d3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"md`It just takes 7 steps to make any viz:\n\n1. Access data\n2. Create chart dimensions\n3. Draw stage\n4. Create scales\n5. Draw data\n6. Draw peripherals\n7. Set up interactions\n\nFull code example: https://codesandbox.io/s/d3-scatterplot-p6s5z?file=/src/index.js\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"md`## Step 1: Access data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"md`**Getting our dataset**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"data = FileAttachment(\"washington_dc_weather.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"md`**Bonus step: 👀 Looking at our data 👀**\n\nExample: https://observablehq.com/@wattenberger/exploration-flat`","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"md`**Create accessor functions**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"md`For all of the physical characteristics that we need, how do we get that metric from a data point?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"finalChart = {\n const svg = htl.svg``\n \n const bounds = d3.select(svg).select(\"#bounds\")\n\n bounds.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => xScale(xAccessor(d)))\n .attr(\"cy\", d => yScale(yAccessor(d)))\n .attr(\"r\", 4)\n \n const xAxisGenerator = d3.axisBottom()\n .scale(xScale)\n .ticks(5)\n .tickFormat(d3.timeFormat(\"%-m/%-d/%Y\"))\n bounds.selectAll(\".x-axis\")\n .data([\"\"])\n .join(\"g\")\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0, ${boundsHeight})`)\n .call(xAxisGenerator)\n \n const yAxisGenerator = d3.axisLeft()\n .scale(yScale)\n .ticks(5)\n bounds.selectAll(\".y-axis\")\n .data([\"\"])\n .join(\"g\")\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\", `translate(0, 0)`)\n .call(yAxisGenerator)\n\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1548,"value":"sampleDatapoint = data[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"yAccessor = d => d.temperatureHigh","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"yAccessor(sampleDatapoint)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"xAccessor = d => new Date(d.time * 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"xAccessor(sampleDatapoint)","pinned":true,"hidden":false,"mode":"ojs"},{"id":844,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Step 2: Create chart dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"md`We need to know the actual dimensions of our chart, so we can place our data in the right spot! But we also want margins around our chart for axes, legends, etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"FileAttachment(\"bounds-diagram@1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"md`- the **wrapper** contains the entire visualization\n- the **bounds** contain just the data elements\n- the **margins** specify the spacing outside of the data elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"margins = ({\n top: 10,\n right: 10,\n bottom: 50,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"width = 800\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"height= 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"boundsWidth = width - margins.left - margins.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"boundsHeight = height - margins.top - margins.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":1425,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"md`## Detour! What's SVG?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"viewof svgShape = radio({\n title: \"Select an SVG shape\",\n value: \"circle\",\n options: [\"circle\", \"ellipse\", \"rect\", \"line\", \"polygon\", \"polyline\", \"path\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"svgShapeAttributes = ({\n circle: {\n cx: 5,\n cy: 5,\n r: 4\n },\n ellipse: {\n cx: 5,\n cy: 5,\n rx: 2,\n ry: 4,\n },\n rect: {\n x: 2,\n y: 3,\n width: 6,\n height: 4,\n },\n line: {\n x1: 3,\n y1: 3,\n x2: 7,\n y2: 7,\n },\n polygon: {\n points: \"2,8 5, 2 8, 8\"\n },\n polyline: {\n points: \"2,8 5, 2 8, 8\",\n },\n path: {\n d: \"M 2,8 L 2,5 L 5,2 L 8,5 L 8,8 Q 5,10 2,8 Z\",\n }\n})[svgShape]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"styleAttributes = ({\n // fill: \"white\",\n // stroke: \"black\"\n // \"stroke-width\": 1,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":951,"value":"demoSvg = htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"drawShape = {\n d3.select(demoSvg).selectAll(\"*\").remove()\n const shape = d3.select(demoSvg).append(svgShape);\n Object.keys(svgShapeAttributes).forEach(attribute => {\n shape.attr(attribute, svgShapeAttributes[attribute])\n })\n Object.keys(styleAttributes).forEach(attribute => {\n shape.attr(attribute, styleAttributes[attribute])\n })\n return shape\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## Step 3: Draw stage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"svg = htl.svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1627,"value":"svgSelectionObject = d3.select(svg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1647,"value":"svgSelectionObject\n .attr(\"width\", width)\n .attr(\"height\", height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1176,"value":"svgSelectionObject\n // .style(\"border\", \"1px solid green\")\n // .append(\"g\")\n // .attr(\"transform\", `translate(${margins.left}, ${margins.top})`)\n // .append(\"rect\")\n // .attr(\"width\", boundsWidth)\n // .attr(\"height\", boundsHeight)\n // .attr(\"fill\", \"pink\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Step 4: Create scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"FileAttachment(\"xscale-diagram@1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1590,"value":"firstDate = d3.min(data, xAccessor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1594,"value":"lastDate = d3.max(data, xAccessor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"xScale = d3.scaleLinear()\n .domain([firstDate, lastDate])\n .range([0, boundsWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1598,"value":"xScale(new Date(\"06/06/2020\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1199,"value":"FileAttachment(\"yscale.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"minTemp = d3.min(data, yAccessor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1605,"value":"maxTemp = d3.max(data, yAccessor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"yScale = d3.scaleLinear()\n .domain([minTemp, maxTemp])\n .range([boundsHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Step 5: Draw data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"chart = htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"bounds = d3.select(chart).select(\"#bounds\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"bounds.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => xScale(xAccessor(d)))\n .attr(\"cy\", d => yScale(yAccessor(d)))\n .attr(\"r\", 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Step 6: Draw peripherals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"chartWithPeripherals = {\n const svg = htl.svg``\n \n const bounds = d3.select(svg).select(\"#bounds\")\n\n bounds.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => xScale(xAccessor(d)))\n .attr(\"cy\", d => yScale(yAccessor(d)))\n .attr(\"r\", 4)\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"boundsWithPeripherals = d3.select(chartWithPeripherals).select(\"#bounds\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"xAxisGenerator = d3.axisBottom()\n .scale(xScale)\n .ticks(5)\n .tickFormat(d3.timeFormat(\"%-m/%-d/%Y\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"xAxis = boundsWithPeripherals.append(\"g\")\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0, ${boundsHeight})`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1622,"value":"xAxisGenerator(xAxis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"yAxisGenerator = d3.axisLeft()\n .scale(yScale)\n .ticks(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"boundsWithPeripherals.append(\"g\")\n .attr(\"class\", \"y-axis\")\n .call(yAxisGenerator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`## Step 7: Set up interactions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"chartWithInteractions = {\n const svg = htl.svg``\n \n const bounds = d3.select(svg).select(\"#bounds\")\n\n bounds.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => xScale(xAccessor(d)))\n .attr(\"cy\", d => yScale(yAccessor(d)))\n .attr(\"r\", 4)\n \n const xAxisGenerator = d3.axisBottom()\n .scale(xScale)\n .ticks(5)\n .tickFormat(d3.timeFormat(\"%-m/%-d/%Y\"))\n bounds.selectAll(\".x-axis\")\n .data([\"\"])\n .join(\"g\")\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0, ${boundsHeight})`)\n .call(xAxisGenerator)\n \n const yAxisGenerator = d3.axisLeft()\n .scale(yScale)\n .ticks(5)\n bounds.selectAll(\".y-axis\")\n .data([\"\"])\n .join(\"g\")\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\", `translate(0, 0)`)\n .call(yAxisGenerator)\n\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"boundsWithInteractions = d3.select(chartWithInteractions).select(\"#bounds\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"mutable hoveredDatum = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"boundsWithInteractions.selectAll(\"circle\")\n .on(\"mouseover\", (e, datum) => {\n console.log(datum, hoveredDatum)\n \n mutable hoveredDatum = datum\n\n const allCircles = this\n allCircles.attr(\"fill\", \"black\")\n \n const thisCircle = d3.select(e.target)\n thisCircle.attr(\"fill\", \"red\")\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1489,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"md`Okay... but how do I make _custom_ charts? You build on the basics!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"md`*Notebook dependencies*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"import {radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}