28:null 29:["$","title",null,{"children":"Homework 3 Lab - Scales, Axis, Line/Area Generators, Animation | UofU DataVis Course Lab | Observable"}] 2f:[] 2c:{"id":"00fc10d8173eb3a2","slug":null,"title":"Homework 3 Lab - Scales, Axis, Line/Area Generators, Animation","thumbnail":"dc18a1573e3ca51a75915abd1d6c912b8759a90f788326a60fba44801d89ecf7","access_level":"public","create_time":"$D2022-09-11T18:45:07.529Z","update_time":"$D2022-09-12T22:37:25.100Z","view_time":null,"first_public_time":"$D2022-09-11T18:45:07.529Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024"},"version":226,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"69ad1189924c09c4","login":"mozartfish","name":"Pranav Rajan","avatar_url":"https://avatars-next.observableusercontent.com/d1383db4f25321aa96e2ffb725ae43d832f4cc62ce03036e45ee7bcb1ed7b646","tier":null}],"members":[{"type":"individual","id":"69ad1189924c09c4","login":"mozartfish","name":"Pranav Rajan","avatar_url":"https://avatars-next.observableusercontent.com/d1383db4f25321aa96e2ffb725ae43d832f4cc62ce03036e45ee7bcb1ed7b646","tier":null,"role":"editor"},{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Homework 3 Lab - Scales, Axis, Line/Area Generators, Animation","cells":[{"id":0,"value":"# Homework 3 Lab - Scales, Axis, Line/Area Generators, Animation ","pinned":true,"hidden":false,"mode":"md"},{"id":7,"value":"To view this notebook, run blocks of code in order
This lab will cover the following:
1. How to set up scales
2. How to generate an axis
3. How to render and draw axis
4. How to create dynamic line and area charts with d3
\n","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"\n \n\n","pinned":true,"hidden":false,"mode":"html"},{"id":71,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"Here we have a function that will generate some random data for the visualizations ","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"data = d3.range(0,50).map((d)=>({x:Math.round(Math.random() * 25 * d),y:Math.round(Math.random() * 25 * d)}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"data.sort((a, b) => a.x - b.x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"## Chart Constants","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"CHART_WIDTH = 750\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"CHART_HEIGHT = 550","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"MARGIN = ({Left: 50, bottom: 20, top: 20, right: 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"ANIMATION_DURATION = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"# Scales","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"Scales","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"xScale = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.x)])\n .range([MARGIN.left, CHART_WIDTH - MARGIN.right])\n .nice();","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.y)])\n .range([CHART_HEIGHT - MARGIN.bottom - MARGIN.top, 0])\n .nice();\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"# Area Chart Generator","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"\n ","pinned":true,"hidden":false,"mode":"html"},{"id":163,"value":"areaGenerator = d3\n .area()\n .x((data) => xScale(data.x))\n .y1((data) => yScale(data.y) + MARGIN.top)\n .y0(CHART_HEIGHT - MARGIN.bottom);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"# Line Chart Generator","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":169,"value":"lineGenerator = d3\n .line()\n .x((data) => xScale(data.x))\n .y((data) => yScale(data.y) + MARGIN.top);","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"# Draw Axes","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":" d3.select('#line-example').select('#x-lineAxis')\n .attr('transform', `translate(0,${CHART_HEIGHT - MARGIN.bottom})`)\n .call(d3.axisBottom(xScale))\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":" d3.select('#y-lineAxis')\n .call(d3.axisLeft(yScale))\n .attr('transform', `translate(${MARGIN.left}, ${MARGIN.top})`)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":" d3.select('#x-areaAxis')\n .attr('transform', `translate(0,${CHART_HEIGHT - MARGIN.bottom})`)\n .call(d3.axisBottom(xScale))","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":" d3.select('#y-areaAxis')\n .call(d3.axisLeft(yScale))\n .attr('transform', `translate(${MARGIN.left}, ${MARGIN.top})`);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":" ","pinned":false,"hidden":false,"mode":"html"},{"id":185,"value":"# Draw Area Chart","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"\n d3.select('#AreaChart')\n .select('path')\n .datum(data)\n .transition(ANIMATION_DURATION)\n .attr('d', areaGenerator);","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"\n d3.select('#AreaChart')\n .select('path')\n .datum(data)\n .transition(ANIMATION_DURATION)\n .attr('d', areaGenerator);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"