This is our data from the solr engine, simple search of author="mary baker eddy", type="sermon", fl="origin, body", rows=1100
jsondata = FileAttachment("data(6).json").json()
flatData = sortedArray(jsondata);
function chart(root) {
const svg = d3.select(DOM.svg(width, height))
.style("font", "10px sans-serif")
.call(d3.zoom().scaleExtent([1, 16]).on("zoom", zoom));
var format = d3.format(",d"),
color = d3.scaleOrdinal(d3.schemeSet3)
var tooltip = d3.select("body").append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("color", "white")
.style("padding", "8px")
.style("background-color", "rgba(0, 0, 0, 0.75)")
.style("border-radius", "6px")
.style("font", "12px sans-serif")
.text("tooltip");
var bubble = d3.pack()
.size([width, height])
.padding(1.5);
function zoom() {
var k = d3.event.transform.k;
var fontsize = 12/k + 'px';
var strokewidth = 1 - k/18;
d3.selectAll('text').style('font-size', fontsize).text(function(d) { return d.data.name.substring(0, (d.r * k) / 3)});
d3.selectAll('circle').style('stroke-width', strokewidth);
node.attr("transform", d3.event.transform);
//console.log("k:" + k + " stroke:" + strokewidth);
}
bubble(root);
var node = svg.selectAll(".node")
.data(root.children)
.enter().append("g")
.attr("class", "node");
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.data.group); })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("mouseover", function(d) {
tooltip.text(d.data.name + ": " + format(d.value));
tooltip.style("visibility", "visible");
d3.select(this).style("stroke", "black");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function() {
d3.select(this).style("stroke", "none");
return tooltip.style("visibility", "hidden");
})
.on('mousedown', passThru)
.on('mouseup', passThru)
.on('dblclick', passThru);
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
//.style("font-family", "sans-serif")
//.style("font-size", "10px")
.style("pointer-events", "none")
.attr("transform", function(d) { return textTransform(d);})
//.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";})
.text(function(d) {
return d.data.name.substring(0, d.r / 3);
});
function textTransform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
// pass mouse event up to zoomRect for zooming and panning
function passThru(d) {
var e = d3.event;
var prev = this.style.pointerEvents;
this.style.pointerEvents = 'none';
var el = document.elementFromPoint(d3.event.x, d3.event.y);
var e2 = document.createEvent('MouseEvent');
e2.initMouseEvent(e.type,e.bubbles,e.cancelable,e.view, e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);
el.dispatchEvent(e2);
this.style.pointerEvents = prev;
}
return svg.node();
}
height = 600;
FileAttachment("data(5)@1.json").json()
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.
