Compare commits
6 Commits
4ed12e10e6
...
3f45a98600
| Author | SHA1 | Date |
|---|---|---|
 Sam
|
3f45a98600 | |
|
Sam
|
e0294ccf06 | |
|
Sam
|
87727c3b3d | |
|
Sam
|
36d489eb8c | |
|
Sam
|
8f50994a67 | |
|
Sam
|
b34e05998c |
|
|
@ -19,7 +19,7 @@ Analysis involves examining and interpreting data to uncover patterns, trends, a
|
|||
#### Insights
|
||||
Insights are the deep understanding we've derived from our data. Specifically, this refers to patterns and relationships that have been uncovered from our data that didn't previously exist. We can use insights to make important business decisions or inform policy.
|
||||
|
||||
### Explore Based Data:
|
||||
### Explore Based Data
|
||||
|
||||
{{< card-list >}}
|
||||
["Data Lab"]
|
||||
|
|
|
|||
|
|
@ -54,15 +54,15 @@ raster2pgsql -d -M -C -I -s 4326 -t 128x128 -F *.tif dem.srtm | psql --dbname=os
|
|||
{{</ highlight >}}
|
||||
|
||||
Here's a breakdown of the above command:
|
||||
- -d This drops an existing table if it already exists. It's useful to include this in case we need to run the command again.
|
||||
- -M This runs `VACUUM ANALYZE` on the table after the raster tiles have been inserted into the database. This optimizes the table by reclaiming storage space and then collecting table statistics.
|
||||
- -C This applies raster constraints to the table by using the `AddRasterConstraints` function in PostGIS. This adds several types of constraints to the table which ensures data integrity and enforces rules for consistency.
|
||||
- -I Creates a spatial index (GiST) on the table.
|
||||
- -s Assign SRID (Spatial Reference System Identifier) to the raster.
|
||||
- -t Tile size. This splits the raster into tiles of the specified size. Each tile is a row in the final table.
|
||||
- -F Creates a filename column. As the raster is split into many smaller tiles, this is useful to help us identify the original file the tile belonged to.
|
||||
- *.tif Selects all of the .tif files in the directory.
|
||||
- dem.srtm Defines the schema and name of the table. Remember to create the `dem` schema in the database before running the command.
|
||||
- `-d` This drops an existing table if it already exists. It's useful to include this in case we need to run the command again.
|
||||
- `-M` This runs `VACUUM ANALYZE` on the table after the raster tiles have been inserted into the database. This optimizes the table by reclaiming storage space and then collecting table statistics.
|
||||
- `-C` This applies raster constraints to the table by using the `AddRasterConstraints` function in PostGIS. This adds several types of constraints to the table which ensures data integrity and enforces rules for consistency.
|
||||
- `-I` Creates a spatial index (GiST) on the table.
|
||||
- `-s` Assign SRID (Spatial Reference System Identifier) to the raster.
|
||||
- `-t` Tile size. This splits the raster into tiles of the specified size. Each tile is a row in the final table.
|
||||
- `-F` Creates a filename column. As the raster is split into many smaller tiles, this is useful to help us identify the original file the tile belonged to.
|
||||
- ` *.tif` Selects all of the .tif files in the directory.
|
||||
- `dem.srtm` Defines the schema and name of the table. Remember to create the `dem` schema in the database before running the command.
|
||||
|
||||
The `raster2pgsql` command will output a sql query which we can then pipe into the `psql` command.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Based Data Lab"
|
||||
title: "Data Lab"
|
||||
---
|
||||
|
||||
Welcome to the __Based Data Lab__. Here I present a collection of different data-driven projects I've worked on.
|
||||
Welcome to the __Data Lab__. Here I present a collection of different data-driven projects I've worked on.
|
||||
|
|
|
|||
|
|
@ -4,11 +4,20 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all" />
|
||||
<link rel="stylesheet" href="/css/navbar.css" type="text/css" media="all" />
|
||||
<link rel="stylesheet" href="/css/tables.css" type="text/css" media="all" />
|
||||
<link rel="stylesheet" href="/css/toc.css" type="text/css" media="all" />
|
||||
<link rel="stylesheet" href="/css/articles.css" type="text/css" media="all" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/css/codeblock.css"
|
||||
type="text/css"
|
||||
media="all"
|
||||
/>
|
||||
<link rel="stylesheet" href="/css/syntax.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,190 @@
|
|||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
color: var(--text-color);
|
||||
padding-top: var(--content-padding);
|
||||
padding: var(--content-padding);
|
||||
padding-left: var(--content-padding);
|
||||
padding-right: var(--content-padding);
|
||||
max-width: 1000px;
|
||||
line-height: var(--line-height);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page-content h1 {
|
||||
color: var(--heading1-color);
|
||||
}
|
||||
|
||||
.home-page-content {
|
||||
line-height: 2;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-page-content h1 {
|
||||
text-align: center;
|
||||
font-size: 32px !important;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.home-page-content h3 {
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.home-page-content h4 {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-page-content h5 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.home-page-content p {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
margin-left: 10vw;
|
||||
margin-right: 10vw;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.profile-img img {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figcaption h4 {
|
||||
font-size: 10px;
|
||||
padding-bottom: var(--element-padding);
|
||||
}
|
||||
|
||||
.main-article {
|
||||
padding: var(--content-padding);
|
||||
width: var(--article-max-width);
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
border-left: var(--border-width) var(--border-style) var(--border-color);
|
||||
border-right: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
|
||||
.main-article h1 {
|
||||
color: var(--heading1-color);
|
||||
font-size: var(--heading1-font-size);
|
||||
}
|
||||
|
||||
.main-article h2,
|
||||
h3 {
|
||||
margin-bottom: var(--article-margin);
|
||||
margin-top: var(--heading-margin);
|
||||
color: var(--heading2-color);
|
||||
}
|
||||
|
||||
.main-article ul,
|
||||
ol {
|
||||
margin-bottom: var(--article-margin);
|
||||
margin-left: var(--article-margin);
|
||||
}
|
||||
|
||||
.main-article li {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.main-article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.article-card-flex-container {
|
||||
margin-left: var(--content-margin);
|
||||
margin-right: var(--content-margin);
|
||||
margin-bottom: var(--content-margin);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
line-height: var(--line-height);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
margin: var(--element-margin);
|
||||
background-color: black;
|
||||
width: 200px;
|
||||
min-height: 100%;
|
||||
border-radius: var(--radius);
|
||||
transition: background-color 0.3s ease;
|
||||
text-decoration: none; /* Remove underline */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-card-text p,
|
||||
.article-text a {
|
||||
color: var(--subtext-color);
|
||||
margin-bottom: var(--element-margin);
|
||||
}
|
||||
|
||||
.article-card-summary h3 {
|
||||
color: var(--heading3-color);
|
||||
margin: var(--article-margin);
|
||||
font-size: 16px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.article-card-summary p {
|
||||
color: var(--subtext-color);
|
||||
margin: var(--article-margin);
|
||||
}
|
||||
|
||||
.article-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.article-card-thumbnail {
|
||||
max-width: 100%;
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
|
||||
.article-card-author-row {
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: var(--element-margin);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
background-color: var(--summary-container-hover-bg);
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/* Code block */
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.codeblock {
|
||||
position: relative;
|
||||
background-color: var(--codeblock-bg-color);
|
||||
width: 100%;
|
||||
padding: var(--element-padding);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: var(--radius);
|
||||
border: var(--border-width) var(--border-style) var(--border-color);
|
||||
font-size: var(--code-block-font-size);
|
||||
}
|
||||
|
||||
/* Code block language label */
|
||||
.codeblock::before {
|
||||
font-family: var(--code-font-family);
|
||||
content: attr(data-lang);
|
||||
position: absolute;
|
||||
color: var(--heading1-color);
|
||||
right: 5px;
|
||||
top: 0px;
|
||||
font-size: var(--code-block-font-size);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--code-font-family);
|
||||
}
|
||||
|
||||
/* Styles for inline <code> */
|
||||
:not(pre) > code {
|
||||
color: #aaa4a0;
|
||||
background-color: var(--inline-code-bg-color);
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
font-size: var(--code-block-font-size);
|
||||
}
|
||||
|
|
@ -5,7 +5,8 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--font-family: "Courier Prime", monospace;
|
||||
--font-family: "Montserrat", sans-serif;
|
||||
--code-font-family: "IBM Plex Mono", monospace;
|
||||
--font-size: 10;
|
||||
--author-row-font-size: 12px;
|
||||
--heading1-font-size: 25px;
|
||||
|
|
@ -62,6 +63,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Style for WebKit browsers (Chrome, Safari, etc.) */
|
||||
*::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
border-radius: 6px;
|
||||
background: #1f1f28;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
background: #585653;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: #454445; /* Background color on hover */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
background-color: var(--background-color);
|
||||
|
|
@ -69,27 +86,6 @@ body {
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
|
|
@ -100,201 +96,11 @@ a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
color: var(--text-color);
|
||||
padding-top: var(--content-padding);
|
||||
padding: var(--content-padding);
|
||||
padding-left: var(--content-padding);
|
||||
padding-right: var(--content-padding);
|
||||
max-width: 1000px;
|
||||
line-height: var(--line-height);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page-content h1 {
|
||||
color: var(--heading1-color);
|
||||
}
|
||||
|
||||
.home-page-content {
|
||||
line-height: 2;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-page-content h1 {
|
||||
text-align: center;
|
||||
font-size: 32px !important;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.home-page-content h3 {
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.home-page-content h4 {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-page-content h5 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.home-page-content p {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
margin-left: 10vw;
|
||||
margin-right: 10vw;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.profile-img img {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figcaption h4 {
|
||||
font-size: 10px;
|
||||
padding-bottom: var(--element-padding);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.home-page {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.profile-img {
|
||||
margin-right: 0px;
|
||||
order: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.profile-img img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
.home-page-content {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.main-article {
|
||||
padding: var(--content-padding);
|
||||
width: var(--article-max-width);
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
border-left: var(--border-width) var(--border-style) var(--border-color);
|
||||
border-right: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
|
||||
.main-article h1 {
|
||||
color: var(--heading1-color);
|
||||
font-size: var(--heading1-font-size);
|
||||
}
|
||||
|
||||
.main-article h2,
|
||||
h3 {
|
||||
margin-bottom: var(--article-margin);
|
||||
margin-top: var(--heading-margin);
|
||||
color: var(--heading2-color);
|
||||
}
|
||||
|
||||
.main-article ul,
|
||||
ol {
|
||||
margin-bottom: var(--article-margin);
|
||||
margin-left: var(--article-margin);
|
||||
}
|
||||
|
||||
.main-article li {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.main-article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
time {
|
||||
color: var(--subtext-color);
|
||||
margin-bottom: var(--article-margin);
|
||||
}
|
||||
|
||||
.article-card-flex-container {
|
||||
margin-left: var(--content-margin);
|
||||
margin-right: var(--content-margin);
|
||||
margin-bottom: var(--content-margin);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
line-height: var(--line-height);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
margin: var(--element-margin);
|
||||
background-color: black;
|
||||
width: 200px;
|
||||
min-height: 100%;
|
||||
border-radius: var(--radius);
|
||||
transition: background-color 0.3s ease;
|
||||
text-decoration: none; /* Remove underline */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-card-text p,
|
||||
.article-text a {
|
||||
color: var(--subtext-color);
|
||||
margin-bottom: var(--element-margin);
|
||||
}
|
||||
|
||||
.article-card-summary h3 {
|
||||
color: var(--heading3-color);
|
||||
margin: var(--article-margin);
|
||||
font-size: 16px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.article-card-summary p {
|
||||
color: var(--subtext-color);
|
||||
margin: var(--article-margin);
|
||||
}
|
||||
|
||||
.article-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.article-card-thumbnail {
|
||||
max-width: 100%;
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
|
||||
.article-card-author-row {
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: var(--element-margin);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
background-color: var(--summary-container-hover-bg);
|
||||
}
|
||||
|
||||
/* Charts */
|
||||
.chart-flex-container {
|
||||
display: flex;
|
||||
|
|
@ -329,38 +135,6 @@ footer a:hover {
|
|||
color: black;
|
||||
}
|
||||
|
||||
/* Chart modifiers */
|
||||
.chart-modifiers {
|
||||
height: var(--chart-modifier-height);
|
||||
}
|
||||
|
||||
.ck-button {
|
||||
width: var(--checkbox-width);
|
||||
color: white;
|
||||
font-size: var(--checkbox-font-size);
|
||||
cursor: pointer;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
margin-left: 50px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.ck-button label span {
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #a19fbc;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.ck-button input:checked + span {
|
||||
background-color: #666fbc;
|
||||
}
|
||||
|
||||
.author-row {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
|
|
@ -388,136 +162,3 @@ footer a:hover {
|
|||
.author-row time {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
article p {
|
||||
margin-bottom: var(--article-margin);
|
||||
}
|
||||
|
||||
article em,
|
||||
article strong {
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
/* table of contents */
|
||||
#tocWrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#TableOfContents li::marker {
|
||||
content: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#TableOfContents li {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#TableOfContents a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#TableOfContents ul {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
/* Code block */
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* Style for WebKit browsers (Chrome, Safari, etc.) */
|
||||
*::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
border-radius: 6px;
|
||||
background: #1f1f28;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
background: #585653;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: #454445; /* Background color on hover */
|
||||
}
|
||||
|
||||
.codeblock {
|
||||
position: relative;
|
||||
background-color: var(--codeblock-bg-color);
|
||||
width: 100%;
|
||||
padding: var(--element-padding);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: var(--radius);
|
||||
border: var(--border-width) var(--border-style) var(--border-color);
|
||||
font-size: var(--code-block-font-size);
|
||||
}
|
||||
|
||||
/* Code block language label */
|
||||
.codeblock::before {
|
||||
content: attr(data-lang);
|
||||
position: absolute;
|
||||
color: var(--heading1-color);
|
||||
right: 5px;
|
||||
top: 0px;
|
||||
font-size: var(--code-block-font-size);
|
||||
}
|
||||
|
||||
/* Styles for inline <code> */
|
||||
:not(pre) > code {
|
||||
color: #aaa4a0;
|
||||
background-color: var(--inline-code-bg-color);
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
font-size: var(--code-block-font-size);
|
||||
}
|
||||
|
||||
#jsonTableContainer {
|
||||
max-width: 150%;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: var(--table-font-color);
|
||||
margin-bottom: var(--article-margin);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--table-header-bg);
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
font-size: var(--table-header-font-size);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#scrollable {
|
||||
max-width: 90px;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--table-even-row-bg-color);
|
||||
font-size: var(--table-row-font-size);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--table-odd-row-bg-color);
|
||||
font-size: var(--table-row-font-size);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/* Tables */
|
||||
#jsonTableContainer {
|
||||
max-width: 150%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: var(--table-font-color);
|
||||
margin-bottom: var(--article-margin);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--table-header-bg);
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
font-size: var(--table-header-font-size);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#scrollable {
|
||||
max-width: 90px;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--table-even-row-bg-color);
|
||||
font-size: var(--table-row-font-size);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--table-odd-row-bg-color);
|
||||
font-size: var(--table-row-font-size);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/* table of contents */
|
||||
#tocWrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#TableOfContents li::marker {
|
||||
content: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#TableOfContents li {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#TableOfContents a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#TableOfContents ul {
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -124,26 +124,4 @@ function initEchart(dataArr) {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
const checkboxLog = document.body.querySelector("#checkbox-log");
|
||||
|
||||
checkboxLog.addEventListener("change", (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
myChart.setOption({
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
type: isChecked ? "log" : "value",
|
||||
name: "Price (USD)",
|
||||
nameLocation: "middle",
|
||||
splitNumber: isChecked ? 5 : 5,
|
||||
nameTextStyle: yaxisTextStyle,
|
||||
position: "left",
|
||||
alignTicks: true,
|
||||
axisLine: axisLine,
|
||||
axisLabel: xaxisLabel,
|
||||
},
|
||||
],
|
||||
dataZoom: dataZoom((start = isChecked ? 0 : 90)),
|
||||
});
|
||||
});
|
||||
fetchDataForChart();
|
||||
|
|
|
|||
Loading…
Reference in New Issue