chart = {
const elem = DOM.element('div');
elem.id = "chart-container";
let divModalOverlay = html`<div class="modal-overlay" id="my-modal-overlay"></div>`;
elem.appendChild(divModalOverlay);
divModalOverlay.classList.toggle("closed");
let divModal = html`<div class="modal" id="my-modal">
<button class="close-button" id="close-button">×</button>
<div class="modal-guts">
<h1>Modal Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
</div>
</div>`;
divModal.classList.toggle("closed");
elem.appendChild(divModal);
d3.select(divModal).select("#close-button")
.on("click", () => {
d3.select("#my-modal").node().classList.toggle("closed");
d3.select("#my-modal-overlay").node().classList.toggle("closed");
//d3.select("#my-modal").node().classList.remove("fadeIn");
//d3.select("#my-modal").node().classList.add("fadeOut");
//d3.select("#my-modal-overlay").node().classList.remove("fadeIn");
//d3.select("#my-modal-overlay").node().classList.add("fadeOut");
d3.event.stopPropagation();
});
createChart(elem);
return elem;
}
function createChart(parent) {
const root = pack(data);
const leaves = root.leaves().filter(d => d.depth && d.value);
const svg = d3
.select(parent)
.append("svg")
//.style("width", width)
//.style("height", height)
.style("background", "#fff")
.style("font", "10px sans-serif")
.attr("text-anchor", "middle")
.attr("viewBox", [0, 0, width, height])
.attr("preserveAspectRatio", "xMinYMin meet");
svg.append("g")
.selectAll("circle")
.data(leaves)
.enter().append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.r)
.attr("fill", d => color(d.data.name))
.style("cursor", "pointer")
.on("click", (d) => {
d3.select("#my-modal").node().classList.toggle("closed");
d3.select("#my-modal-overlay").node().classList.toggle("closed");
//d3.select("#my-modal").node().classList.toggle("fadeIn");
//d3.select("#my-modal-overlay").node().classList.toggle("fadeIn");
d3.select("#my-modal").select("h1").text(d.data.name);
d3.select("#my-modal").select("p").text(format(d.data.count));
d3.event.stopPropagation();
});
svg.append("g")
.attr("pointer-events", "none")
.selectAll("text")
.data(leaves)
.enter().append("text")
.attr("transform", d => {
const {lines, radius} = fit(d.data.name, isNaN(d.data.count) ? undefined : format(d.data.count));
d.lines = lines;
if (!isNaN(d.data.count)) d.lines[d.lines.length - 1].count = true;
return `translate(${d.x},${d.y})`;
})
.selectAll("tspan")
.data(d => d.lines)
.enter().append("tspan")
.attr("x", 0)
.attr("y", (d, i, data) => (i - data.length / 2 + 0.8) * 11)
.text(d => d.text)
.filter(d => d.value)
.attr("font-weight", 300)
.attr("fill-opacity", 0.5);
return svg.node();
//return autosize(svg.node());
}
myCSSStyle = html`<style>
#chart-container {
width: 100%;
height: auto;
/*position: fixed;*/
top: 0;
left: 0;
/*overflow-y: scroll;*/
}
.modal {
/* This way it could be display flex or grid or whatever also. */
display: block;
/* Probably need media queries here */
width: 600px;
max-width: 100%;
height: 400px;
max-height: 100%;
/* it was fixed in the original example, but it doesn't seem to work correctly on Observable */
position: absolute;
z-index: 100;
left: 50%;
top: 50%;
/* Use this for centering if unknown width/height */
transform: translate(-50%, -50%);
/* If known, negative margins are probably better (less chance of blurry text). */
/* margin: -200px 0 0 -200px; */
background: white;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}
.closed {
display: none;
}
.modal-overlay {
/* it was fixed in the original example, but it doesn't seem to work correctly on Observable */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
background: rgba(0, 0, 0, 0.6);
}
.modal-guts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: 20px 50px 20px 20px;
}
.modal .close-button {
cursor: pointer;
position: absolute;
/* don't need to go crazy with z-index here, just sits over .modal-guts */
z-index: 1;
top: 20px;
/* needs to look OK with or without scrollbar */
right: 20px;
border: 0;
background: black;
color: white;
padding: 5px 10px;
font-size: 1.3rem;
}
.fadeIn {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeOut {
opacity: 0;
display: none;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
@keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
`
myStyle = "";
/**
* Initialize custom CSS styles. It's done this way instead of a html cell so it can work out of the box in standalone (otherwise I have no idea how to include unnamed cells with the Inspector)
Downside of this is that on Observable, it will add the style multiple times to the head.
This code is taken from https://observablehq.com/@mvastola/bubbletest
*/
initCSS = function() {
if (myStyle.length === 0) {
return;
}
var style = document.createElement("style");
style.type = "text/css";
style.innerText = myStyle;
return document.getElementsByTagName("head")[0].appendChild(style);
}
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.
