Skip to content
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

Jump to bottom

Dev #32

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

Dev #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
683e263
Add files for intro visualization
trndnhan May 13, 2023
f66ec35
Small updates
trndnhan May 23, 2023
bb87f0b
Small updates
trndnhan May 31, 2023
a12d448
Modify data
trndnhan May 31, 2023
5525c2f
Merge pull request #30 from Nhathuy1305/main
Nhathuy1305 May 31, 2023
6209013
Create workspace.xml
Nhathuy1305 May 31, 2023
4a3a2e5
Overwriteen
Nhathuy1305 May 31, 2023
0cd7d0d
Overwritten
Nhathuy1305 May 31, 2023
4c3ef9a
Overwritten
Nhathuy1305 May 31, 2023
47e7a69
Merge pull request #31 from Nhathuy1305/intro_chart
Nhathuy1305 May 31, 2023
d14c7e9
update
May 31, 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
5 changes: 0 additions & 5 deletions .idea/.gitignore
View file
Open in desktop

This file was deleted.

23 changes: 0 additions & 23 deletions .idea/DSDV-project-1.iml
View file
Open in desktop

This file was deleted.

28 changes: 0 additions & 28 deletions .idea/inspectionProfiles/Project_Default.xml
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions .idea/vcs.xml
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions .idea/watcherTasks.xml
View file
Open in desktop

This file was deleted.

56 changes: 56 additions & 0 deletions .idea/workspace.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
35 changes: 35 additions & 0 deletions Intro.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
body {
box-sizing: border-box;
margin: 0 auto;
color: black;
}

.background {
position: absolute;
top: 0;
left: 0;
z-index: -1000;
background-image: linear-gradient(241.5deg, #D1D0F7 15.83%, #0093E9 89.93%);
background-size: cover;
width: 100%;
height: 1250px;
}

.container {
width: 100%;
height: 100%;
}

.main {
display: flex;
flex-direction: column;
}

.main .row {
display: flex;
flex-direction: column;
}

.row .col {
width: 33%;
}
65 changes: 65 additions & 0 deletions Intro.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Introduction to tramcam</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<link rel="stylesheet" href="./Intro.css" />
</head>
<body>
<div class="container">
<div class="background"></div>
<div class="main">
<div class="row">
<div class="col">
<div class="item-title">Giới tính sinh học</div>
<div class="item">
<script src="./js/HorizontalBarchart.js"></script>
</div>
</div>
<div class="col col-title">
<script>
d3.csv("./assets/Condition.csv").then(function (data) {
var columnValues = data.map(function (d) {
return d.value;
});
var columnLength = columnValues.length;
d3.select("#col-title-h2").text(columnLength);
});
</script>
<h2 id="col-title-h2"></h2>
<p>Người Khảo Sát</p>
</div>
<div class="col">
<div class="item-title">Cộng Đồng LGBT</div>
<div class="item">
<script src="./js/DonutChart.js"></script>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="item-title">Trình độ học vấn</div>
<div class="item">
<script src="./js/Treemap.js"></script>
</div>
</div>
<div class="col">
<div class="item-title">Mức độ trầm cảm</div>
<div class="item">
<script src="./js/PieChart.js"></script>
</div>
</div>
<div class="col">
<div class="item-title">Yếu tố gây ra áp lực</div>
<div class="item">
<script src="./js/VerticalBarchart.js"></script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Loading