Published
Edited
Mar 10, 2021
Importers
startDate = new Date((new Date()).setDate(new Date().getDate() - (7 * 9)))
ipfsData = (await fetch(`${ipfsGetTransitionsUrl}?start_date=${startDate}`)).json()
ipfsStates = (await fetch(`${ipfsGetStatesUrl}?start_date=${startDate}`)).json()
filecoinStates = (await fetch(`${ipfsGetStatesUrl}?start_date=${startDate}`)).json()
filecoinData = (await fetch(`${filecoinGetTransitionsUrl}?start_date=${startDate}`)).json()
graphStyle = {
return html`<style>
.container {
position: relative;
height: 600px;
width: 100vw;
font-family: 'Menlo', Arial;
}
arrow {
display: block;
position: absolute;
width: 70px;
text-align: center;
transform: translateY(-50%);
font-size: 30px;
}
span {
cursor: pointer;
font-size: 16px;
}
arrow span {
display: inline-block;
position: relative;
top: -28px;
left: 2px;
}
arrow::before {
content: '';
display: block;
width: 100%;
top: 50%;
position: absolute;
transform: translateY(-50%);
height: calc(var(--thickness) * 0.5);
background: var(--color, #000);
}
arrow::after {
content: '';
position: absolute;
top: 50%;
right: -3px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: var(--thickness) solid transparent;
border-bottom: var(--thickness) solid transparent;
border-left: calc(var(--thickness) + 10px) solid var(--color, #000);
}
circle {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center; align-items: center;
border-radius: 50%;
width: 100px;
height: 100px;
border: 4px solid currentColor;
transform: translateY(-50%);
text-align: center;
font-weight: bold;
font-size: 14px;
}
self-arrow {
position: absolute;
width: 30px;
text-align: center;
transform: translateY(-50%);
font-size: 30px;
}
self-arrow span {
display: inline-block;
position: relative;
top: 16px;
left: -50px;
z-index: 2000;
}
self-arrow::before {
content: '';
display: block;
width: 100%;
top: 50%;
position: absolute;
padding-bottom: 100%;
border-top-left-radius: 12px;
border-top-right-radius: 20px;
border: calc(var(--thickness) * 0.5) solid var(--color, #000);
border-bottom: 0;
transform: rotate(-90deg) skew(0, -8deg)
}
self-arrow::after {
content: '';
position: absolute;
top: 50%;
right: -7px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: var(--thickness) solid transparent;
border-bottom: var(--thickness) solid transparent;
border-left: calc(var(--thickness) + 10px) solid var(--color, #000);
}
arrow::before,
arrow::after,
self-arrow::before,
self-arrow::after {
pointer-events: none;
z-index: -1;
}
self-arrow[reverse] span {
left: -114px; top: 26px;
}
self-arrow[reverse]::before {
transform: rotate(90deg) translate(35.5%, 123%);
padding-bottom: 28%;
}
self-arrow[reverse]::after {
right: initial;
left: 0;
transform: translateY(-50%) scaleX(-1);
}
self-arrow[large]::before {
transform: rotate(90deg) translate(20%, 74%);
padding-bottom: 40%;
}
self-arrow[large]::after {
top: 420px;
left: -2px;
}
self-arrow[large] span {
top: 230px; left: -11px;
}
arrow[positive], self-arrow[positive] {
--color: green;
}
arrow[negative], self-arrow[negative] {
--color: orangered;
}
span i {
font-style: normal;
}
span:hover .tooltip {
display: block;
}
.tooltip {
display: none;
position: absolute;
min-width: 100px;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
}
.tooltip > div {
display: flex;
flex: 1 0 auto;
white-space: nowrap;
}
i.positive, .tooltip div.positive {
color: darkgreen;
}
i.negative, .tooltip div.negative {
color: orangered;
}
self-arrow[negative] i.positive, arrow[negative] i.positive {
color: red !important;
}
self-arrow[negative] i.negative, arrow[negative] i.negative {
color: green !important;
}
.legend {
position: absolute; right: 14px; bottom: 0; font-size: 12px;
}
</style>
`
}
import {Range, Toggle} from "@observablehq/inputs"
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.
