viewof metro = DOM.select(z.getCol("Metro area", opt));
myChart={
const div = html`<div style='max-width: 900px; padding: 0px; margin: 0px;'></div>`;
const svg = d3.select(div).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const mySankey = d3.sankey()
.nodeWidth(100)
.nodePadding(110)
//.nodeAlign(d3.sankeyLeft)
.extent([[margin.left, margin.top], [width - margin.left, height - margin.top]]);
const graph = {
//nodes: d3.range(3).map(Object),
nodes: [{"name":"Studied in "+optData["Metro area"],"x0":50,"x1":100},
{"name": "Other MSAs"},
{"name": "OPTs Remaining"}],
//{"name": "3"}],
links: [
{source: 0, target: 2, value: (+optData["Number who attended school in area"] - +optData["Number who left area for work"])},
{source: 0, target: 1, value: +optData["Number who left area for work"]},
{source: 1, target: 2, value: +optData["Number who entered area to work"]},
// {source: 1, target: 3, value: .1}
]
}
colorScale.domain(graph.nodes);
//console.log("graph is ...",graph);
mySankey(graph);
const lines = svg.append("g")
.attr("fill", "none")
.attr("class", "links")
.attr("stroke-opacity", 0.5)
.selectAll("path")
.data(graph.links)
.enter().append("path")
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke-width", d => Math.max(1, d.width))
.style("stroke", "#9AD1DF");
const nodes1 = svg.append("g")
.attr("class", "nodes")
.selectAll("rect")
.data(graph.nodes)
.enter().append("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.style("fill", function(d) {
if (d.index == 0) return "#817E9F"
else if (d.index == 1) return "#BA1200"
else return "#274C77";}
);
const text = svg.append("g")
.attr("class", "texts")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.attr("x", d => d.x0 + 5)
.attr("y", d => d.y0 + (d.y1 - d.y0)/2)
.attr("dy", ".35em")
.text(d => d.name );
return div
}
test = {
const mySankey = d3.sankey()
.nodeWidth(100)
.nodePadding(110)
//.nodeAlign(d3.sankeyLeft)
.extent([[margin.left, margin.top], [width - margin.left, height - margin.top]]);
const graph = {
//nodes: d3.range(3).map(Object),
nodes: [{"name":"Studied in "+optData["Metro area"],"x0":50,"x1":100},
{"name": "Other MSAs"},
{"name": "OPTs Remaining"}],
//{"name": "3"}],
links: [
{source: 0, target: 2, value: (+optData["Number who attended school in area"] - +optData["Number who left area for work"])},
{source: 0, target: 1, value: +optData["Number who left area for work"]},
{source: 1, target: 2, value: +optData["Number who entered area to work"]},
// {source: 1, target: 3, value: .1}
]
}
return mySankey(graph)
}
z.sum(z.getCol("value",test.nodes[1].targetLinks))
const graph1 = {
nodes: d3.range(3).map(Object),
links: [
{source: 0, target: 2, value: +optData["Number who left area for work"]},
{source: 0, target: 1, value: +optData["Number who attended school in area"] - +optData["Number who left area for work"]},
{source: 1, target: 2, value: +optData["Number who entered area for work"]}
]
}
const {nodes, links} = mySankey(graph);
nodes.forEach(function(node) {
if (node.name == "Other MSAs") {
node.y1 = height;
node.y0 = d3.max([
z.sum(z.getCol("value", node.sourceLinks)),
z.sum(z.getCol("value", node.targetLinks))
]);
}
});
+optData["Number who attended school in area"] - +optData["Number who left area for work"]
optData = z.filter(r => r["Metro area"] == metro, opt)[0];
z = require("zebras")
import {opt} from "@apaar/opt-msas"
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.
