Skip to content

Added voronoi js and html #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
azzhang3 wants to merge 19 commits into
base: main
Choose a base branch
from
Open

Added voronoi js and html #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
26b3d27
nav bar and code chunk
randyer Feb 23, 2024
8dabc97
Merge pull request #1 from azzhang3/initial-design
azzhang3 Feb 23, 2024
b7303ab
Added New Files and Title on Home Page
azzhang3 Feb 23, 2024
c31d87b
Added voronoi js and html
azzhang3 Feb 23, 2024
a15ec84
voronoi tree
azzhang3 Feb 23, 2024
047393c
Merge pull request #2 from azzhang3/azhang-final
randyer Feb 23, 2024
6448050
simple voronoi example
randyer Feb 27, 2024
08110e3
Merge pull request #3 from azzhang3/simple-voronoi
azzhang3 Feb 27, 2024
b09b7b0
Home Page - Working Progress
azzhang3 Feb 28, 2024
e3b72ec
home page - in progress
azzhang3 Feb 29, 2024
a3aeb49
deleted unnecessary file
azzhang3 Feb 29, 2024
c27e1cf
Code Page - Outline done
azzhang3 Feb 29, 2024
db147e2
changes to circle voronoi
azzhang3 Feb 29, 2024
17036b4
All Pages Are Working
azzhang3 Feb 29, 2024
7490c51
Merge pull request #4 from azzhang3/azhang-final
azzhang3 Feb 29, 2024
e6fc4ab
Create CNAME
azzhang3 Feb 29, 2024
f2a7a23
Delete CNAME
azzhang3 Feb 29, 2024
91fffd4
small changes to home page
azzhang3 Feb 29, 2024
1cc07ac
added code tutorial to home page
azzhang3 Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions Asia.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "world",
"children": [
{
"name": "Asia",
"color": "#f58321",
"children": [
{"name": "China", "weight": 14.84, "code": "CN"},
{"name": "Japan", "weight": 5.91, "code": "JP"},
{"name": "India", "weight": 2.83, "code": "IN"},
{"name": "South Korea", "weight": 1.86, "code": "KR"},
{"name": "Russia", "weight": 1.8, "code": "RU"},
{"name": "Indonesia", "weight": 1.16, "code": "ID"},
{"name": "Turkey", "weight": 0.97, "code": "TR"},
{"name": "Saudi Arabia", "weight": 0.87, "code": "SA"},
{"name": "Iran", "weight": 0.57, "code": "IR"},
{"name": "Thaïland", "weight": 0.53, "code": "TH"},
{"name": "United Arab Emirates", "weight": 0.5, "code": "AE"},
{"name": "Hong Kong", "weight": 0.42, "code": "HK"},
{"name": "Israel", "weight": 0.4, "code": "IL"},
{"name": "Malasya", "weight": 0.4, "code": "MY"},
{"name": "Singapore", "weight": 0.39, "code": "SG"},
{"name": "Philippines", "weight": 0.39, "code": "PH"}
]
}
]
}
18 changes: 18 additions & 0 deletions AsiaGDP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
[
{"name": "China", "weight": 14.84},
{"name": "Japan", "weight": 5.91},
{"name": "India", "weight": 2.83},
{"name": "South Korea", "weight": 1.86},
{"name": "Russia", "weight": 1.8},
{"name": "Indonesia", "weight": 1.16},
{"name": "Turkey", "weight": 0.97},
{"name": "Saudi Arabia", "weight": 0.87},
{"name": "Iran", "weight": 0.57},
{"name": "Thaïland", "weight": 0.53},
{"name": "United Arab Emirates", "weight": 0.5},
{"name": "Hong Kong", "weight": 0.42},
{"name": "Israel", "weight": 0.4},
{"name": "Malasya", "weight": 0.4},
{"name": "Singapore", "weight": 0.39},
{"name": "Philippines", "weight": 0.39}
]
45 changes: 45 additions & 0 deletions codeBlock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!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>Code Example</title>
</head>
<body>
<div id="navbar"></div>

<!-- Your page content goes here -->

<div class="title">
<h1>All About Treemaps</h1>
</div>

<div class="container" id="code">
<h2>Inline Code Example</h2>
<p>
This is an example of <code>&lt;code&gt;</code> element for showing
inline code.
</p>

<h2>Code Block Example</h2>
<pre>
<code>
// This is a sample code snippet in JavaScript
function greet(name) {
console.log("Hello, " + name + "!");
}

greet("World");
</code>
</pre>
</div>
<script>
fetch("./navbar.html")
.then((response) => response.text())
.then((html) => {
document.getElementById("navbar").innerHTML = html;
});
</script>
</body>
</html>
233 changes: 233 additions & 0 deletions codeTutorial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,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>
Loading