Public
Edited
May 8, 2022
Fork of Clusters
6 forks
Importers
Insert cell
Insert cell
Insert cell
Insert cell
import {powerplants_2019} from "@emfielduva/dvlib_sampledata"
Insert cell
Insert cell
slice = d3.shuffle(powerplants_2019).slice(0,2000) // change the right number here to show more or fewer of the 11000+ powerplants
Insert cell
Insert cell
clElem = d3.select(svgContainer).select("#layer1")
Insert cell
clusters = dvCluster(clElem,slice,1000,800,"Plant annual net generation (MWh)",options)
Insert cell
options = ({
"classField": "Plant primary fuel generation category", // to set their class/color
"dotScaleFactor": 0.005,
"strength": -0.5,
"alphaTarget": 0.09
})
Insert cell
Insert cell
Insert cell
fociOneCenter = [{x: 500, y: 400}]
Insert cell
fociFuels = ({
"OIL":{x: 200, y: 200},"GAS":{x: 400, y: 200},"HYDRO":{x: 600, y: 200},"COAL":{x: 800, y: 200},
"NUCLEAR":{x: 200, y: 400},"WIND":{x: 400, y: 400},"SOLAR":{x: 600, y: 400},"BIOMASS":{x: 800, y: 400},
"GEOTHERMAL":{x: 200, y: 600},"OFSL":{x: 400, y: 600},"OTHF":{x: 600, y: 600},"":{x: 800, y: 600}
})
Insert cell
fociStates = ({
"AK":{x: 100, y: 100},"AL":{x: 300, y: 100},"AR":{x: 500, y: 100},"AZ":{x: 700, y: 100},"CA":{x: 900, y: 100},
"CO":{x: 100, y: 200},"CT":{x: 300, y: 200},"DC":{x: 500, y: 200},"DE":{x: 700, y: 200},"FL":{x: 900, y: 200},
"GA":{x: 100, y: 300},"HI":{x: 300, y: 300},"IA":{x: 500, y: 300},"ID":{x: 700, y: 300},"IL":{x: 900, y: 300},
"IN":{x: 100, y: 400},"KS":{x: 300, y: 400},"KY":{x: 500, y: 400},"LA":{x: 700, y: 400},"MA":{x: 900, y: 400},
"MD":{x: 100, y: 500},"ME":{x: 300, y: 500},"MI":{x: 500, y: 500},"MN":{x: 700, y: 500},"MO":{x: 900, y: 500},
"MS":{x: 100, y: 600},"MT":{x: 300, y: 600},"NC":{x: 500, y: 600},"ND":{x: 700, y: 600},"NE":{x: 900, y: 600},
"NH":{x: 100, y: 700},"NJ":{x: 300, y: 700},"NM":{x: 500, y: 700},"NV":{x: 700, y: 700},"NY":{x: 900, y: 700},
"OH":{x: 100, y: 800},"OK":{x: 300, y: 800},"OR":{x: 500, y: 800},"PA":{x: 700, y: 800},"RI":{x: 900, y: 800},
"SC":{x: 100, y: 900},"SD":{x: 300, y: 900},"TN":{x: 500, y: 900},"TX":{x: 700, y: 900},"UT":{x: 900, y: 900},
"VA":{x: 100, y: 1000},"VT":{x: 300, y: 1000},"WA":{x: 500, y: 1000},"WI":{x: 700, y: 1000},"WV":{x: 900, y: 1000},
"WY":{x: 100, y: 1100},"EX1":{x: 300, y: 1100},"EX2":{x: 500, y: 1100},"EX3":{x: 700, y: 1100},"":{x: 900, y: 1100}
})
Insert cell
Insert cell
Insert cell
labelLayer = clElem.append("g").attr("id","labels")
Insert cell
Insert cell
Insert cell
{
// register event listeners
const btns = d3.select(svgContainer).select("#controls");
btns.select("#btn_all").on("click", () => {dvClusterMoveNodes(fociOneCenter); dvClusterFociLabels(labelLayer,fociOneCenter)});
btns.select("#btn_fuel").on("click", () => {dvClusterMoveNodes(fociFuels,"Plant primary fuel generation category"); dvClusterFociLabels(labelLayer,fociFuels,{offsetY:50})});
btns.select("#btn_state").on("click", () => {dvClusterMoveNodes(fociStates,"Plant state abbreviation"); dvClusterFociLabels(labelLayer,fociStates,{offsetY:50})});
}
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more