28:null 29:["$","title",null,{"children":"Power Plants [3] dynamic motion | Eric Field | Observable"}] 2e:T6c9,

U.S. Power Plants

Choose a state:

Change Factors:

· Color of bubble represents fuel type
· Size of bubble represents plant generation capacity
· Height of bubble represents equivalent CO2 emissions (CO2e), or change it's factor with the buttons.
· Left to right is plant location in the US, by longitude.
(latitude is not represented)

2f:T460,30:T5a0,{ // set the buttons to call the filter function when clicked. const btns = d3.select(viz_container).select("#controls"); // register event listeners btns.select("#btn-COAL").on("click", () => filter('Plant primary fuel generation category','COAL')); btns.select("#btn-BIOMASS").on("click", () => filter('Plant primary fuel generation category','BIOMASS')); btns.select("#btn-HYDRO").on("click", () => filter('Plant primary fuel generation category','HYDRO')); btns.select("#btn-OIL").on("click", () => filter('Plant primary fuel generation category','OIL')); btns.select("#btn-GAS").on("click", () => filter('Plant primary fuel generation category','GAS')); btns.select("#btn-NUCLEAR").on("click", () => filter('Plant primary fuel generation category','NUCLEAR')); btns.select("#btn-GEOTHERMAL").on("click", () => filter('Plant primary fuel generation category','GEOTHERMAL')); btns.select("#btn-WIND").on("click", () => filter('Plant primary fuel generation category','WIND')); btns.select("#btn-SOLAR").on("click", () => filter('Plant primary fuel generation category','SOLAR')); btns.select("#btn-OTHERFOSL").on("click", () => filter('Plant primary fuel generation category','OTHERFOSL')); btns.select("#btn-WSTHTOTPUR").on("click", () => filter('Plant primary fuel generation category','WSTHTOTPUR')); btns.select("#btn-dimAll").on("click", dimAll); btns.select("#btn-showAll").on("click", showAll); }31:[{"id":"7550bc069c24df67b093ac77aa84c444ed7e88ef08e00799ee15587d33d4f2590e5f0efc1cbc39393e6430c73dc41e043a74e6e72edcc795ec7b1acb5621c122","href":"https://static.observableusercontent.com/files/7550bc069c24df67b093ac77aa84c444ed7e88ef08e00799ee15587d33d4f2590e5f0efc1cbc39393e6430c73dc41e043a74e6e72edcc795ec7b1acb5621c122","name":"powerplants_allUS_2010.csv","type":"text/csv","lastModified":1642368553202.486,"size":4016086}] 2c:{"id":"af38b610d78e623e","slug":"powerplants_3","title":"Power Plants [3] dynamic motion","thumbnail":"56e85a7dfcefd71cd3b3bc13accc5e0d90614762fa300639164261e6e37cf12e","access_level":"public","create_time":"$D2022-01-16T21:29:13.202Z","update_time":"$D2023-04-12T00:57:54.971Z","view_time":null,"first_public_time":"$D2022-03-22T19:10:03.347Z","has_unpublished_edits":null,"fork":{"id":"284b01af9d3bf699","slug":"powerplants_2","title":"Power Plants [2] visual filters+UI","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"stars":0,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":394,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"4a9b981874effba7","slug":"powerplants","title":"Powerplants","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"Power Plants [3] dynamic motion","cells":[{"id":0,"value":"# Power Plants [3] dynamic motion\nSpatially encoding the state of energy emissions in the U.S. \n(and a demo of many of the working principles of seeing data through graphics.) \n\n**This version adds dynamic motion, changing location and size by data field**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2e","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"viz_container","database":"$undefined"},{"id":17,"value":"#### ^^ the main SVG drawing space inside an HTML

container","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"#### get the data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"data = FileAttachment(\"powerplants_allUS_2010.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"#### Functions to clean and format the data. Will be called (used) later.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"toNum = (text) => Number(text.replace(/,/g,''));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"#### Functions and variables to setup and control the graphical drawing space:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viz = d3.select(viz_container).select(\"#powerplants\") // have d3 grab the SVG (by it's ID) for us to use.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"vizWidth = Number(viz.attr(\"width\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"vizHeight = Number(viz.attr(\"height\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"baseline = vizHeight - 150 // the 0 line to work up from in the graphic visual","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"rFromArea = (area) => Math.sqrt(toNum(area)/Math.PI); // get radius from an area value. A = PI * r^2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"#### scaling functions\nThese allow us to pass a value in and interpolate (or extrapolate) a scaled value out.\nThese will use scaleLinear but we can also scale on other curves like log, exponent, and even color ranges.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"scaleLon = d3.scaleLinear()\n .domain([-175, -65]) // take in values between -175 longitude (west of Hawaii) and -65 longitude (Atlantic ocean)\n .range([0,vizWidth]) // and interpolate them into the width of the visual space in pixels, from 0 to the SVG width.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"scaleHeight = d3.scaleLinear()\n .domain([0,30000000]) // input values on a fixed numeric domain. This could also look for a d3.max value.\n .range([baseline,0]) // convert to SVG pixel position, starting at the bottom (baseline) and going to 0 (which is at SVG top)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"rScale = 0.03 // this one is just a static constant to use as a visual scalar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"## Draw the visual ...\nOK. Here comes the fun stuff. Use the data to generate thousands of objects on the page, located and encoded by their data properties. \nYou'll need to scroll up to the SVG at the top of the page to see this. \n\nLeft to right (x axis) is longitude west to east. \nBottom to top (y axis) is a scale of CO2 emissions from each plant. \nCircle size (radius from area) is how much energy the plant produces, so we can see effectiveness vs carbon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"circles = viz.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => scaleLon(toNum(d[\"Plant longitude\"])))\n .attr(\"cy\", d => scaleHeight(toNum(d[\"Plant annual CO2 equivalent emissions (tons)\"])))\n .attr(\"r\", d => rFromArea(d[\"Plant annual net generation (MWh)\"]) * rScale || 1)\n .attr(\"class\", d => d[\"Plant primary fuel generation category\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"#### see that class assignment to Fuel Generation Category in the data?\nThat sets a type tag that we can attach some other graphical encodings to. \nLet's add some style (CSS styles) to get that to show.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"$2f","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"#### add labels for the states","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"A rollup calculates an aggregate value based on a grouped collection of data. \nIn this case we group by state abbreviation, and then calculate the mean (average) of all of the longitudes of plants in that state, returning the one mean value for each state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"stateAvgLongs = d3.rollup(data, v => d3.mean(v, d => d[\"Plant longitude\"]), d => d[\"Plant state abbreviation\"]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"stateLabels = viz.selectAll(\".stateLabel\")\n .data(stateAvgLongs)\n .join(\"text\")\n .attr(\"x\", d => scaleLon(d[1]))\t\t// use the rollup data's value\n .attr(\"y\", baseline + 30)\t\t\t\t // 30 pixels below the baseline\n .text(d => d[0])\t\t\t\t\t\t // use the rollup data's key\n .classed(\"stateLabel\", true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"### UI and dynamic filtering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"function dimAll() {circles.style(\"opacity\",\"0.02\")}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"function showAll() {circles.style(\"opacity\",\"\")}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"function filter(field,value) {\n dimAll();\n circles.filter(d => d[field] == value).style(\"opacity\",\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"function filterValue(field,value) {\n dimAll();\n circles.filter(d => toNum(d[field]) > value).style(\"opacity\",\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"#### Register event listeners to the buttons, to call the filter and dim functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"#### Build a list of states from the data and put it in the dropdown selection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"// create a dropdown select list from all of the states in the data\nstateSelects = d3.select(viz_container).select(\"#states\")\n .selectAll(\"option\")\n .data(d3.group(data, d=>d[\"Plant state abbreviation\"]).keys()) // groups all states together and then pulls the key (state name)\n .join(\"option\") // create a new option element for each state\n .text(d => d); // labeled by the data value (state name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"#### add an event listener for when the States dropdown is changed\nSo you can select a state from the list, and the visual will filter on data for that state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"{\n const stateSelectSet = d3.select(viz_container).select(\"#states\");\n stateSelectSet.on(\"change\", (evt) => filter('Plant state abbreviation',evt.target.value)) // uses the event to get the value\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"### Add a Mouseover highlight to key on one circle / plant","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"highlight = (evt,d) => {\n let thisElem = evt.currentTarget;\n d3.select(thisElem)\n .style(\"stroke\",\"yellow\")\n .style(\"stroke-width\",\"2\")\n .raise();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"unhighlight = (evt) => {\n d3.select(evt.currentTarget)\n .style(\"stroke\",\"\")\n .style(\"stroke-width\",\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"{\n circles.on(\"mouseover\", highlight);\n circles.on(\"mouseout\", unhighlight);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"#### some CSS styles to position and shape the buttons and input controls","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"## Here's the new stuff in this one.\nThe rest above is the same as Power Plants _ 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"function changeY (field, yDomain) {\n // use a different data field to change the Y coordinate for all elements. \n // Animate the change.\n\n scaleHeight.domain([0,yDomain]); // change the yDomain for our y-axis scale. For different fields' values, or just zoom/focus.\n \n circles // using the existing circles collection (graphics and joined data)\n .transition().duration(1000) // animate their motion over 1 second (1000ms)\n .attr(\"cy\", d => scaleHeight(toNum(d[field]))) // by resetting their cy attribute to a new scaleHeight interpolation\n .attr(\"r\", d => rFromArea(d[\"Plant annual net generation (MWh)\"]) * rScale || 1) // and reset the r if needed\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"function map() {\n // make it a geographic map, changing y into it's latitude value rather than a performance data value.\n // this uses a simple and dumb square \"projection\". See the Maps examples for better use of projections.\n \n scaleHeight.domain([0,90]); // domain for latitude is 0 to 90 degrees\n \n circles // using the existing circles collection (graphics and joined data)\n .transition().duration(1000) // animate\n .attr(\"cy\", d => scaleHeight(d[\"Plant latitude\"]))\n .attr(\"r\", d => rFromArea(d[\"Plant annual net generation (MWh)\"])/100 | 1); // rescale circles for the map.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"Add some new buttons into the interface in the first cell. Scroll to the top to see these. Then add event listeners for them here:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"{\n // set the buttons to call the filter function when clicked.\n const btns = d3.select(viz_container).select(\"#controls\");\n\n // register event listeners\n btns.select(\"#btn-changeCO2e\").on(\"click\", () => changeY('Plant annual CO2 equivalent emissions (tons)',30000000));\n btns.select(\"#btn-changeCO2\").on(\"click\", () => changeY('Plant annual CO2 emissions (tons)',30000000));\n btns.select(\"#btn-changeCH4\").on(\"click\", () => changeY('Plant annual CH4 emissions (lbs)',937500));\n btns.select(\"#btn-changeN2O\").on(\"click\", () => changeY('Plant annual N2O emissions (lbs)',150000));\n \n btns.select(\"#btn-map\").on(\"click\", map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"