Skip to content
GitLab
Explore
Projects
Groups
Snippets
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Pardo Urbano
Visualization
Commits
62cca955
Commit
62cca955
authored
1 year ago
by
Rushikesh Padsala
Browse files
Options
Download
Email Patches
Plain Diff
Update Exercise 1/index.html
parent
6ff41386
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
Exercise 1/index.html
+80
-1
Exercise 1/index.html
with
80 additions
and
1 deletion
+80
-1
Exercise 1/index.html
+
80
-
1
View file @
62cca955
...
...
@@ -14,10 +14,34 @@
<script
src=
"building_data.js"
></script>
<link
rel=
"stylesheet"
href=
"index.css"
>
<style>
body
{
display
:
flex
;
flex-direction
:
row
;
margin
:
0
;
padding
:
0
;
}
#map-container
{
flex
:
1
;
height
:
100vh
;
}
#chart-container
{
flex
:
1
;
padding
:
20px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
</style>
</head>
<body>
<div
id=
"mapid"
></div>
<div
id=
"map-container"
>
<div
id=
"mapid"
></div>
</div>
<div
id=
"chart-container"
>
<canvas
id=
"yocChart"
></canvas>
</div>
<script>
var
mymap
=
L
.
map
(
'
mapid
'
).
setView
([
48.79205
,
9.20758
],
16
);
var
OpenStreetMap_DE
=
L
.
tileLayer
(
'
https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png
'
,
{
...
...
@@ -67,6 +91,61 @@
onEachFeature
:
onEachFeature
,
style
:
style
,
}).
addTo
(
mymap
);
// Retrieve the building year of construction data from the GeoJSON
var
buildingYoc
=
building_data
.
features
.
map
(
function
(
feature
)
{
return
feature
.
properties
.
Year_of_co
;
});
// Count the occurrences of each building age
var
yocCounts
=
{};
buildingYoc
.
forEach
(
function
(
Year_of_co
)
{
if
(
yocCounts
[
Year_of_co
])
{
yocCounts
[
Year_of_co
]
++
;
}
else
{
yocCounts
[
Year_of_co
]
=
1
;
}
});
// Prepare the chart data
var
yocLabels
=
Object
.
keys
(
yocCounts
);
var
yocData
=
Object
.
values
(
yocCounts
);
// Create the building year of construction distribution chart using Chart.js
var
ctx
=
document
.
getElementById
(
'
yocChart
'
).
getContext
(
'
2d
'
);
var
yocChart
=
new
Chart
(
ctx
,
{
type
:
'
bar
'
,
data
:
{
labels
:
yocLabels
,
datasets
:
[{
label
:
'
No. of buildings
'
,
data
:
yocData
,
backgroundColor
:
'
rgba(75, 192, 192, 0.5)
'
,
borderColor
:
'
rgba(75, 192, 192, 1)
'
,
borderWidth
:
1
}]
},
options
:
{
responsive
:
true
,
plugins
:
{
legend
:
{
position
:
'
bottom
'
,
},
title
:
{
display
:
true
,
text
:
'
Building Distribution According to its Year of Construction
'
}
},
scales
:
{
y
:
{
beginAtZero
:
true
,
stepSize
:
15
}
}
}
});
</script>
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Explore
Projects
Groups
Snippets