+ This is an example of <code> element for showing
+ inline code.
+
+
+ // This is a sample code snippet in JavaScript
+ function greet(name) {
+ console.log("Hello, " + name + "!");
+ }
+
+ greet("World");
+
+
+ + In order to create a simple Voronoi treemap using D3.js, follow these + steps: +
++ Set up the HTML structure with an SVG container where the treemap will + be rendered. +
+<svg id="simpleVoronoi"></svg>
+
+ The <svg> element with the ID "simpleVoronoi"
+ serves as the container for the Voronoi treemap.
+
+ Import the D3.js library by adding the following script tag just + before your custom script: +
+<script
+ src="https://d3js.org/d3.v7.min.js"></script>
+ + This script tag imports the D3.js library from the official CDN, + making D3.js functionalities available in your project. +
++ Define constants for SVG dimensions, data, and necessary variables. + Initialize the Voronoi treemap by calling functions to set up data, + layout, and drawing. +
+
+const HEIGHT = 500;
+const WIDTH = 960;
+const HALF_WIDTH = WIDTH / 2;
+const HALF_HEIGHT = HEIGHT / 2;
+
+// Define your data array here
+const data = [/* Your data array */];
+
+// Initialize SVG container
+const svg = d3.select("#simpleVoronoi")
+ .attr("width", WIDTH)
+ .attr("height", HEIGHT);
+
+const TREEMAP_RADIUS = Math.min(HALF_WIDTH, HALF_HEIGHT);
+
+const _voronoiTreemap = d3.voronoiTreemap();
+let hierarchy, circlingPolygon;
+
+const fontScale = d3.scaleLinear();
+
+function init(rootData) {
+ initData();
+ initLayout();
+ hierarchy = d3.hierarchy({ children: rootData }).sum((d) => d.weight);
+ _voronoiTreemap.clip(circlingPolygon)(hierarchy);
+
+ drawTreemap(hierarchy);
+}
+
+init(data);
+ + This block of code initializes constants, sets up the SVG container, + and prepares data and layout for the Voronoi treemap. +
+
+ Constants like HEIGHT and WIDTH define the
+ dimensions of the SVG container. Data, such as country names, weights,
+ and colors, are stored in the data array. The
+ init function initializes the treemap by calling other
+ functions to set up data, layout, and drawing.
+
+ Define functions to initialize data and layout settings for the + treemap. +
+
+function initData() {
+ circlingPolygon = computeCirclingPolygon();
+ fontScale.domain([3, 20]).range([8, 20]).clamp(true);
+}
+
+function computeCirclingPolygon() {
+ return [
+ [0, 0],
+ [WIDTH, 0],
+ [WIDTH, HEIGHT],
+ [0, HEIGHT],
+ ];
+}
+
+function initLayout() {
+ const drawingArea = svg.append("g").classed("drawingArea", true);
+ const treemapContainer = drawingArea.append("g").classed("treemap-container", true);
+
+ treemapContainer
+ .append("path")
+ .classed("world", true)
+ .attr("transform", `translate(${-TREEMAP_RADIUS}, ${-TREEMAP_RADIUS})`)
+ .attr("d", `M${circlingPolygon.join(",")}Z`);
+}
+ + These functions initialize data and layout settings for the treemap, + including the circling polygon and font scale. +
+
+ The initData function calculates the circling polygon and
+ sets the font scale based on the provided data. The
+ computeCirclingPolygon function calculates the vertices
+ of the circling polygon, while the initLayout function
+ sets up the SVG container and draws the circling polygon.
+
+ Create a function to draw the Voronoi treemap based on the provided + data and layout. +
+
+function drawTreemap(hierarchy) {
+ const leaves = hierarchy.leaves();
+
+ const cells = svg.select(".treemap-container")
+ .append("g")
+ .classed("cells", true)
+ .selectAll(".cell")
+ .data(leaves)
+ .enter()
+ .append("path")
+ .classed("cell", true)
+ .attr("d", (d) => `M${d.polygon.join(",")}z`)
+ .style("stroke", "black")
+ .style("stroke-width", "10px")
+ .style("fill", (d) => d.data.color);
+
+ const labels = svg.select(".treemap-container")
+ .append("g")
+ .classed("labels", true)
+ .selectAll(".label")
+ .data(leaves)
+ .enter()
+ .append("g")
+ .classed("label", true)
+ .attr("transform", (d) => `translate(${d.polygon.site.x}, ${d.polygon.site.y})`)
+ .style("font-size", (d) => fontScale(d.data.weight));
+
+ labels
+ .append("text")
+ .classed("name", true)
+ .html((d) => d.data.name);
+
+ labels
+ .append("text")
+ .classed("value", true)
+ .text((d) => `${d.data.weight}%`);
+}
+ + This function draws the Voronoi treemap based on the provided data and + layout settings, including cells and labels. +
+
+ The drawTreemap function creates cells and labels for
+ each data point in the treemap. It appends SVG elements for cells and
+ labels, styles them accordingly, and positions them based on the
+ calculated data. The cells represent the Voronoi regions, while the
+ labels display country names and weights.
+
+ Voronoi Treemaps are methods of visualizing hierarchical data, where + each cell represents a portion of the data and the hierarchy is encoded + by the nesting of cells within each other. Unlike traditional Treemaps, + Voronoi Tree Maps do not use rectangles to represent the data, but + rather use arbitrary polygons to represent the data. This allows for a + more organic and natural representation of the data. +
++ This is a Traditional Treemap. Notice how the rectangles are used to + represent the data. This can lead to a more rigid and less organic + representation of the data. +
+ + ++ This is a Voronoi Treemap. Notice how the polygons are used to represent + the data. As you can see the data seems to have a more organic and + natural representation. +
++ In order to create a simple Voronoi treemap using D3.js, follow these + steps: +
++ Set up the HTML structure with an SVG container where the treemap will + be rendered. +
+<svg id="simpleVoronoi"></svg>
+
+ The <svg> element with the ID "simpleVoronoi"
+ serves as the container for the Voronoi treemap.
+
+ Import the D3.js library by adding the following script tag just + before your custom script: +
+<script
+ src="https://d3js.org/d3.v7.min.js"></script>
+ + This script tag imports the D3.js library from the official CDN, + making D3.js functionalities available in your project. +
++ Define constants for SVG dimensions, data, and necessary variables. + Initialize the Voronoi treemap by calling functions to set up data, + layout, and drawing. +
+
+const HEIGHT = 500;
+const WIDTH = 960;
+const HALF_WIDTH = WIDTH / 2;
+const HALF_HEIGHT = HEIGHT / 2;
+
+// Define your data array here
+const data = [/* Your data array */];
+
+// Initialize SVG container
+const svg = d3.select("#simpleVoronoi")
+ .attr("width", WIDTH)
+ .attr("height", HEIGHT);
+
+const TREEMAP_RADIUS = Math.min(HALF_WIDTH, HALF_HEIGHT);
+
+const _voronoiTreemap = d3.voronoiTreemap();
+let hierarchy, circlingPolygon;
+
+const fontScale = d3.scaleLinear();
+
+function init(rootData) {
+ initData();
+ initLayout();
+ hierarchy = d3.hierarchy({ children: rootData }).sum((d) => d.weight);
+ _voronoiTreemap.clip(circlingPolygon)(hierarchy);
+
+ drawTreemap(hierarchy);
+}
+
+init(data);
+ + This block of code initializes constants, sets up the SVG container, + and prepares data and layout for the Voronoi treemap. +
+
+ Constants like HEIGHT and WIDTH define the
+ dimensions of the SVG container. Data, such as country names, weights,
+ and colors, are stored in the data array. The
+ init function initializes the treemap by calling other
+ functions to set up data, layout, and drawing.
+
+ Define functions to initialize data and layout settings for the + treemap. +
+
+function initData() {
+ circlingPolygon = computeCirclingPolygon();
+ fontScale.domain([3, 20]).range([8, 20]).clamp(true);
+}
+
+function computeCirclingPolygon() {
+ return [
+ [0, 0],
+ [WIDTH, 0],
+ [WIDTH, HEIGHT],
+ [0, HEIGHT],
+ ];
+}
+
+function initLayout() {
+ const drawingArea = svg.append("g").classed("drawingArea", true);
+ const treemapContainer = drawingArea.append("g").classed("treemap-container", true);
+
+ treemapContainer
+ .append("path")
+ .classed("world", true)
+ .attr("transform", `translate(${-TREEMAP_RADIUS}, ${-TREEMAP_RADIUS})`)
+ .attr("d", `M${circlingPolygon.join(",")}Z`);
+}
+ + These functions initialize data and layout settings for the treemap, + including the circling polygon and font scale. +
+
+ The initData function calculates the circling polygon and
+ sets the font scale based on the provided data. The
+ computeCirclingPolygon function calculates the vertices
+ of the circling polygon, while the initLayout function
+ sets up the SVG container and draws the circling polygon.
+
+ Create a function to draw the Voronoi treemap based on the provided + data and layout. +
+
+function drawTreemap(hierarchy) {
+ const leaves = hierarchy.leaves();
+
+ const cells = svg.select(".treemap-container")
+ .append("g")
+ .classed("cells", true)
+ .selectAll(".cell")
+ .data(leaves)
+ .enter()
+ .append("path")
+ .classed("cell", true)
+ .attr("d", (d) => `M${d.polygon.join(",")}z`)
+ .style("stroke", "black")
+ .style("stroke-width", "10px")
+ .style("fill", (d) => d.data.color);
+
+ const labels = svg.select(".treemap-container")
+ .append("g")
+ .classed("labels", true)
+ .selectAll(".label")
+ .data(leaves)
+ .enter()
+ .append("g")
+ .classed("label", true)
+ .attr("transform", (d) => `translate(${d.polygon.site.x}, ${d.polygon.site.y})`)
+ .style("font-size", (d) => fontScale(d.data.weight));
+
+ labels
+ .append("text")
+ .classed("name", true)
+ .html((d) => d.data.name);
+
+ labels
+ .append("text")
+ .classed("value", true)
+ .text((d) => `${d.data.weight}%`);
+}
+ + This function draws the Voronoi treemap based on the provided data and + layout settings, including cells and labels. +
+
+ The drawTreemap function creates cells and labels for
+ each data point in the treemap. It appends SVG elements for cells and
+ labels, styles them accordingly, and positions them based on the
+ calculated data. The cells represent the Voronoi regions, while the
+ labels display country names and weights.
+