<script>
import { LayerCake, Svg } from 'layercake';
import { scaleBand } from 'd3-scale';
import Bar from './components/Bar.svelte';
import AxisX from './components/AxisX.svelte';
import AxisY from './components/AxisY.svelte';
import data from './data/groups.csv';
const xKey = 'value';
const yKey = 'year';
data.forEach(d => {
d[xKey] = +d[xKey];
});
</script>
<style>
.chart-container {
width: 100%;
height: 100%;
}
</style>
<div class="chart-container">
<LayerCake
padding={{ top: 0, bottom: 20, left: 30 }}
x={xKey}
y={yKey}
yScale={scaleBand().paddingInner([0.05]).round(true)}
yDomain={['1979', '1980', '1981', '1982', '1983']}
xDomain={[0, null]}
data={data}
>
<Svg>
<AxisX
gridlines={true}
baseline={true}
snapTicks={true}
/>
<AxisY
gridlines={false}
/>
<Bar/>
</Svg>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
export let fill = '#00bbff';
</script>
<g class="bar-group">
{#each $data as d, i}
<rect
class='group-rect'
data-id="{i}"
x="{$xScale.range()[0]}"
y="{$yGet(d)}"
height={$yScale.bandwidth()}
width="{$xGet(d)}"
{fill}
></rect>
{/each}
</g>
<script>
import { getContext } from 'svelte';
const { width, height, xScale, yScale, yRange } = getContext('LayerCake');
export let gridlines = true;
export let formatTick = d => d;
export let baseline = false;
export let snapTicks = false;
export let ticks = undefined;
export let xTick = undefined;
export let yTick = 16;
export let dxTick = 0;
export let dyTick = 0;
$: isBandwidth = typeof $xScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$xScale.domain() :
typeof ticks === 'function' ?
ticks($xScale.ticks()) :
$xScale.ticks(ticks);
function textAnchor(i) {
if (snapTicks === true) {
if (i === 0) {
return 'start';
}
if (i === tickVals.length - 1) {
return 'end';
}
}
return 'middle';
}
</script>
<g class='axis x-axis'>
{#each tickVals as tick, i}
<g class='tick tick-{ tick }' transform='translate({$xScale(tick)},{$yRange[0]})'>
{#if gridlines !== false}
<line y1='{$height * -1}' y2='0' x1='0' x2='0'></line>
{/if}
<text
x="{xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0 }"
y='{yTick}'
dx='{dxTick}'
dy='{dyTick}'
text-anchor='{textAnchor(i)}'>{formatTick(tick)}</text>
</g>
{/each}
{#if baseline === true}
<line class="baseline" y1='{$height + 0.5}' y2='{$height + 0.5}' x1='0' x2='{$width}'></line>
{/if}
</g>
<style>
.tick {
font-size: .725em;
font-weight: 200;
}
line,
.tick line {
stroke: #aaa;
stroke-dasharray: 2;
}
.tick text {
fill: #666;
}
.baseline {
stroke-dasharray: 0;
}
</style>
<script>
import { getContext } from 'svelte';
const { padding, xRange, xScale, yScale } = getContext('LayerCake');
export let ticks = 4;
export let gridlines = true;
export let formatTick = d => d;
export let xTick = 0;
export let yTick = 0;
export let dxTick = 0;
export let dyTick = -4;
export let textAnchor = 'start';
$: isBandwidth = typeof $yScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$yScale.domain() :
typeof ticks === 'function' ?
ticks($yScale.ticks()) :
$yScale.ticks(ticks);
</script>
<g class='axis y-axis' transform='translate({-$padding.left}, 0)'>
{#each tickVals as tick, i}
<g class='tick tick-{tick}' transform='translate({$xRange[0] + (isBandwidth ? $padding.left : 0)}, {$yScale(tick)})'>
{#if gridlines !== false}
<line
x2='100%'
y1={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
y2={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
></line>
{/if}
<text
x='{xTick}'
y='{yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}'
dx='{isBandwidth ? -5 : dxTick}'
dy='{isBandwidth ? 4 : dyTick}'
style="text-anchor:{isBandwidth ? 'end' : textAnchor};"
>{formatTick(tick)}</text>
</g>
{/each}
</g>
<style>
.tick {
font-size: .725em;
font-weight: 200;
}
.tick line {
stroke: #aaa;
stroke-dasharray: 2;
}
.tick text {
fill: #666;
}
.tick.tick-0 line {
stroke-dasharray: 0;
}
</style>
year,value
1979,2
1980,3
1981,5
1982,8
1983,18