25:["$","title",null,{"children":"Bubble chart | Jason Scharf | Observable"}] 49:Ta4e,chart = { // Specify the dimensions of the chart. const width = 928; const height = width; const margin = 1; // to avoid clipping the root circle stroke const Owner = d => d.Owner; // Specify the number format for values. const format = d3.format(",d"); // Create a categorical color scale. const color = d3.scaleOrdinal(d3.schemeTableau10); // Create the pack layout. const pack = d3.pack() .size([width - margin * 2, height - margin * 2]) .padding(3); // Compute the hierarchy from the (flat) data; expose the values // for each node; lastly apply the pack layout. const root = pack(d3.hierarchy({children: data}) .sum(d => d.Property_Count)); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-margin, -margin, width, height]) .attr("style", "max-width: 100%; height: auto; font: 9px sans-serif;") .attr("text-anchor", "middle"); // Add a tooltip div to the body for displaying owner information const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "1px solid #ccc") .style("padding", "5px") .style("border-radius", "3px") .style("font", "12px sans-serif"); // Place each (leaf) node according to the layout’s x and y values. const node = svg.append("g") .selectAll() .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); // Add a filled circle. node.append("circle") .attr("fill-opacity", 0.7) .attr("fill", d => color(d.data)) .attr("r", d => d.r) .on("mouseover", function(event, d) { tooltip.style("visibility", "visible") .html( "" + "Owner: " + "" + d.data.Owner + "
" + "" + "Num. Properties: " + "" + d.data.Property_Count); }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); // Add a label. const text = node.append("text") .attr("clip-path", d => `circle(${d.r})`); // Add a tspan text.selectAll() .data(d => [d.data.Owner]) .join("tspan") .attr("x", 0) .attr("y", (d, i) => i * 12) // Adjust the y position for multiple lines .text(d => d); return Object.assign(svg.node(), {scales: {color}}); }4a:[{"id":"98286ff54b1a31ee49701613daa95843a3551237f96b163fc9b18096c37da3a535d83f3d4448fc8c461b71e5b537fa77f990aed443697514874ba98bd5b135e9","href":"https://static.observableusercontent.com/files/98286ff54b1a31ee49701613daa95843a3551237f96b163fc9b18096c37da3a535d83f3d4448fc8c461b71e5b537fa77f990aed443697514874ba98bd5b135e9","name":"owner_count@1.csv","type":"text/csv","lastModified":1715831692735.855,"size":20037}] 29:{"id":"711195ecdac1c2c9","slug":null,"title":"Bubble chart","thumbnail":"6488c62d5963c2e5a70773b6dddf5280a721cc37c9b8ce29e4987757b47297be","access_level":"public","create_time":"$D2024-05-16T00:46:59.264Z","update_time":"$D2024-05-17T18:28:03.362Z","view_time":null,"first_public_time":"$D2024-05-16T04:23:57.617Z","has_unpublished_edits":null,"fork":{"id":"1a82a535436ff4b3","slug":"bubble-chart/2","title":"Bubble chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a3ce80634afc8b37","login":"jdscharf","name":"Jason Scharf","avatar_url":"https://avatars-next.observableusercontent.com/0d4d3a38453f1ad7f3e0f0966bc047120202e670e35d2c1e58bf076045bf8555","tier":"starter_2024","bio":"","following":false},"version":359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ad137b70a0ac8705","login":"jdscharf","name":"Jason Scharf","avatar_url":"https://avatars-next.observableusercontent.com/0d4d3a38453f1ad7f3e0f0966bc047120202e670e35d2c1e58bf076045bf8555","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"a3ce80634afc8b37","login":"jdscharf","name":"Jason Scharf","avatar_url":"https://avatars-next.observableusercontent.com/0d4d3a38453f1ad7f3e0f0966bc047120202e670e35d2c1e58bf076045bf8555","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ad137b70a0ac8705","login":"jdscharf","name":"Jason Scharf","avatar_url":"https://avatars-next.observableusercontent.com/0d4d3a38453f1ad7f3e0f0966bc047120202e670e35d2c1e58bf076045bf8555","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bubble chart","cells":[{"id":0,"value":"

Bubble chart

D3 › Gallery

\n\n# Syracuse, NY Vacant Property Bubble chart\n\nHere is a Bubble chart of the Landlords that own buildings taht have been determined to be Vacant in the City of Syracuse. Data reflects when it was pulled Bubble charts are non-hierarchical [packed circles](/@d3/pack/2?intent=fork). The area of each circle is proportional its value (here, file size). The organic appearance of these diagrams can be intriguing, but also consider a [treemap](/@d3/treemap/2?intent=fork) or a humble [bar chart](/@d3/horizontal-bar-chart/2?intent=fork).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// data = (await FileAttachment(\"flare.csv\").csv({typed: true})).filter(({value}) => value !== null)\ndata = (await FileAttachment(\"owner_count@1.csv\").csv({typed: true})).filter(({value}) => value !== null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null