Published
Edited
Apr 26, 2021
1 fork
d3 = require("d3@5")
cheeseData = FileAttachment("yum@2.json").json()
// Get cheese names as array
cheeseNames = cheeseData.nodes.map(function(d){return d.name});
cheeseData["nodes"]
idToNode =
{
let dict = {};
cheeseData.nodes.forEach(function(n) {
dict[n.id] = n;
});
return dict;
}
idToTargetNodes =
{
let dict = {};
cheeseData.nodes.forEach(function (n) {
dict[n.id] = [];
cheeseData.links.forEach(function (l) {
if (l.source === n.id) {
dict[n.id].push(l.target);
}
});
});
return dict;
}
cheeseData["links"]
margin = ({top: 20, bottom: 20, left: 30, right: 30});
height = 500 - margin.top - margin.bottom;
width = 3000
xScale = d3.scalePoint()
.domain(cheeseNames)
.range([0,width])
yScale = d3.scalePoint()
.domain(cheeseNames)
.range([0,height])
import {swatches} from "@d3/color-legend"
cheese_origin= d3.set(cheeseData["nodes"], d => d.origin);
color_origin = {
return d3.scaleOrdinal(d3.schemeSet3).domain(cheese_origin.values());
}
justNodesAndLabels2 = {
const radius = 10
// create a container for the svg
const container = d3.select(DOM.svg(width+margin.left+margin.right,
height+margin.top+margin.bottom))
const arcGroup = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
const imageGroup = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// create nodes
const nodes = arcGroup.selectAll("nodes")
.data(cheeseData.nodes)
.enter().append("circle")
.attr("cx", margin.left+120)
.attr("cy", d => yScale(d.name))
.attr("r", radius)
.attr("fill", d=> color_origin(d.origin))
.attr("id", d => d.id)
// create node labels
const nodeLabels = arcGroup.selectAll("nodeLabels")
.data(cheeseData.nodes)
.enter().append("text")
.attr("x",margin.left+100)
.attr("y", d => yScale(d.name))
.attr("fill","black")
.style("text-anchor","end")
.style("alignment-baseline","central")
.text(d => d.name)
// Build SVG path element
function buildArc(d) {
let start = yScale(idToNode[d.source].name);
let end = yScale(idToNode[d.target].name);
const arcPath = ['M', margin.left+120, start, 'A', Math.abs(start - end)/2, ',', Math.abs(start-end)/2, 0,0,",",
start < end ? 1: 0, margin.left+120, end].join(' ');
return arcPath;
}
// create the arcs
let arcs = arcGroup.selectAll("arcs")
.data(cheeseData.links)
.enter().append("path")
.style("fill", "none")
.attr("stroke", "gray")
.attr("stroke-dasharray", 2)
.attr("d", d => buildArc(d))
// Highlight nodes at mouseover
nodes.on('mouseover', function(d) {
let thisNode = this;
// Highlight only the selected node
d3.select(this).style("fill", "darkblue");
// Show image
imageGroup.append('image')
.attr("xlink:href", d.picture)
.attr("width", 300 )
.attr("length", 300)
.attr("x", margin.left + 400)
.attr("y", 100)
.attr("id", "image" + d.id)
// Show name of cheese
imageGroup.append('text')
.text(d.name)
.attr("fill", "black")
.style("text-anchor", "start")
.style("font-size", "22px")
.attr("x", margin.left + 400)
.attr("y", 50)
.attr("id", "text" + d.id)
.style("font-weight","bold")
// Show characterstics of cheese
imageGroup.append('text')
.text("Characteristics: " + d.characteristics)
.attr("fill", "black")
.style("text-anchor", "start")
.style("font-size", "15px")
.attr("x", margin.left + 400)
.attr("y", 75)
.attr("id", "ing" + d.id)
// Highlight arcs
arcs
.style('stroke', function (arcd) {
return arcd.source == d.id || arcd.target == d.id ? 'darkblue' : 'gray';})
.style('stroke-width', function (arcd) {
return arcd.source == d.id || arcd.target == d.id ? 3 : 1;})
.attr("stroke-dasharray", function(arcd) {
return arcd.source === d.id ? this.getTotalLength() : 2;})
.attr("stroke-dashoffset", function(arcd)
{ return arcd.source === d.id ? this.getTotalLength() : 0;})
.transition()
.duration(3000)
.attr("stroke-dashoffset", 0)
.on("end", function(d, i) {
if (i === 0)
nodes
.filter(function(noded) {
return idToTargetNodes[thisNode.id].includes(noded.id) || +thisNode.id === +noded.id})
.style("fill", "darkblue")
});
// Mouseout
nodes.on('mouseout', function (d) {
nodes.style("fill", d=> color_origin(d.origin));
arcs.style('stroke', 'gray');
arcs.style('stroke-width', 1);
nodeLabels.style("fill", "darkgray");
nodeLabels.style("font-weight", "normal")
const imageToRemove = "#" + "image" + d.id
d3.select(imageToRemove).remove();
const textToRemove = "#" + "text" + d.id
d3.select(textToRemove).remove();
const ingToRemove = "#" + "ing" + d.id
d3.select(ingToRemove).remove();
});
});
return container.node();
}
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.