<script>
import { LayerCake, Svg, flatten, stack } from 'layercake';
import { scaleOrdinal } from 'd3-scale';
import { format, precisionFixed } from 'd3-format';
import { timeParse, timeFormat } from 'd3-time-format';
import AxisX from './_components/AxisX.svelte';
import AxisY from './_components/AxisY.svelte';
import AreaStacked from './_components/AreaStacked.svelte';
import data from './_data/fruit.csv';
const xKey = 'month';
const yKey = [0, 1];
const zKey = 'key';
const xKeyCast = timeParse('%Y-%m-%d');
const seriesNames = Object.keys(data[0]).filter(d => d !== xKey);
const seriesColors = ['#ff00cc', '#ff7ac7', '#ffb3c0', '#ffe4b8'];
const formatTickX = timeFormat('%b. %-d')
const formatTickY = d => format(`.${precisionFixed(d)}s`)(d);
data.forEach(d => {
d[xKey] = typeof d[xKey] === 'string'
? xKeyCast(d[xKey])
: d[xKey];
seriesNames.forEach(name => {
d[name] = +d[name];
});
});
const stackedData = stack(data, seriesNames);
</script>
<style>
.chart-container {
width: 100%;
height: 250px;
}
</style>
<div class="chart-container">
<LayerCake
padding={{ top: 0, right: 0, bottom: 20, left: 17 }}
x={d => d.data[xKey]}
y={yKey}
z={zKey}
zScale={scaleOrdinal()}
zDomain={seriesNames}
zRange={seriesColors}
flatData={flatten(stackedData)}
data={stackedData}
>
<Svg>
<AxisX
formatTick={formatTickX}
tickMarks={true}
/>
<AxisY
formatTick={formatTickY}
/>
<AreaStacked/>
</Svg>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
const { width, height, xScale, yRange } = 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 xTick = 0;
export let yTick = 16;
$: 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" class:snapTicks>
{#each tickVals as tick, i (tick)}
<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
{#if gridlines !== false}
<line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
{/if}
{#if tickMarks === true}
<line
class="tick-mark"
y1={0}
y2={6}
x1={isBandwidth ? $xScale.bandwidth() / 2 : 0}
x2={isBandwidth ? $xScale.bandwidth() / 2 : 0}
/>
{/if}
<text
x={isBandwidth ? ($xScale.bandwidth() / 2 + xTick) : xTick}
y={yTick}
dx=""
dy=""
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} />
{/if}
</g>
<style>
.tick {
font-size: 0.725em;
font-weight: 200;
}
line,
.tick line {
stroke: #aaa;
stroke-dasharray: 2;
}
.tick text {
fill: #666;
}
.tick .tick-mark,
.baseline {
stroke-dasharray: 0;
}
.axis.snapTicks .tick:last-child text {
transform: translateX(3px);
}
.axis.snapTicks .tick.tick-0 text {
transform: translateX(-3px);
}
</style>
<script>
import { getContext } from 'svelte';
const { padding, xRange, yScale } = getContext('LayerCake');
export let gridlines = true;
export let tickMarks = false;
export let formatTick = d => d;
export let ticks = 4;
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 (tick)}
<g class='tick tick-{tick}' transform='translate({$xRange[0] + (isBandwidth ? $padding.left : 0)}, {$yScale(tick)})'>
{#if gridlines !== false}
<line
class="gridline"
x2='100%'
y1={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
y2={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
></line>
{/if}
{#if tickMarks === true}
<line
class='tick-mark'
x1='0'
x2='{isBandwidth ? -6 : 6}'
y1={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
y2={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
></line>
{/if}
<text
x='{xTick}'
y='{(isBandwidth ? ($yScale.bandwidth() / 2) + yTick : yTick)}'
dx='{isBandwidth ? -9 : 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;
}
.tick .gridline {
stroke-dasharray: 2;
}
.tick text {
fill: #666;
}
.tick.tick-0 line {
stroke-dasharray: 0;
}
</style>
<script>
import { getContext } from 'svelte';
import { area } from 'd3-shape';
const { data, xGet, yScale, zGet } = getContext('LayerCake');
$: areaGen = area()
.x(d => $xGet(d))
.y0(d => $yScale(d[0]))
.y1(d => $yScale(d[1]));
</script>
<g class="area-group">
{#each $data as d}
<path
class='path-area'
d='{areaGen(d)}'
fill='{$zGet(d)}'
></path>
{/each}
</g>
month,apples,bananas,cherries,dates
2015-04-01,3840,1920,960,400
2015-03-01,1600,1440,960,400
2015-02-01,640,960,640,400
2015-01-01,320,480,640,400