2d:null 2e:["$","title",null,{"children":"April 22, 2022 #30DayChartChallenge - Animation | Advaith Venkatakrishnan | Observable"}] 33:[{"id":"7103c67482064083b9f68eb3a13cb0d80135aecfc88fdda88791b9141f5d1d13271b93e523be0319f9e379b95b68b983477767e9809b5de29f1d8b2756f644c1","href":"https://static.observableusercontent.com/files/7103c67482064083b9f68eb3a13cb0d80135aecfc88fdda88791b9141f5d1d13271b93e523be0319f9e379b95b68b983477767e9809b5de29f1d8b2756f644c1","name":"us-10m.v1.json","type":"application/json","lastModified":1650654974725.209,"size":689794},{"id":"4a478a0b83b7f15d722f912dd204151b7573715ff72074608c0b310a15380b0d557d4904b5622739e0249bdd8370cc2f765f96ab4c38104147ca3ce9075c4bd4","href":"https://static.observableusercontent.com/files/4a478a0b83b7f15d722f912dd204151b7573715ff72074608c0b310a15380b0d557d4904b5622739e0249bdd8370cc2f765f96ab4c38104147ca3ce9075c4bd4","name":"Gas Prices Per State - Sheet1 (1).csv","type":"text/csv","lastModified":1650659340583.021,"size":1912}] 31:{"id":"a96c1b42cb0942c4","slug":"april-22-2022-30daychartchallenge-animation","title":"April 22, 2022 #30DayChartChallenge - Animation","thumbnail":"572836c9ec033367d120fe72a448993649894d0b5b11d8e8ab501a6ea71ec94f","access_level":"public","create_time":"$D2022-04-22T19:15:17.151Z","update_time":"$D2022-04-22T21:17:33.615Z","view_time":null,"first_public_time":"$D2022-04-22T21:23:05.615Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"20079c8e956535fa","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":"starter_2024"},"version":178,"publish_version":178,"role":null,"authored":false,"authors":[{"type":"individual","id":"6016059babd9176a","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":null}],"members":[{"type":"individual","id":"6016059babd9176a","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"April 22, 2022 #30DayChartChallenge - Animation","cells":[{"id":0,"value":"# April 22, 2022 #30DayChartChallenge - Animation\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"us = FileAttachment(\"us-10m.v1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3Geo = require(\"d3-geo@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"states = topojson.feature(us, us.objects.states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"gasPriceData = FileAttachment(\"Gas Prices Per State - Sheet1 (1).csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"dataMaps = {\n const data = gasPriceData.map(state => {\n return {\n value: parseFloat(state['Regular']),\n code: parseInt(state['FIPS'])\n }\n })\n\n const lookupMap = {}\n\n const gasRange = d3.extent(data, d => d.value)\n const colorScale = d3.scaleSequential([\"#fdd49e\", \"#b30000\"]).domain(gasRange)\n data.sort((a, b) => d3.ascending(a.value, b.value)).forEach((state, index) => {\n lookupMap[state.code] = {\n value: state['value'],\n fill: colorScale(state['value']),\n order: index\n }\n })\n\n return { lookupMap, colorScale }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"lookupMap = dataMaps.lookupMap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"projection = d3.geoIdentity().fitExtent([[25, 25],[width - 25, height - 25]], states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"path = d3Geo.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"margin = ({\n top: 25,\n bottom: 25,\n left: 25,\n right: 25\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"plotWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"plotHeight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"

\n State Gas Price Averages as of 4/22/2022\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"chart = {\n // boilerplate start\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n\n const g = svg.append('g')\n .attr('transform', `translate(${margin.left}, ${margin.top})`)\n\n const statePath = g.selectAll('.states')\n .data(states.features)\n .join('path')\n .attr('d', path)\n .attr('fill', d => {\n const stateId = parseInt(d.id)\n if (stateId in lookupMap) return lookupMap[stateId].fill\n return 'white'\n })\n .attr('stroke', 'white')\n .attr('class', 'states')\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"

\n ${\n Legend(dataMaps.colorScale, {\n title: \"Gas Prices ($)\"\n })\n } \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"Data Credits: https://gasprices.aaa.com/state-gas-price-averages/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"{\nconst form = html``;\n form.animate.onclick = () => {\n animate()\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"animate = () => {\n const states = d3.selectAll('.states')\n .transition()\n .duration(3000)\n .attr('transform', d => {\n const stateId = parseInt(d.id)\n if (!(stateId in lookupMap)) return 'translate(0,0)'\n const position = lookupMap[stateId].order\n const mRow = Math.floor(position / 10)\n const mCol = position % 10\n // console.log(stateId, mRow, mCol, grid.xScale(mCol), grid.yScale(mRow))\n const [newX, newY] = [grid.xScale(mCol), grid.yScale(mRow)]\n const [currentX, currentY] = path.centroid(d)\n \n const maxArea = grid.xScale.bandwidth() * grid.yScale.bandwidth()\n const scaleDown = path.area(d) / maxArea\n return `translate(${newX - currentX}, ${newY - currentY})`\n })\n .transition()\n .duration(5000)\n .attr('transform', d => {\n return `scale(1)`\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// Create a 10 x 5 grid for each state?\ngrid = {\n const ROWS = 10\n const COLS = 6\n const xScale = d3.scaleBand().domain(d3.range(0, ROWS)).range([50, plotWidth])\n const yScale = d3.scaleBand().domain(d3.range(0, COLS)).range([plotHeight, 50])\n return {\n xScale,\n yScale\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"