<script>
import { LayerCake, Html } from 'layercake';
import { scaleBand, scaleOrdinal } from 'd3-scale';
import ClevelandDotPlot from './_components/ClevelandDotPlot.percent-range.html.svelte';
import AxisX from './_components/AxisX.html.svelte';
import AxisY from './_components/AxisY.html.svelte';
import data from './_data/fruitOrdinal.csv';
const yKey = 'year';
const xKey = Object.keys(data[0]).filter(d => d !== yKey);
const seriesColors = ['#f0c', '#00bbff', '#00e047', '#ff7a33'];
data.forEach(d => {
xKey.forEach(name => {
d[name] = +d[name];
});
});
</script>
<style>
.chart-container {
width: 100%;
height: 250px;
}
</style>
<div class="chart-container">
<LayerCake
ssr={true}
percentRange={true}
padding={{ right: 10, bottom: 20, left: 30 }}
x={xKey}
y={yKey}
yScale={scaleBand().paddingInner(0.05).round(true)}
xDomain={[0, null]}
xPadding={[2, 0]}
zScale={scaleOrdinal()}
zDomain={xKey}
zRange={seriesColors}
data={data}
>
<Html>
<AxisX/>
<AxisY
gridlines={false}
/>
<ClevelandDotPlot/>
</Html>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
const { data, xGet, yGet, zScale, yScale, config } = getContext('LayerCake');
export let r = 5;
$: midHeight = $yScale.bandwidth() / 2;
</script>
<div class="dot-plot">
{#each $data as row}
{@const scaledYValue = $yGet(row)}
{@const scaledXValues = $xGet(row)}
<div class="dot-row">
<div
class="line"
style="
left: {Math.min(...scaledXValues)}%;
top: {scaledYValue + midHeight}%;
right: {100 - Math.max(...scaledXValues)}%;
"
></div>
{#each scaledXValues as circleX, i}
<div
class="circle"
style="
left: {circleX}%;
top: {scaledYValue + midHeight}%;
width: {r * 2}px;
height: {r * 2}px;
background: {$zScale($config.x[i])};
"
></div>
{/each}
</div>
{/each}
</div>
<style>
.line {
position: absolute;
border-bottom: 1px solid #000;
}
.circle {
position: absolute;
border-radius: 50%;
border: 1px solid #000;
stroke: #000;
transform: translate(-50%, -50%);
}
</style>
<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>
year,apples,bananas,cherries,dates
2019,3840,1920,960,400
2018,1600,1440,960,400
2017,820,1000,640,400
2016,820,560,720,400