31:T56c,

U.S. Power Plants

Choose a state:

· 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":1642036410880.009,"size":4016086}] 2f:{"title":"Power Plants [2] visual filters+UI","cells":[{"id":0,"value":"# Power Plants [2] visual filters+UI\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 user interface elements and dynamic visual filters**","pinned":false,"hidden":false,"mode":"md"},{"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":29,"value":"#### get the data:","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"data = FileAttachment(\"powerplants_allUS_2010.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"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 // OK 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":278,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"## The new stuff:","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"#### add labels for the states\nHere we want to add text elements along the width to denote the state locations. This makes it a little more understandable. But we have > 5000 powerplants here, many in each state, so we need a way to set a single state label location, at an appropriate location. We could use an external dataset for this, but we have longitude locations already in this data, so let's use them.","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":"### add some UI and dynamic visual filtering\nhighlighting things within the full context of the data can be a very effective visual analysis mechanism. The data you want to concentrate on is highlighted / filtered to show, but the context of all of the rest of the data is maintained for comparison. We don't remove the rest, we show this in relation to those.","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":309,"value":"### Add a Mouseover highlight to key on one circle / plant","pinned":false,"hidden":false,"mode":"md"},{"id":314,"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":319,"value":"unhighlight = (evt) => {\n d3.select(evt.currentTarget)\n .style(\"stroke\",\"\")\n .style(\"stroke-width\",\"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"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":299,"value":"Finally, and this is added directly within the HTML literal at the very top cell, a div with some explanation is added to the interface, for the viewer to know what graphic encodings represent which data.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}