31:T6c8,

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)

32:T460,33: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); }34:[{"id":"7550bc069c24df67b093ac77aa84c444ed7e88ef08e00799ee15587d33d4f2590e5f0efc1cbc39393e6430c73dc41e043a74e6e72edcc795ec7b1acb5621c122","href":"https://static.observableusercontent.com/files/7550bc069c24df67b093ac77aa84c444ed7e88ef08e00799ee15587d33d4f2590e5f0efc1cbc39393e6430c73dc41e043a74e6e72edcc795ec7b1acb5621c122","name":"powerplants_allUS_2010.csv","type":"text/csv","lastModified":1648572208786.014,"size":4016086},{"id":"47bcdfa2ee572f67429301963e68c17398c565db2afb229c82a1c3f4edd7268c419f624594b32626f1e4e9a46048350ed2af3f10ae2e082b9302f6af9de10f02","href":"https://static.observableusercontent.com/files/47bcdfa2ee572f67429301963e68c17398c565db2afb229c82a1c3f4edd7268c419f624594b32626f1e4e9a46048350ed2af3f10ae2e082b9302f6af9de10f02","name":"powerplants_allUS_2018.csv","type":"text/csv","lastModified":1648575415310.371,"size":6414830},{"id":"100c2d23780df12b7fe6a93b3297505ca39eb94f8c40627a79d24033e0a66759766e5c4e3ca8728195014feb6b9cbb3aab4407f1a736fa40fc8e7ddf2b983dc4","href":"https://static.observableusercontent.com/files/100c2d23780df12b7fe6a93b3297505ca39eb94f8c40627a79d24033e0a66759766e5c4e3ca8728195014feb6b9cbb3aab4407f1a736fa40fc8e7ddf2b983dc4","name":"powerplants_allUS_2009.csv","type":"text/csv","lastModified":1648575412655.019,"size":5401245},{"id":"e9223aaf6394e296a1fd7e3cbc87c57913a5673e23b730328aacb3d3a219953e4ea0416d3bd09dcd05568aa1b69424448d0df8c90b91ec2f5695a76962e7534b","href":"https://static.observableusercontent.com/files/e9223aaf6394e296a1fd7e3cbc87c57913a5673e23b730328aacb3d3a219953e4ea0416d3bd09dcd05568aa1b69424448d0df8c90b91ec2f5695a76962e7534b","name":"powerplants_allUS_2019.csv","type":"text/csv","lastModified":1648572388562.277,"size":6814535},{"id":"86df1771c46fde22ea9a09fab68c3fd71953ba065e395c1d713cb68601ff4801774e564f0828351571b62fe4ab4814b35fdf2097c02076cd77056c69b1eab80c","href":"https://static.observableusercontent.com/files/86df1771c46fde22ea9a09fab68c3fd71953ba065e395c1d713cb68601ff4801774e564f0828351571b62fe4ab4814b35fdf2097c02076cd77056c69b1eab80c","name":"powerplants_allUS_2007.csv","type":"text/csv","lastModified":1648575411442.098,"size":5133484},{"id":"4e8736b4c6248ebefecba79012179ac765faa0cac80cc8b59169aa52da81a5bc56bac2f7d59c311ac435ed62b848aa8b8987e225b438d465d1ed9b445521b4eb","href":"https://static.observableusercontent.com/files/4e8736b4c6248ebefecba79012179ac765faa0cac80cc8b59169aa52da81a5bc56bac2f7d59c311ac435ed62b848aa8b8987e225b438d465d1ed9b445521b4eb","name":"powerplants_allUS_2012.csv","type":"text/csv","lastModified":1648575410636.612,"size":4991251},{"id":"15fd72a6cec19d00d844cb44f7ffe6e46a7f9e8c5666aa5164b51b7bf4a4255fd2b8a4750185ca1b65b11407eb38a45bbde986c9f21d5ba9f4e334ddc240dc29","href":"https://static.observableusercontent.com/files/15fd72a6cec19d00d844cb44f7ffe6e46a7f9e8c5666aa5164b51b7bf4a4255fd2b8a4750185ca1b65b11407eb38a45bbde986c9f21d5ba9f4e334ddc240dc29","name":"powerplants_allUS_2016.csv","type":"text/csv","lastModified":1648575410145.519,"size":4937998},{"id":"645dbdf17ac3a85306f7fa4c7f7990bb99976b72928a096b45801e9f7f2eced4855fb7d12a90c760ff273f6a92e6713e133a867b648328c39547a81a147887cb","href":"https://static.observableusercontent.com/files/645dbdf17ac3a85306f7fa4c7f7990bb99976b72928a096b45801e9f7f2eced4855fb7d12a90c760ff273f6a92e6713e133a867b648328c39547a81a147887cb","name":"powerplants_allUS_2014.csv","type":"text/csv","lastModified":1648575407700.065,"size":4576249}] 2f:{"title":"Power Plants [4] changing out / updating datasets","cells":[{"id":0,"value":"# Power Plants [4] changing out / updating datasets\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.) ","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"## The new stuff in this one.\nThe rest below the visual is the same as [Power Plants _ 3](https://observablehq.com/@emfielduva/powerplants_3)","pinned":false,"hidden":false,"mode":"md"},{"id":402,"value":"### Changing data\nData isn't static, or you might need to use the same visual structure to compare across different files. The beauty of this platform, and data visualization in general, is that it is made of rules applied to whatever data is coming in, so we can change out the data and get an updated visual. \n\nThis might mean a database link that is continually updating with new data, or a consumable REST API from a data source on your favorite topic. These would just update / refresh when you refresh the page and on it's own as new data comes in.\n\nOr it might just be a few files of different years' data, but in the same structure, as per this dataset from the EPA. So here we're going to add some new data files to our File Attachments, and swap them in and out.","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"### New data\nSee the File attachments section to the top-right. The paperclip icon. \nSee the additional files in there -- new years of power plant data.","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"We could swap them out manually just by changing the name of the FileAttachment cell, but to use them interactively, we can create a javascript object to give us several instances of the FileAttachment, coded by year:","pinned":false,"hidden":false,"mode":"md"},{"id":451,"value":"dataFiles = ({\n \"2007\":FileAttachment(\"powerplants_allUS_2007.csv\"),\n \"2009\":FileAttachment(\"powerplants_allUS_2009.csv\"),\n \"2010\":FileAttachment(\"powerplants_allUS_2010.csv\"),\n \"2012\":FileAttachment(\"powerplants_allUS_2012.csv\"),\n \"2014\":FileAttachment(\"powerplants_allUS_2014.csv\"),\n \"2016\":FileAttachment(\"powerplants_allUS_2016.csv\"),\n \"2018\":FileAttachment(\"powerplants_allUS_2018.csv\"),\n \"2019\":FileAttachment(\"powerplants_allUS_2019.csv\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"#### Now get the data to use in the visual:\nthe old way first, and commented out (just for reference), one static file:","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"//data = FileAttachment(\"powerplants_allUS_2010.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"The new way, pulling in the instance from whatever year is chosen:","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"data = dataFiles[year].csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"and then we select a year:","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"//year = 2019 // a static approach, needs to be changed by hand","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"Or use a Radio selection or other interface element (slider, etc.) to choose a year: \nGo ahead and try it. Watch the visual change.","pinned":false,"hidden":false,"mode":"md"},{"id":500,"value":"viewof year = Inputs.radio([\"2007\", \"2009\", \"2010\", \"2012\", \"2014\", \"2016\", \"2018\", \"2019\"], {label: \"Year:\", value:\"2010\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"html"},{"id":17,"value":"#### ^^ the main SVG drawing space inside an HTML

container","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"#### Functions to clean and format the data. Will be called (used) later.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"toNum = (text) => Number(text.replace(/,/g,''));","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"#### Functions and variables to setup and control the graphical drawing space:","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":69,"value":"vizWidth = Number(viz.attr(\"width\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"vizHeight = Number(viz.attr(\"height\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"baseline = vizHeight - 150 // the 0 line to work up from in the graphic visual","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":127,"value":"$32","pinned":true,"hidden":false,"mode":"html"},{"id":240,"value":"#### add labels for the states","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":146,"value":"### UI and dynamic filtering","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"function dimAll() {circles.style(\"opacity\",\"0.02\")}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"function showAll() {circles.style(\"opacity\",\"\")}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":199,"value":"#### Register event listeners to the buttons, to call the filter and dim functions","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"#### Build a list of states from the data and put it in the dropdown selection","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":382,"value":"### Add a Mouseover highlight to key on one circle / plant","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":388,"value":"unhighlight = (evt) => {\n d3.select(evt.currentTarget)\n .style(\"stroke\",\"\")\n .style(\"stroke-width\",\"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"{\n circles.on(\"mouseover\", highlight);\n circles.on(\"mouseout\", unhighlight);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"#### some CSS styles to position and shape the buttons and input controls","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":274,"value":"## Power Plants 3 things:","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"id":418,"value":"--------","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}