root = tree(data);
root.links()
data = ({'name': 'C Diff', 'children': [{'name': 'What', 'children': [{'name': 'what is c diff', 'count': 33100}, {'name': 'what causes c diff', 'count': 2400}, {'name': 'what does c diff smell like', 'count': 1600}, {'name': 'what is c diff infection', 'count': 1300}, {'name': 'what are the symptoms of c diff', 'count': 1000}, {'name': 'what does c diff look like', 'count': 880}, {'name': 'what is clostridium difficile', 'count': 880}, {'name': 'what is cdef', 'count': 590}, {'name': 'what is c diff and is it contagious', 'count': 590}, {'name': 'what is c diff and how do you get it', 'count': 480}]}, {'name': 'How', 'children': [{'name': 'how long is c diff contagious', 'count': 5400}, {'name': 'how do you get c diff', 'count': 3600}, {'name': 'how long does c diff last', 'count': 2400}, {'name': 'how is c diff spread', 'count': 2400}, {'name': 'how contagious is c diff', 'count': 1300}, {'name': 'how to treat c diff at home', 'count': 1300}, {'name': 'how to treat c diff', 'count': 1000}, {'name': 'how do you get cdiff', 'count': 590}, {'name': 'how do you know if you have c diff', 'count': 590}, {'name': 'how is c diff transmitted', 'count': 590}]}, {'name': 'When', 'children': [{'name': 'how to prevent c diff when taking antibiotics', 'count': 260}, {'name': 'how do you know when c diff is cured', 'count': 140}, {'name': 'what not to eat when you have c diff', 'count': 140}, {'name': 'what to eat when you have c diff', 'count': 110}, {'name': 'when is c diff no longer contagious', 'count': 90}, {'name': 'what should you not eat when you have c diff', 'count': 90}, {'name': 'when can a nurse with c diff return to work', 'count': 90}, {'name': 'when to test for c diff', 'count': 50}, {'name': 'when is c diff not contagious', 'count': 50}, {'name': 'when is c diff not contagious anymore', 'count': 50}]}, {'name': 'Why', 'children': [{'name': 'why do antibiotics cause c diff', 'count': 70}, {'name': 'why is dificid so expensive', 'count': 50}, {'name': 'why do i keep getting c diff', 'count': 30}, {'name': 'why does c diff come back', 'count': 20}, {'name': 'why does c diff recur', 'count': 20}, {'name': 'why does c diff cause diarrhea', 'count': 20}, {'name': 'why is c diff dangerous', 'count': 20}, {'name': 'why no imodium with c diff', 'count': 20}, {'name': 'why is clostridium difficile a problem in hospitals', 'count': 10}, {'name': 'why does c diff keep coming back', 'count': 10}]}, {'name': 'Where', 'children': [{'name': 'where does c diff come from', 'count': 140}, {'name': 'where is c diff found', 'count': 40}, {'name': 'where does c diff live', 'count': 20}, {'name': 'where is clostridium difficile found', 'count': 20}, {'name': 'where is c diff found in the body', 'count': 20}, {'name': 'where to buy c diff barbie', 'count': 10}, {'name': 'is c diff everywhere', 'count': 10}, {'name': 'where is c difficile found', 'count': 10}, {'name': 'where do c diff spores come from', 'count': 10}, {'name': 'where did c diff originate', 'count': 10}]}, {'name': 'Which', 'children': [{'name': 'which is not true of clostridium difficile', 'count': 50}, {'name': 'which antibiotics can cause c diff', 'count': 30}, {'name': 'which factor is commonly associated with c difficile infections', 'count': 20}, {'name': 'which is worse c diff or mrsa', 'count': 20}, {'name': 'describe the process by which the clostridium difficile reproduces', 'count': 10}, {'name': 'which antibiotics treat c diff', 'count': 10}, {'name': 'clostridium difficile typically infects which organ system', 'count': 10}, {'name': 'which probiotics are best for c diff', 'count': 10}, {'name': 'which antibiotics are less likely to cause c diff', 'count': 10}, {'name': 'which antibiotics cause c diff infection', 'count': 10}]}, {'name': 'Who', 'children': [{'name': 'who gets c diff', 'count': 30}, {'name': 'who is at risk for c diff', 'count': 30}, {'name': 'who can get c diff', 'count': 20}, {'name': 'who discovered clostridium difficile', 'count': 20}, {'name': 'who clostridium difficile', 'count': 10}, {'name': 'who treats c diff', 'count': 10}, {'name': 'who discovered c diff', 'count': 10}]}]})
chart = {
const root = tree(data);
const svg = d3.create("svg")
.style("font", "30px sans-serif");
const link = svg.append("g")
// .attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-opacity", 0.4)
// .attr("stroke", d => colorScale(d.target.data.count))//0.4)
.attr("stroke-width", 1.5)
// .attr("stroke-width", d => linkScale(d.target.data.count))
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
const node = svg.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants().reverse())
.join("g")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`);
const circle = node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 6);
const text = node.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI === !d.children ? 10 : -10)
.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)
.text(d => d.data.name)
return autosize(svg.node());
}
edges = []
data.children.forEach(d => d.children.forEach(e => edges.push(e.count)))
edges
d3.extent(edges)
colorScale = d3.scaleLinear()
.domain(d3.extent(edges))
.range(['red', 'green']);
d3.extent(edges)
opacityScale(3300)
linkScale = d3.scaleLinear()
.domain(d3.extent(edges))
.range([1, 50]);
root.links()
root.links()
tree = data => d3.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 3) / a.depth)
(d3.hierarchy(data))
width = 932
radius = width / 2
function autosize(svg) {
document.body.appendChild(svg);
const box = svg.getBBox();
document.body.removeChild(svg);
svg.setAttribute("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);
return svg;
}
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.
