Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
links = FileAttachment("lawsuits.csv").csv()
links
Type Table, then Shift-Enter. Ctrl-space for more options.
import {nodesFromLinks} with {nodes} from "@emfielduva/dvlib_layout"
nodes = nodesFromLinks(links)
network = {
// first add the locations to the nodes list, from the locations lookup table. This assumes they are not already in there.
// if the links file already has locations, this step is not needed.
nodes.forEach(d => {
d.lat = locations[d.id].lat;
d.lon = locations[d.id].lon;
});
// build the dots. Here they are mapped onto the us map using the projection.
// if this were not on a map, you would not use the projection and only tell it the x and y field from the data to use.
let nodeDots = mapViz.select("#nodes").selectAll(".node").data(nodes).join("circle")
.attr("r",5)
.attr("cx", d=>projection([d.lon,d.lat])[0])
.attr("cy", d=>projection([d.lon,d.lat])[1])
.classed("node",true);
// and now the link lines or curves between source and destination.
let linkLines = mapViz.select("#nodes").selectAll(".link").data(links).join("path")
.classed("link",true)
.attr("d", d=> {
let sourceNode = nodes.find(n => n.id == d.source);
let targetNode = nodes.find(n => n.id == d.target);
let sourceLoc = projection([sourceNode.lon,sourceNode.lat]);
let targetLoc = projection([targetNode.lon,targetNode.lat]);
let sourceXY = sourceLoc[0] + " " + sourceLoc[1];
let targetXY = targetLoc[0] + " " + targetLoc[1];
// There are two options for the links:
// straight lines between nodes.
//let pathString = "M" + sourceXY + " L" + targetXY; // Uncomment this line to use this
// or arcs between nodes
let arcMultiplier = 1.5; // this scale factor flattens or rounds the arc, and could calculate from a data value
var dx = sourceLoc[1] - sourceLoc[0],
dy = targetLoc[1] - targetLoc[0],
dr = Math.sqrt(dx * dx + dy * dy) * arcMultiplier;
let pathString = "M" + sourceLoc[0] + "," + sourceLoc[1] + "A" + dr + "," + dr + " 0 0,1 " + targetLoc[0] + "," + targetLoc[1];
return pathString;
})
.attr("marker-end", "url(#arrow)") // this arrow can be included or commented out.
.style("stroke-width", d => Math.random()*3 + "px") // instead of random in the example, this could be from a data field.
.style("stroke", "#aa5") // here one color, but can also be be based on data.
.attr("id", d=> "link_" + d.source + "-" +d.target);
let nodeText = mapViz.select("#nodes").selectAll(".nodeText").data(nodes).join("text")
.classed("nodeText",true)
.text(d => d["id"])
.attr("dx", 8)
.attr("transform", d => {
let loc = projection([d.lon,d.lat])
return "translate(" + loc[0] + "," + loc[1] +")";
})
let linkText = mapViz.select("#nodes").selectAll(".linkText").data(links).join("text")
.classed("linkText",true)
.attr("dy", -5)
.append("textPath")
.text(d => d["type"])
.attr("xlink:href", d => "#link_" + d.source + "-" +d.target) // attach it to the id of the curve
.style("text-anchor", "middle")
.attr("startOffset", "50%");
return [nodeDots,linkLines,nodeText,linkText];
}
projection = d3.geoAlbers()
import {getMapData, drawMapLayer} with {projection} from "@emfielduva/dvlib_maps"
usstates = getMapData("us_states20m")
mapViz = d3.select(svg)
mapLayers = {
let mapLayers = [];
mapLayers["usstates"] = drawMapLayer(mapViz,"usstates",usstates.features,"properties.NAME");
return mapLayers;
}
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.