final/codeTutorial.html at main · azzhang3/final · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Creating a Simple Voronoi Treemap</title>
    <style>
      /* Your CSS styles go here */
      code {
        background-color: #f4f4f4;
        padding: 2px 4px;
        border-radius: 4px;
      }
    </style>
  </head>
  <div id="navbar"></div>
  <body>
    <div class="codeTitle">
      <!-- Title -->
      <h1>Creating a Simple Voronoi Treemap with D3.js</h1>
    </div>

    <!-- Introduction -->
    <div class="codeIntro">
      <p>
        In order to create a simple Voronoi treemap using D3.js, follow these
        steps:
      </p>
    </div>

    <!-- Step 1: Initialize the HTML Structure -->
    <ol>
      <li>
        <h2>Initialize the HTML Structure:</h2>
        <p>
          Set up the HTML structure with an SVG container where the treemap will
          be rendered.
        </p>
        <code>&lt;svg id="simpleVoronoi"&gt;&lt;/svg&gt;</code>
        <p>
          The <code>&lt;svg&gt;</code> element with the ID "simpleVoronoi"
          serves as the container for the Voronoi treemap.
        </p>
      </li>

      <!-- Step 2: Import D3.js Library -->
      <li>
        <h2>Import D3.js Library:</h2>
        <p>
          Import the D3.js library by adding the following script tag just
          before your custom script:
        </p>
        <code
          >&lt;script
          src="https://d3js.org/d3.v7.min.js"&gt;&lt;/script&gt;</code
        >
        <p>
          This script tag imports the D3.js library from the official CDN,
          making D3.js functionalities available in your project.
        </p>
      </li>

      <!-- Step 3: Initialize the Voronoi Treemap -->
      <li>
        <h2>Initialize the Voronoi Treemap:</h2>
        <p>
          Define constants for SVG dimensions, data, and necessary variables.
          Initialize the Voronoi treemap by calling functions to set up data,
          layout, and drawing.
        </p>
        <pre><code>
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);
      </code></pre>
        <p>
          This block of code initializes constants, sets up the SVG container,
          and prepares data and layout for the Voronoi treemap.
        </p>
        <p>
          Constants like <code>HEIGHT</code> and <code>WIDTH</code> define the
          dimensions of the SVG container. Data, such as country names, weights,
          and colors, are stored in the <code>data</code> array. The
          <code>init</code> function initializes the treemap by calling other
          functions to set up data, layout, and drawing.
        </p>
      </li>

      <!-- Step 4: Initialize Data and Layout -->
      <li>
        <h2>Initialize Data and Layout:</h2>
        <p>
          Define functions to initialize data and layout settings for the
          treemap.
        </p>
        <pre><code>
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`);
}
      </code></pre>
        <p>
          These functions initialize data and layout settings for the treemap,
          including the circling polygon and font scale.
        </p>
        <p>
          The <code>initData</code> function calculates the circling polygon and
          sets the font scale based on the provided data. The
          <code>computeCirclingPolygon</code> function calculates the vertices
          of the circling polygon, while the <code>initLayout</code> function
          sets up the SVG container and draws the circling polygon.
        </p>
      </li>

      <!-- Step 5: Draw the Treemap -->
      <li>
        <h2>Draw the Treemap:</h2>
        <p>
          Create a function to draw the Voronoi treemap based on the provided
          data and layout.
        </p>
        <pre><code>
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}%`);
}
      </code></pre>
        <p>
          This function draws the Voronoi treemap based on the provided data and
          layout settings, including cells and labels.
        </p>
        <p>
          The <code>drawTreemap</code> 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.
        </p>
      </li>
    </ol>
    <script>
      fetch("./navbar.html")
        .then((response) => response.text())
        .then((html) => {
          document.getElementById("navbar").innerHTML = html;
        });
    </script>
    <footer>
      <p>© 2024 Voronoi Treemaps</p>
    </footer>
  </body>
</html>