Public
Edited
Oct 14, 2024
3 forks
3 stars
BEESWARM USING FDRCE LAYOUTBUBBLE CHART ANIMATEDSTACKED BAR CHART ANIMATEDSANKEY INTERACTIVESMALL MULTIPLE | SLIDERSPOTIFY | GENRESTHREATENED SPECIES - BIRDS 2020 ANIMATEDGLOBAL TEMPERATURES ANOMALIESGLOBAL TEMPERATURE MONTHLY, 1880-2022 D3.JSBARCODE PLOTSPOTIFY | ARTISTS | D3.js | Step 3POPULATION MAPANIMATED SCATTER PLOTCOVID | MOBILITY DATA ON COUNTRIESAIRBNB BARCELONA | MAPFORCE DIRECTED LAYOUTFROM SCATTER TO HEXBIN
GLOBAL TEMPERATURES DAILY 1979 - 2024 | D3.JS
style = html`<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;1,100;1,300&display=swap");
body {
font-family: 'Montserrat Alternates', sans-serif;
font-weight:400;
font-size:13px;
background-color:white;
}
svg {
background-color:white;
}
/*Defining text stylings*/
h1 {
margin-top: 50;
font-size: 1.3rem;
color:#f20666;
margin-bottom: 50;
font-weight:600;
}
h2 {
margin-top: 7px;
font-size: 0.7rem;
margin-bottom: 5px;
color:#f20666;
font-weight:500;
}
h3 {
margin-top: 5px;
font-size: 1rem;
margin-bottom: 10px;
color:#f20666;
font-weight:400;
}
h4 {
margin-top: 5px;
font-size: 0.9rem;
margin-bottom: 5px;
color:#f20666;
font-weight:300;
}
h5 {
margin-top: 5px;
font-size: 1rem;
margin-bottom: 0px;
color:#f20666;
font-weight:400;
}
a:link, a:active, a:visited {
margin-top:0.5px;
color:#662e9b;
font-size:12px;
font-weight:500;
}
a:hover {
margin-top:0.5px;
color:#662e9b;
font-size:12px;
font-weight:500;
}
/*Defining axis stylings*/
.x-axis text {
font-family:'Montserrat Alternates', sans-serif;
font-weight:400;
font-size:10px;
opacity:1;
fill:black;
}
.y-axis text {
font-family:'Montserrat Alternates', sans-serif;
font-weight:300;
font-size:8px;
opacity:1;
fill:black;
}
.x-axis path {
fill:none;
stroke-width:0;
stroke-opacity:1;
stroke:white;
}
.y-axis path {
fill:none;
stroke-width:0;
stroke-opacity:1;
stroke:#0D0D0D;
}
.y-axis line {
fill:none;
stroke-width:0;
stroke-opacity:1;
stroke:#0D0D0D;
stroke-dasharray:0;
}
.x-axis line {
fill:none;
stroke-width:0;
stroke-opacity:1;
stroke:black;
stroke-dasharray:0;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
