2b:null 2c:["$","title",null,{"children":"D3 Fundamentals (prep) | Andy Van Slaars | Observable"}] 31:[] 2f:{"id":"e62e1d2700d37c9b","slug":null,"title":"D3 Fundamentals (prep)","thumbnail":"449b2b53901d37cf8ff1d2954241659fa16d795b979246b31f7c930197be1cd3","access_level":"public","create_time":"$D2023-04-17T18:40:18.952Z","update_time":"$D2023-04-20T17:19:59.021Z","view_time":null,"first_public_time":"$D2023-04-17T18:40:18.952Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ee83d26cb12f2083","login":"avanslaars","name":"Andy Van Slaars","avatar_url":"https://avatars-next.observableusercontent.com/9224b204f1d6aea55eb11c5a24932730e76297bc88683622683d6335c7daf87a","tier":"starter_2024","bio":"Husband and Father. Autodidact. Developer. JavaScript enthusiast. Enterprise Architect at Cengage Learning. @eggheadio instructor. `npx avanslaars`"},"version":191,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f99a01d0e64049ad","login":"avanslaars","name":"Andy Van Slaars","avatar_url":"https://avatars-next.observableusercontent.com/9224b204f1d6aea55eb11c5a24932730e76297bc88683622683d6335c7daf87a","tier":null,"bio":"Husband and Father. Autodidact. Developer. JavaScript enthusiast. Enterprise Architect at Cengage Learning. @eggheadio instructor. `npx avanslaars`"}],"members":[{"type":"individual","id":"f99a01d0e64049ad","login":"avanslaars","name":"Andy Van Slaars","avatar_url":"https://avatars-next.observableusercontent.com/9224b204f1d6aea55eb11c5a24932730e76297bc88683622683d6335c7daf87a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Fundamentals (prep)","cells":[{"id":54,"value":"# D3 Fundamentals (prep)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"## Setting Dimensions\n\nThe dimensions define the overall size of your SVG, as well as the margins. The inclusion of margins here isn't strictly necessary. You could define them separately, but I like to put them with the overall width and height.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"dimensions = ({\n width: 500,\n height: 350,\n margin: { top: 20, left: 50, right: 5, bottom: 25 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"We can use these dimensions to start creating our SVG:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":" ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## Bounded Dimensions\n\nOnce you have your width, height and margins defined, you can calculate your **bounded** dimensions. This is where the data in your data visualization will be displayed, leaving the margins for axes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"boundedHeight = dimensions.height - (dimensions.margin.top + dimensions.margin.bottom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"boundedWidth = dimensions.width - (dimensions.margin.left + dimensions.margin.right)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"Then you can use the overall dimensions, combined with your bounded dimensions to layout the rough shape of your data visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"```diff\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"## Scales\n\nScales in D3 are the mechanism for converting values from our data into corresponding screen values. Generally, these will be pixel values that are using for height, width, and positioning of elements but scales can also be used to determine color, opacity, and other styles to help convey the data's meaning.\n\n[obligatory Shirley Wu link](https://shirleywu.studio/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"### Linear Scales Example\n\nLinear Scales are the simplest to start with and they convert continuous domain data to a continuous range of screen values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"exampleXScale = d3.scaleLinear().domain([1,10]).range([0,100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"exampleXScale(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"exampleXScale(12)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"exampleXScale(-20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"### Other Available Scales\n\n[D3 docs for Scales](https://github.com/d3/d3-scale#api-reference)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"## Defining Scales Base on Your Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"data = [\n { region: 'East', value: 100 },\n { region: 'West', value: 132 },\n { region: 'North', value: 221 },\n { region: 'South', value: 87 },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"xScale = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([0, boundedWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"xScale(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"xScale(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"xScale(data[0].value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"## Accessor Functions\n\nGenerally, the data you want to visualize will be a set of data points in the form of an array of objects. Within each datum, you'll want to access a specific property for a given axis or other value to represent. In D3, we'll use \"accessor functions\" to get at that key in the object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"xAccessor = (d) => d.value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"xScale(xAccessor(data[0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"## Drawing a Data Point","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"## Scaled Accessors\n\nWe'll see this pattern a lot `xScale(xAccessor(d))` so we can also create a scaled accessor to combine the scale and accessor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"scaledX = d => xScale(xAccessor(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"## Band Scales\n\nA band scale maps a discrete set of values from a domain to a continuous range of screen values. This gives us the ability to feed in the list of distinct list of `region` values and allow D3 to determine:\n\n1. How many values we have\n2. How much space is available on screen\n3. How much screen space to allocate to each item in the domain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"### yAccessor\n\nWe'll start with a `yAccessor`. Just like our `xAccessor` this will be a function that gets us the `y` value from an individual data point.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"yAccessor = d => d.region","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"### yScale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"yScale = d3.scaleBand().domain(data.map(yAccessor)).range([boundedHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"### Bandwidth","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"bandwidth = yScale.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"### Using Bandwidth in our SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"### Adding all 4 data elements\n\nJust the height based on bandwidth isn't enough, we also need to move these based on their relative position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"### Create a scaled accessor for y","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"scaledY = d => yScale(yAccessor(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"### Apply a Transform to each element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"### Adding padding to the band scale\n`yScale = d3.scaleBand().domain(data.map(yAccessor)).range([boundedHeight, 0]).padding(0.1)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"