Skip to content

DDDD #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
jewelb54 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

DDDD #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e879ff4
Piechart Commit
jewelb54 Dec 6, 2023
e6df615
Commit by Rana
jewelb54 Dec 6, 2023
18ea496
Merge branch 'main' of https://github.com/jewelb54/missing-migrants-v…
jewelb54 Dec 6, 2023
0976f05
Update Index.html
jewelb54 Dec 7, 2023
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
98 changes: 64 additions & 34 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Map with D3.js</title>
<style>
/* Add your custom styles here */
body {
margin: 0;
padding: 0;
}

#proportional-symbol-map {
width: 100vw;
height: 100vh;
}
/* Add your custom styles here */
.land {
fill: #ccc; /* Fill color for countries */
stroke: #fff; /* Border color for countries */
stroke-width: 1; /* Border width for countries */
}
.incident-point {
fill: red; /* Point color */
}
</style>

<!-- Include D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
<!-- Include TopoJSON -->
<script src="https://d3js.org/topojson.v3.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Map with D3.js</title>
<style>
/* Add your custom styles here */
body {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
height: 100vh;
}

#proportional-symbol-map {
grid-row: 1 / 2;
grid-column: 1 / 2;
width: 100%;
height: 100%;
}

#stacked-bar-chart {
grid-row: 1 / 2;
grid-column: 2 / 3;
width: 100%;
height: 100%;
}

#sankey-chart {
grid-row: 2 / 3;
grid-column: 1 / 2;
width: 100%;
height: 100%;
}

#pie-chart {
grid-row: 2 / 3;
grid-column: 2.5 / 3;
width: 100%;
height: 100%;
}

/* Add your custom styles here */
.land {
fill: #ccc; /* Fill color for countries */
stroke: #fff; /* Border color for countries */
stroke-width: 1; /* Border width for countries */
}

.incident-point {
fill: red; /* Point color */
}
</style>

<!-- Include D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
<!-- Include TopoJSON -->
<script src="https://d3js.org/topojson.v3.min.js"></script>
</head>
<body>
<svg width="800" height="400" id="proportional-symbol-map"></svg>
<div id="sankey-chart"></div>
<svg width="800" height="400" id="stacked-bar-chart"></svg>
<svg id="pie-chart"></svg>
<svg id="proportional-symbol-map"></svg>
<svg id="stacked-bar-chart"></svg>
<div id="sankey-chart"></div>
<svg id="pie-chart"></svg>

<!-- Include JavaScript files -->
<script src="scripts/preprocessing.js"></script>
Expand Down
38 changes: 31 additions & 7 deletions scripts/pie-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ class PieChart {
this.height = 400;
this.radius = Math.min(this.width, this.height) / 2;

this.color = d3.scaleOrdinal(d3.schemeCategory10);
this.color = d3.scaleOrdinal().range(['#ff5733', '#ffa833', '#33ff57', '#335eff', '#a833ff']);

// Define a variable to store the currently hovered slice
this.hoveredSlice = null;

this.svg = d3.select("#pie-chart")
.attr("width", this.width)
Expand All @@ -19,22 +22,43 @@ class PieChart {

this.arc = d3.arc()
.innerRadius(0)
.outerRadius(this.radius);
.outerRadius(this.radius)
.cornerRadius(8); // Add corner radius for a better look;
}

draw() {

const chart = this;

const arcs = this.svg.selectAll("arc")
.data(this.pie(this.data))
.enter()
.append("g")
.attr("class", "arc");
.attr("class", "arc")
.on("mouseover", function (event, d) {
// Highlight the current slice on mouseover
d3.select(this)
.transition()
.duration(200) // Adjust the duration as needed
.attr("stroke", "black")
.attr("stroke-width", 2);

})
.on("mouseout", function (event, d) {
// Remove the highlight on mouseout
d3.select(this)
.transition()
.duration(200) // Adjust the duration as needed
.attr("stroke", "none");

});

arcs.append("path")
.attr("fill", (d, i) => this.color(i))
.attr("d", this.arc);
.attr("fill", (d, i) => chart.color(i))
.attr("d", chart.arc);

arcs.append("text")
.attr("transform", d => `translate(${this.arc.centroid(d)})`)
.attr("transform", d => `translate(${chart.arc.centroid(d)})`)
.attr("text-anchor", d => (d.endAngle + d.startAngle) / 2 > Math.PI ? "end" : "start")
.text(d => `${d.data.gender}: ${Math.round(d.data.fatalityCount)}`)
.attr("fill", "white");
Expand All @@ -43,4 +67,4 @@ class PieChart {
clear() {
this.svg.selectAll(".arc").remove();
};
}
}
28 changes: 23 additions & 5 deletions scripts/stacked-bar-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ class StackedBarChart {

this.color = d3.scaleOrdinal()
.range(d3.schemeCategory10);

// Define a variable to store the currently hovered bar
this.hoveredBar = null;

this.stack = d3.stack()
.keys(this.categories);
Expand All @@ -35,18 +38,33 @@ class StackedBarChart {
}

draw() {
const chart = this;

this.g.selectAll("g")
.data(this.stackedData)
.enter().append("g")
.attr("fill", d => this.color(d.key))
.attr("fill", d => chart.color(d.key))
.selectAll("rect")
.data(d => d)
.enter().append("rect")
.attr("x", d => this.x(d.data.year))
.attr("y", d => this.y(d[1]))
.attr("height", d => this.y(d[0]) - this.y(d[1]))
.attr("width", this.x.bandwidth());
.attr("x", d => chart.x(d.data.year))
.attr("y", d => chart.y(d[1]))
.attr("height", d => chart.y(d[0]) - chart.y(d[1]))
.attr("width", chart.x.bandwidth())
.on("mouseover", function (event, d) {
// Highlight the current bar on mouseover with transition
d3.select(this)
.transition()
.duration(200) // Adjust the duration as needed
.attr("fill", "orange"); // Change the color for highlighting
})
.on("mouseout", function (event, d) {
// Restore the color on mouseout with transition
d3.select(this)
.transition()
.duration(200) // Adjust the duration as needed
.attr("fill", d => chart.color(d3.select(this.parentNode).datum().key));
});

this.g.append("g")
.attr("transform", `translate(0,${this.innerHeight})`)
Expand Down