viewof currentTime = html`<input type="number" value="0" id="currentTime" class="currentTime" name="currentTime">`
currentTime
hrData = d3.csv('https://gist.githubusercontent.com/darenwillman/51562e4a7573ec1649cf48316b7556fa/raw/3fa12cbb950e432d6abe342e272c99d2e6e622c8/hrs.csv')
moment = require('moment');
lodash = require('lodash');
// currentTime = 0
// window.currentTime = 9999
// window.currentTime = 50000
// performance.now = () => currentTime1
tickDuration = 350;
top_n = 10;
namePadding = 145
html`<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300" rel="stylesheet">`
html`<style>
text{
font-size: 16px;
font-family: Open Sans, sans-serif;
}
text.title{
font-size: 24px;
font-weight: 500;
}
text.subTitle{
font-weight: 500;
fill: #777777;
}
text.caption{
font-weight: 400;
font-size: 14px;
fill: #777777;
}
text.label{
font-weight: 600;
}
text.yearText{
font-size: 32px;
font-weight: 700;
opacity: 0.25;
}
text.yearLabel {
font-size: 24px;
font-weight: 700;
opacity: 0.25;
}
.tick text {
fill: #777777;
}
.xAxis .tick:nth-child(2) text {
text-anchor: start;
}
.tick line {
shape-rendering: CrispEdges;
stroke: #dddddd;
}
.tick line.origin{
stroke: #aaaaaa;
}
path.domain{
display: none;
}
.img {
height: 20px;
}
</style>`
timeTrick = {
if (document.URL.includes('recording')){
// var currentTime = 0
// performance.currentTime = 0;
performance.now = () => currentTime;
Date.now = () => currentTime;
}
}
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.
