<script>
import { LayerCake, ScaledSvg, Html, calcExtents } from 'layercake';
import { timeDay } from 'd3-time';
import { scaleBand, scaleTime } from 'd3-scale';
import AxisX from './_components/AxisX.html.svelte';
import AxisY from './_components/AxisY.html.svelte';
import Scatter from './_components/Scatter.html.svelte';
import data from './_data/days.csv';
const xKey = 'seconds';
const yKey = 'day';
const r = 4;
const padding = 2;
const daysTransformed = data.map(d => {
const parts = d.timestring.split('T');
const time = parts[1].replace('Z', '').split(':').map(q => +q);
d[xKey] = time[0] * 60 * 60 + time[1] * 60 + time[2];
d[yKey] = parts[0];
return d;
});
const extents = calcExtents(daysTransformed, {
x: d => d.timestring
});
const minDate = extents.x[0].toString().split('T')[0].split('-').map(d => +d);
const maxDate = extents.x[1].toString().split('T')[0].split('-').map(d => +d);
const allDays = timeDay.range(new Date(Date.UTC(minDate[0], minDate[1] - 1, minDate[2])), new Date(Date.UTC(maxDate[0], maxDate[1] - 1, maxDate[2] + 1)))
.map(d => d.toISOString().split('T')[0]).sort();
</script>
<style>
.chart-container {
width: 100%;
height: 250px;
}
</style>
<div class="chart-container">
<LayerCake
ssr={true}
percentRange={true}
padding={{ top: 0, right: 15, bottom: 20, left: 75 }}
x={xKey}
y={yKey}
xDomain={[0, 24 * 60 * 60]}
yDomain={allDays}
xScale={scaleTime()}
yScale={scaleBand().paddingInner(0.05).round(true)}
xPadding={[padding, padding]}
data={daysTransformed}
>
<Html>
<AxisX
ticks={[0, 4, 8, 12, 16, 20, 24].map(d => d * 60 * 60)}
formatTick={d => `${Math.floor(d / 60 / 60)}:00`}
/>
<AxisY/>
<Scatter
{r}
fill={'rgba(255, 204, 0, 0.75)'}
strokeWidth={0}
/>
</Html>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
const { xScale } = getContext('LayerCake');
export let gridlines = true;
export let tickMarks = false;
export let baseline = false;
export let snapTicks = false;
export let formatTick = d => d;
export let ticks = undefined;
export let yTick = 7;
$: isBandwidth = typeof $xScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$xScale.domain() :
typeof ticks === 'function' ?
ticks($xScale.ticks()) :
$xScale.ticks(ticks);
</script>
<div class='axis x-axis' class:snapTicks>
{#each tickVals as tick, i (tick)}
{#if gridlines !== false}
<div class="gridline" style='left:{$xScale(tick)}%;top: 0px;bottom: 0;'></div>
{/if}
{#if tickMarks === true}
<div class="tick-mark" style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;height:6px;bottom: -6px;'></div>
{/if}
<div
class='tick tick-{ i }'
style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;top:100%;'>
<div
class="text"
style='top:{(yTick)}px;'>{formatTick(tick)}</div>
</div>
{/each}
{#if baseline === true}
<div class="baseline" style='top: 100%;width: 100%;'></div>
{/if}
</div>
<style>
.axis,
.tick,
.tick-mark,
.gridline,
.baseline {
position: absolute;
}
.axis {
width: 100%;
height: 100%;
}
.tick {
font-size: .725em;
font-weight: 200;
}
.gridline {
border-left: 1px dashed #aaa;
}
.tick-mark {
border-left: 1px solid #aaa;
}
.baseline {
border-top: 1px solid #aaa;
}
.tick .text {
color: #666;
position: relative;
white-space: nowrap;
transform: translateX(-50%);
}
.axis.snapTicks .tick:last-child {
transform: translateX(-40%);
}
.axis.snapTicks .tick.tick-0 {
transform: translateX(40%);
}
</style>
<script>
import { getContext } from 'svelte';
const { padding, xRange, yScale } = getContext('LayerCake');
export let gridlines = true;
export let tickMarks = false;
export let baseline = false;
export let formatTick = d => d;
export let ticks = 4;
export let xTick = -4;
export let yTick = -1;
$: isBandwidth = typeof $yScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$yScale.domain() :
typeof ticks === 'function' ?
ticks($yScale.ticks()) :
$yScale.ticks(ticks);
</script>
<div class='axis y-axis' style='transform:translate(-{$padding.left}px, 0)'>
{#each tickVals as tick, i (tick)}
<div class='tick tick-{i}' style='top:{$yScale(tick) + (isBandwidth ? $yScale.bandwidth () / 2 : 0)}%;left:{$xRange[0]}%;'>
{#if gridlines !== false}
<div class="gridline" style='top:0;left:{isBandwidth ? $padding.left : 0}px;right:-{$padding.left + $padding.right}px;'></div>
{/if}
{#if baseline !== false && i === 0}
<div class="gridline baseline" style='top:0;left:{isBandwidth ? $padding.left : 0};right:-{$padding.left + $padding.right}px;'></div>
{/if}
{#if tickMarks === true}
<div class="tick-mark" style='top:0;left:{isBandwidth ? $padding.left - 6 : 0}px;width:6px;'></div>
{/if}
<div
class="text"
style='
top:{yTick}px;
left:{isBandwidth ? ($padding.left + xTick - 4) : 0}px;
transform: translate({isBandwidth ? '-100%' : 0}, {isBandwidth ? -50 - Math.floor($yScale.bandwidth() / -2) : '-100'}%);
'
>{formatTick(tick)}</div>
</div>
{/each}
</div>
<style>
.axis,
.tick,
.tick-mark,
.gridline,
.baseline,
.text {
position: absolute;
}
.axis {
width: 100%;
height: 100%;
}
.tick {
font-size: 12px;
width: 100%;
font-weight: 100;
}
.gridline {
border-top: 1px dashed #aaa;
}
.tick-mark {
border-top: 1px solid #aaa;
}
.baseline.gridline {
border-top-style: solid;
}
.tick .text {
color: #666;
}
</style>
<script>
import { getContext } from 'svelte';
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
export let r = 5;
export let fill = '#0cf';
export let stroke = '#000';
export let strokeWidth = 1;
</script>
<div class="scatter-group">
{#each $data as d}
<div
class="circle"
style="
left: {$xGet(d) + ($xScale.bandwidth ? $xScale.bandwidth() / 2 : 0)}%;
top: {$yGet(d) + ($yScale.bandwidth ? $yScale.bandwidth() / 2 : 0)}%;
width: {r * 2}px;
height: {r * 2}px;
background-color: {fill};
border: {strokeWidth}px solid {stroke};
"
/>
{/each}
</div>
<style>
.circle {
position: absolute;
transform: translate(-50%, -50%);
border-radius: 50%;
}
</style>
timestring
2018-07-22T22:25:55Z
2018-07-22T19:35:29Z
2018-07-22T18:54:42Z
2018-07-22T02:05:59Z
2018-07-22T00:55:02Z
2018-07-22T00:53:00Z
2018-07-22T23:32:37Z
2018-07-22T17:52:55Z
2018-07-22T17:52:01Z
2018-07-22T17:32:21Z
2018-07-22T16:38:22Z
2018-07-22T16:38:20Z
2018-07-22T21:07:28Z
2018-07-22T01:36:47Z
2018-07-22T01:00:04Z
2018-07-22T20:15:35Z
2018-07-23T03:05:05Z
2018-07-23T02:56:18Z
2018-07-23T02:11:53Z
2018-07-23T02:08:49Z
2018-07-23T02:02:14Z
2018-07-23T04:13:29Z
2018-07-23T03:24:58Z
2018-07-23T03:23:55Z
2018-07-23T03:22:02Z
2018-07-23T18:37:05Z
2018-07-23T01:34:48Z
2018-07-23T01:11:38Z
2018-07-23T01:02:25Z
2018-07-23T23:32:07Z
2018-07-23T18:26:04Z
2018-07-24T18:25:35Z
2018-07-24T02:56:28Z
2018-07-24T16:33:57Z
2018-07-24T15:52:16Z
2018-07-24T20:31:12Z
2018-07-24T20:27:11Z
2018-07-24T14:17:18Z
2018-07-24T03:49:28Z
2018-07-24T03:42:33Z
2018-07-24T03:20:45Z
2018-07-24T01:47:25Z
2018-07-24T01:26:16Z
2018-07-24T01:16:55Z
2018-07-25T00:50:15Z
2018-07-25T19:16:21Z
2018-07-25T02:38:15Z
2018-07-25T01:03:55Z
2018-07-25T01:00:55Z
2018-07-25T00:59:31Z
2018-07-25T19:06:36Z
2018-07-25T19:03:18Z
2018-07-25T01:05:50Z
2018-07-25T23:43:32Z
2018-07-25T17:39:53Z
2018-07-25T17:37:15Z
2018-07-25T15:50:12Z
2018-07-25T03:47:16Z
2018-07-25T03:06:21Z
2018-07-25T02:59:34Z
2018-07-25T20:53:53Z
2018-07-25T01:37:58Z
2018-07-25T01:32:23Z
2018-07-25T01:30:09Z
2018-07-25T17:03:39Z
2018-07-25T16:00:39Z
2018-07-25T15:59:44Z
2018-07-25T22:29:55Z
2018-07-25T02:59:41Z
2018-07-25T02:58:36Z
2018-07-25T02:56:41Z
2018-07-25T02:21:56Z
2018-07-25T02:20:27Z
2018-07-25T02:15:25Z
2018-07-25T02:22:38Z
2018-07-25T02:19:25Z
2018-07-25T22:48:50Z
2018-07-25T06:52:20Z
2018-07-25T06:45:09Z
2018-07-25T21:18:11Z
2018-07-25T17:35:37Z
2018-07-25T01:52:56Z
2018-07-25T01:07:36Z
2018-07-25T01:05:37Z
2018-07-25T01:05:27Z
2018-07-25T17:24:44Z
2018-07-25T15:53:26Z
2018-07-25T15:32:59Z
2018-07-25T17:33:38Z
2018-07-25T15:28:30Z
2018-07-25T15:16:40Z
2018-07-28T15:07:48Z
2018-07-28T13:56:38Z
2018-07-28T04:46:00Z
2018-07-28T04:19:46Z
2018-07-28T04:18:59Z
2018-07-28T04:14:41Z
2018-07-28T03:54:01Z
2018-07-28T03:53:10Z
2018-07-28T02:28:02Z
2018-07-28T17:41:43Z
2018-07-28T04:42:10Z
2018-07-28T04:40:23Z
2018-07-28T04:40:10Z
2018-07-28T01:31:38Z
2018-07-28T00:23:02Z
2018-07-28T18:17:10Z
2018-07-28T18:08:21Z
2018-07-28T15:29:46Z
2018-07-28T15:15:33Z
2018-07-28T04:54:39Z
2018-07-28T04:27:48Z
2018-07-28T04:24:37Z
2018-07-28T04:08:45Z
2018-07-28T03:53:50Z
2018-07-28T03:42:23Z
2018-07-28T19:03:27Z
2018-07-28T00:32:39Z
2018-07-28T00:32:32Z
2018-07-28T02:57:20Z
2018-07-28T02:54:40Z
2018-07-28T04:28:23Z
2018-07-28T02:19:41Z
2018-07-28T00:50:51Z
2018-07-28T00:40:52Z
2018-07-28T21:54:06Z
2018-07-28T21:53:09Z
2018-07-28T19:09:30Z
2018-07-28T18:55:04Z
2018-07-28T18:51:44Z
2018-07-28T17:24:28Z
2018-07-28T02:31:18Z
2018-07-28T04:20:20Z
2018-07-28T04:19:13Z
2018-07-28T04:16:31Z