Published
Edited
May 7, 2021
2 forks
1 star
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2 -50, -height / 2 -80, width+100, height+200])
.attr("font-size", 15)
.attr("font-family", "sans-serif");
// .style("width", "100%")
// .style("height", "auto");

const chords = chord(data);
const group = svg.append("g")
.selectAll("g")
.data(chords.groups)
.enter().append("g");
const groupPath = group.append("path")
.attr("class", "group")
.attr("fill", d => color(d.index))
.attr("stroke", d => d3.rgb(color(d.index)).darker())
.attr("d", arc)
.attr("id", function(d, i) { return "group" + d.index; }) //add id
.on("mouseover", fade(.1))
.on("mouseout", fade(opacityDefault));
// group.append("text")
// .attr("x", 5)
// .attr("dy", 15)
// .append("textPath")
// .attr("xlink:href", function(d) { return "#group" + d.index; })
// .text(function(chords, i){return names[i];})
// .style("fill", "black");
// const g = svg.append('g')
// .attr('transform', `translate(${width / 2}, ${height / 2})`)
// .datum(chord(data))
// group.append('g').append('text')
// .text(d => names[d.index] === 'dummy' ? '' : names[d.index])
// .attr('transform', d => `translate(${arc.centroid(d)})`)
// .attr('text-anchor', d =>
// Math.sin((d.endAngle + d.startAngle) / 2) > 0 ? 'start' : 'end'
// )
// .attr('dominant-baseline', d =>
// Math.cos((d.endAngle + d.startAngle) / 2) > 0 ? 'initial' : 'hanging'
// )
group.append("text")
.each(d => (d.angle = (d.startAngle + d.endAngle) / 2))
.attr("dy", "0.35em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI - 90)})
translate(${outerRadius + 5})
${d.angle > Math.PI ? "rotate(180)" : ""}
`)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
.text(d => names[d.index]);


const ribbons = svg.append("g")
.attr("fill-opacity", 0.67)
.selectAll("path")
.data(chords)
.enter().append("path")
.attr("class", "ribbons")
.attr("d", ribbon)
.attr("fill", d => color(d.target.index))
.attr("stroke", d => d3.rgb(color(d.target.index)).darker())
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", opacityDefault);
tooltip.html(d.source.value + " reaches in " + names[d.source.index] + " are " + names[d.target.index])
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
// fade other ribbons
ribbons
.filter(dd => dd !== d)
.transition()
.style('opacity', 0.1);
// fade other groups
groupPath
.filter((dd,i) => dd.index !== d.source.index && dd.index !== d.target.index)
.transition()
.style("opacity", 0.1);
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
// unfade ribbons
ribbons
.transition()
.style('opacity', opacityDefault);
// unfade groups
groupPath
.transition()
.style("opacity", opacityDefault);
});

//Returns an event handler for fading a given chord group.
function fade(opacity) {
return function(d,i) {
ribbons
.filter(function(dd) { return dd.source.index != d.index && dd.target.index != d.index; })
.transition()
.style("opacity", opacity);
// fade all other groups
groupPath
.filter(function(dd) { return dd.index != d.index; })
.transition()
.style("opacity", opacity);
};
}
return svg.node();
}
Insert cell


data = [
[0, 0, 0, 0, 0, 0, 131, 35,66,31,15],
[0, 0, 0, 0, 0, 0,40,32,31,10,1],
[0, 0, 0, 0, 0, 0,19,37,5,14,65],
[0, 0, 0, 0, 0, 0, 35,14,22,34,6],
[0, 0, 0, 0, 0, 0, 20,31,10,5,18 ],
[0, 0, 0, 0, 0, 0, 32,7,11,23,2],
[ 131, 40, 19, 35, 20, 32, 0,0,0,0,0],
[35, 32, 37, 14, 31, 7, 0,0,0,0,0] ,
[ 66, 31, 5, 22, 10, 11, 0,0,0,0,0] ,
[ 31, 10, 14, 34, 5, 23, 0,0,0,0,0] ,
[ 15, 1, 65, 6, 18, 2, 0, 0,0,0,0,0]
]

// very popular, popular, not that popular, not popular (number of views)
// category1, category2, category3, category4, category5, category6, others

Insert cell
formatValue = d3.formatPrefix(",.0", 1e3)
Insert cell
opacityDefault = 0.8
Insert cell
chord = d3.chord()
.padAngle(0.05)
.sortSubgroups(d3.descending)
Insert cell
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
Insert cell
ribbon = d3.ribbon()
.radius(innerRadius)
Insert cell
tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("width","text.length + 'px'");
Insert cell
// this is the original color setting
// color = d3.scaleOrdinal()
// .domain(d3.range(names.length))
// .range(["#828684", "#ded2c2", "#ebb48c", "#819582", "#d08a55", "#c2c9c9", "#ABA6BF", "#ecb7bf", "#583E2E", "#F1E0D6"])

color = d3.scaleOrdinal()
.domain(d3.range(names.length))
.range(["#016938", "#fddd10", "#f2c439", "#426366","#113d53", "#616264", "#5d9942", "#f09c9d", "#d18729", "#fddd10", "#6ba2a5"])

Insert cell
outerRadius = Math.min(width, height) * 0.5 - 30
Insert cell
innerRadius = outerRadius - 20
Insert cell
height = Math.min(640, width)
Insert cell
// names = ['OCCC', 'OAACC', 'OLCC', 'OVCC', 'EOCDC','Unity', "Salon", "Auto", "Restaurant", "Grocery","Prof. Services"]
Insert cell
names = ['OLCC', 'OVCC', 'OAACC','Unity', 'EOCDC','OCCC', "Restaurant","Prof. Services", "Salon", "Consumer Retail","Other Services"]
Insert cell
html`<style>
svg
{
font-family: sanserif;
font-size: 10;
}
.tooltip {
position: absolute;
pointer-events: none;
height: 20px;
padding: 8px;
border-radius: 8px;
background-color: white;
font-size: .8em;
}
</style>`
// Arial, Verdana,
Insert cell
_ = require('lodash')
Insert cell
d3 = require("d3@5")
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