chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("font-size", 10)
.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("path")
// .attr("fill", d => color(d.index))
// .attr("stroke", d => d3.rgb(color(d.index)).darker())
// .attr("id", function(d, i) { return "group" + d.index; }) //add id here
// .attr("d", arc);
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");
// group.append("text")
// .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })
// .attr("dy", "100")
// .attr("transform", d => `
// rotate(${(d.angle * 180 / Math.PI - 90)})
// translate(${innerRadius + 26})
// ${d.angle > Math.PI ? "rotate(180)" : ""}`)
// .attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
// .text(d => names[d.index]);
// below is commented out by me - for hiding tick marks
// const groupTick = group.append("g")
// .selectAll("g")
// .data(d => groupTicks(d, 1e3))
// .join("g")
// .attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90}) translate(${outerRadius},0)`);
// groupTick.append("line")
// .attr("stroke", "#000")
// .attr("x2", 6);
// groupTick
// .filter(d => d.value % 5e3 === 0)
// .append("text")
// .attr("x", 8)
// .attr("dy", ".35em")
// .attr("transform", d => d.angle > Math.PI ? "rotate(180) translate(-16)" : null)
// .attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
// .text(d => formatValue(d.value));
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();
}
// this is the original data but I commented out to see if things would work
// data = [[0, 0, 0, 0, 0, 0, 29757, 2407, 3278, 6403],
// [0, 0, 0, 0, 0, 0, 15191, 2513, 3234, 5381],
// [0, 0, 0, 0, 0, 0, 46856, 9948, 16428, 32172],
// [0, 0, 0, 0, 0, 0, 8030, 3047, 6271, 17146],
// [0, 0, 0, 0, 0, 0, 6906, 1326, 2294, 8127],
// [0, 0, 0, 0, 0, 0, 9141, 1509, 2709, 6400],
// [29757, 15191, 46856, 8030, 6906, 9141, 0, 0, 0, 0],
// [2407, 2513, 9948, 3047, 1326, 1509, 0, 0, 0, 0],
// [3278, 3234, 16428, 6271, 2294, 2709, 0, 0, 0, 0],
// [6403, 5381, 32172, 17146, 8127, 6400, 0, 0, 0, 0]]
// // very popular, popular, not that popular, not popular (number of views)
// // category1, category2, category3, category4, category5, category6, others
data = [
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 11, 0, 32, 18, 1, 7, 0, 1, 0, 0, 0, 1, 20, 0, 1, 0, 14],
[0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 1, 4, 0, 17, 0, 0, 13, 7, 34, 0, 0, 2, 0, 0, 2, 0, 0, 75],
[0, 0, 0, 0, 0, 0, 0, 0, 20, 8, 0, 0, 67, 140, 17, 30, 35, 10, 9, 0, 4, 2, 1, 3, 3, 3, 3, 9],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 24, 22, 64, 13, 0, 12, 4, 42, 0, 3, 0, 6, 12, 0, 0, 0, 2],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 4, 8, 2, 10, 0, 223, 3, 0, 8, 4, 16, 1, 2, 3, 0, 1, 0, 0, 0, 33],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 8, 30, 3, 39, 6, 4, 32, 2, 0, 0, 0, 6, 4, 1, 0, 0, 0, 1],
[ 1 ,3 ,20 , 0 ,0 , 4 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 1 , 2 , 8 , 4 , 0 , 8 , 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 1 , 1 , 0 , 0 , 0 , 2 , 8, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 11 , 4 , 0 , 24 , 0 , 10 , 30, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 0 , 0 ,67 , 22 , 0 ,0 , 3, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 32 , 17 ,140 , 64, 0, 223, 39, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 18 , 0 ,17 ,13 ,0 , 3 , 6, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 1 , 0 ,30 , 0 ,0, 0 ,4, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 7 ,13 ,35 , 12 ,0 , 8 ,32, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 0 , 7 ,10 , 4 ,0 , 4 , 2, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 1 ,34 ,9 , 42 ,0 ,16 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 0 , 0 ,0 , 0 ,0 , 1 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 0 , 0 ,4 , 3 ,0 , 2 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 0 , 2 ,2 , 0 ,0 , 3 , 6, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 1 , 0 ,1 , 6 ,0 , 0 , 4, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 20 , 0 ,3 , 12 ,0 , 1 , 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 0 ,2 ,3 , 0 ,0 , 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 1 ,0 ,3 , 0 , 0 , 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 0 ,0 , 3 , 0 , 0 , 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0],
[ 14 ,75 , 9 , 2 , 0 ,33 , 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0, 0, 0, 0, 0,0,0,0,0]
]
// very popular, popular, not that popular, not popular (number of views)
// category1, category2, category3, category4, category5, category6, others
// below is commented out by me - for hiding tick marks
// function groupTicks(d, step) {
// const k = (d.endAngle - d.startAngle) / d.value;
// return d3.range(0, d.value, step).map(value => {
// return {value: value, angle: value * k + d.startAngle};
// });
// }
formatValue = d3.formatPrefix(",.0", 1e3)
opacityDefault = 0.8
chord = d3.chord()
.padAngle(0.05)
.sortSubgroups(d3.descending)
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
ribbon = d3.ribbon()
.radius(innerRadius)
tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("width","text.length + 'px'");
// 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(["#828684", "#ded2c2", "#ebb48c", "#819582", "#d08a55", "#c2c9c9", "#ABA6BF", "#ecb7bf", "#583E2E", "#F1E0D6", "#37392E", "#19647E","#28AFB0","#DDCECD","#EEE5E5","#9DC7C8","#748386","#706563","#6A3937","#3B0D11","#DFC2F2","#CFB3CD","#888098","#344055","#266DD3","#fc0345","#f403fc", "#f403fc"])
outerRadius = Math.min(width, height) * 0.5 - 30
innerRadius = outerRadius - 20
height = Math.min(640, width)
names = ['OCCC', 'OAACC', 'OLCC', 'OVCC', 'OCCUR', 'EOCDC','Unity Council','Government/ Nonprofit/ Education', "Construction", "Finance/ Insurance", "Barber/ Beauty/ Salon/ Spa", "Automotive Services/ Sales", "Restaurant/ Food Services", "Grocery/ Market", "Floral/ Landscaping","Consumer Retail Products","Entertainment/ Athletics","Professional Services","Computer/ Phone/ IT","Printing","Liquor","Jewelry","Medical/ Dental","Hotels","Dry Cleaning/ Laundry Services","Airline/ Aircraft","Other Services"]
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,
_ = require('lodash')
d3 = require("d3@5")
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.
