Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
dvlib_layout OverviewLine graphsArea graphsSparklineDonut or PiePixel MatrixTreemapPack CirclesSunburstDendogramClustersWord CloudClusters - dynamic movementPack Circles - dynamic movementTreemap - dynamic movementNetwork Graph - nodes and edgesCombining Layouts - Donuts on GridMapRadarRings - circle with hole maskHeatmapPack Circles with Donuts insideUS map with Powerplant Pack CirclesRing plot on Map - Trust Gap?Force Directed clustering along a pathFixed location Network GraphRadial bar / lineFitness ringsCurves / distance color gradientSVG distance along path / curveFilled Arc Polygon BandsConnecting multiple visuals in one spaceSankey / Alluvial / Parallel Sets
Beeswarm - Force Diagram
import {powerplants_2019} from "@emfielduva/dvlib_sampledata"
slice = d3.shuffle(powerplants_2019).slice(0,2000) // change the right number here to show more or fewer of the 11000+ powerplants
bsElem = d3.select(svgContainer).select("#layer1")
beeswarm = dvBeeswarmForce(bsElem,slice,1000,800,"Plant annual net generation (MWh)",options)
scaleAxis = d3.scaleLinear().domain([0,22000000]).range([100,1000]) // domain estimated from data extents
options = ({
classField: "Plant primary fuel generation category", // to set their class/color
strength: -0.2,
alphaTarget: 0.09,
//direction: "vertical",
axisField: "Plant annual CO2 equivalent emissions (tons)",
axisScaleFunction: scaleAxis,
//fociPositions: {COAL:50, OIL:100, HYDRO:150, NUCLEAR:200, GAS:250, GEOTHERMAL:300, WIND:350, SOLAR:400, BIOMASS:450, OTFL:500, OTHF:550, OFSL:600, "": 650},
//fociField: "Plant primary fuel generation category"
})
fociOneCenter = ({default: 400})
fociFuels = ({COAL:50, OIL:100, HYDRO:150, NUCLEAR:200, GAS:250, GEOTHERMAL:300, WIND:350, SOLAR:400, BIOMASS:450, OTFL:500, OTHF:550, OFSL:600, "": 650})
{
// register event listeners
const btns = d3.select(svgContainer).select("#controls");
btns.select("#btn_all").on("click", () => dvBeeswarmMoveNodes(fociOneCenter,'',options.axisField,options.axisScaleFunction));
btns.select("#btn_fuel").on("click", () => dvBeeswarmMoveNodes(fociFuels,"Plant primary fuel generation category",options.axisField,options.axisScaleFunction));
}
import {dvBeeswarmForce, dvBeeswarmMoveNodes} from "@emfielduva/dvlib_layout"
// import {rFromArea, toNum} from "@emfielduva/dvlib"
// mutable foci = []
// nodes = []
// force = d3.forceSimulation(nodes)
// function dvBeeswarmForce(elem,data,width,height,sizeField,options) {
// nodes.length = 0; // clear any existing node data (not node, the svg elements.) // do I want this??
// // options: fociField, strength, kFactor, collisionFactor, alphaTarget, alphaMin, maxRadius, dotScaleFactor, colorSet
// if (typeof(options) === "undefined") {var options = {}}
// if (typeof(options.strength) === "undefined") {options.strength = -1}
// if (typeof(options.kFactor) === "undefined") {options.kFactor = 0.1}
// if (typeof(options.collisionFactor) === "undefined") {options.collisionFactor = 1.1}
// if (typeof(options.alphaTarget) === "undefined") {options.alphaTarget = 0.1}
// if (typeof(options.alphaMin) === "undefined") {options.alphaMin = 0.1}
// if (options.alphaTarget > options.alphaMin) {console.log("Warning: alphaTarget > alphaMin. Simulation will run forever.")}
// if (typeof(options.maxRadius) === "undefined" || options.maxRadius == '') {options.maxRadius = 20}
// if (typeof(options.dotScaleFactor) === "undefined" || options.dotScaleFactor == '') {options.dotScaleFactor = 0.005}
// // options.axisField
// // options.axisScaleFunction
// // create axisScaleFunction if it is not passed in through options.
// if (typeof(options.axisScaleFunction) === "undefined") {
// let scaleField;
// if (typeof(options.axisField) === "undefined") {
// options.axisScaleFunction = d3.scaleLinear().domain([0,1000]).range([0,width]);
// } else {
// if (typeof(options.axisField) === "string") {scaleField = options.axisField}
// options.axisScaleFunction = d3.scaleLinear().domain(d3.extent(data, d => d[scaleField])).range([0,width]);
// }
// }
// // set positions for swarm lines. could be either horizontal or vertical. default is horizontal at middle.
// if (typeof(options.direction) === "undefined") {options.direction = "horizontal"}
// if (typeof(options.fociPositions) === "undefined") {
// if (options.direction == "horizontal" || options.direction == "h") {options.fociPositions = {default: height/2}}
// else if (options.direction == "vertical" || options.direction == "v") {options.fociPositions = {default: width/2}}
// }
// mutable foci = options.fociPositions; // default or passed in
// // Setup the Force Simulation (the algorithm that does this)
// force
// .force('nbody', d3.forceManyBody().strength(options.strength))
// .force('foci', alpha => {
// for (var i = 0, n = nodes.length, o, k = alpha * options.kFactor; i < n; ++i) {
// o = nodes[i];
// if (typeof(options.axisField) !== "undefined" && options.axisField != "") {
// if (options.direction == "horizontal" || options.direction == "h") {
// o.vx += (o.axisPos - o.x) * k;
// o.vy += (mutable foci[o.id] - o.y) * k;
// } else if (options.direction == "vertical" || options.direction == "v") {
// o.vx += (mutable foci[o.id] - o.x) * k;
// o.vy += (o.axisPos - o.y) * k;
// }
// } else {
// o.vx += (width/2 - o.x) * k;
// o.vy += (height/2 - o.y) * k;
// }
// }
// })
// .force('collision', d3.forceCollide(function (d) {return options.collisionFactor*d.r;}))
// .alphaTarget(options.alphaTarget)
// .alphaMin(options.alphaMin)
// .on("tick", tick);
// // the tick is what updates their position.
// function tick(e) {
// node.attr("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; });
// }
// // this creates the dots
// function addDots(dot) {
// let fociID;
// let axisPosition;
// var radius = rFromArea(dot[sizeField]) * options.dotScaleFactor;
// if (isFinite(sizeField)) {radius = sizeField};
// if (radius < 0 || isNaN(radius)) {radius = 1;}
// if (typeof(options.fociField) !== "undefined") {fociID = dot[options.fociField]} else {fociID = "default";}
// if (typeof(options.axisField) !== "undefined") {axisPosition = options.axisScaleFunction(toNum(dot[options.axisField]))} else {axisPosition = options.axisScaleFunction(0);}
// nodes.push({
// id: fociID,
// axisPos: axisPosition,
// x: 0, // could also set starting position to center or other input?
// y: 0,
// r: radius,
// data: dot
// });
// }
// function drawNodes() {
// node = svgElem.selectAll("circle").data(nodes);
// node = node.join("circle")
// .attr("class", function(d) { return "node" + options.classField ? d.data[options.classField] : ""})
// .attr("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; })
// .attr("r", function(d) {return d.r})
// .style("fill", function(d) {return options.colorSet ? options.colorSet[d.id] : ""});
// }
// // draw it.
// let svgElem = elem;
// let node = svgElem.selectAll(".node");
// data.forEach(function(d){addDots(d)}); // adds each time we run. would rather join.
// force.nodes(nodes);
// drawNodes();
// return node;
// }
// function dvBeeswarmMoveNodes(fociPositions,fociField,axisField,axisScaleFunction,direction) {
// // This makes the dots move.
// // The id setting being changed here maps to a new foci point.
// // and by changing the id, the force simulation knows to move it.
// if (typeof(direction) === "undefined") {direction = "horizontal"}
// if (typeof(axisScaleFunction) === "undefined") {axisScaleFunction = d3.scaleLinear().domain([0,1000]).range([0,1000])} //default it
// if (typeof(fociPositions) !== "undefined" && fociPositions != "") {
// mutable foci = fociPositions;
// if (typeof(fociField) !== "undefined" && fociField != "") {
// nodes.forEach(function(n) {
// n.id = n.data[fociField];
// n.axisPos = axisScaleFunction(toNum(n.data[axisField]));
// });
// } else {
// nodes.forEach(function(n) {
// n.id = "default";
// n.axisPos = axisScaleFunction(toNum(n.data[axisField]));
// });
// }
// force.alpha(1);
// force.restart();
// } else {
// console.log("No foci provided.");
// }
// }
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.