mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
e8e42a7c95
commit
a856fd61b4
@ -1,125 +1,112 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let svg;
|
||||
|
||||
import { scaleLinear } from 'd3-scale';
|
||||
|
||||
var xScale = scaleLinear();
|
||||
var yScale = scaleLinear();
|
||||
|
||||
export let xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
|
||||
export let width = 500;
|
||||
export let padding = { top: 20, right: 15, bottom: 20, left: 25 };
|
||||
export let height = 200;
|
||||
export let yTicks = [0, 5, 10, 15, 20];
|
||||
export let points;
|
||||
export let tick;
|
||||
|
||||
function formatMobile(tick) {
|
||||
return "'" + tick % 100;
|
||||
}
|
||||
const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
|
||||
const yTicks = [0, 5, 10, 15, 20];
|
||||
const padding = { top: 20, right: 15, bottom: 20, left: 25 };
|
||||
|
||||
function barWidth() {
|
||||
var innerWidth = width - (padding.left + padding.right);
|
||||
return innerWidth / xTicks.length;
|
||||
}
|
||||
let width = 500;
|
||||
let height = 200;
|
||||
let barWidth;
|
||||
let xScale;
|
||||
let yScale;
|
||||
|
||||
function xScale() {
|
||||
return xScale()
|
||||
.domain([0, xTicks.length])
|
||||
.range([padding.left, width - padding.right]);
|
||||
}
|
||||
|
||||
function yScale() {
|
||||
return yScale()
|
||||
.domain([0, Math.max.apply(null, yTicks)])
|
||||
.range([height - padding.bottom, padding.top]);
|
||||
function formatMobile(tick) {
|
||||
return "'" + tick % 100;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
resize();
|
||||
});
|
||||
$: xScale = scaleLinear()
|
||||
.domain([0, xTicks.length])
|
||||
.range([padding.left, width - padding.right]);
|
||||
|
||||
// [svelte-upgrade suggestion]
|
||||
// review these functions and remove unnecessary 'export' keywords
|
||||
export function resize() {
|
||||
var bcr = svg.getBoundingClientRect();
|
||||
$: yScale = scaleLinear()
|
||||
.domain([0, Math.max.apply(null, yTicks)])
|
||||
.range([height - padding.bottom, padding.top]);
|
||||
|
||||
width = bcr.right - bcr.left, height = bcr.bottom - bcr.top;
|
||||
$: {
|
||||
const innerWidth = width - (padding.left + padding.right);
|
||||
barWidth = innerWidth / xTicks.length;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize='{resize}'/>
|
||||
|
||||
<div class='chart'>
|
||||
<h2>US birthrate by year</h2>
|
||||
<svg ref:svg>
|
||||
<!-- y axis -->
|
||||
<g class='axis y-axis' transform='translate(0,{padding.top})'>
|
||||
{#each yTicks as tick}
|
||||
<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick) - padding.bottom})'>
|
||||
<line x2='100%'></line>
|
||||
<text y='-4'>{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<!-- x axis -->
|
||||
<g class='axis x-axis'>
|
||||
{#each points as point, i}
|
||||
<g class='tick tick-{tick}' transform='translate({xScale()(i)},{height})'>
|
||||
<text x='{barWidth()/2}' y='-4'>{width > 380 ? point.year : formatMobile(point.year)}</text>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<g class='bars'>
|
||||
{#each points as point, i}
|
||||
<rect
|
||||
x='{xScale()(i) + 2}'
|
||||
y='{yScale()(point.birthrate)}'
|
||||
width='{ barWidth() - 4 }'
|
||||
height='{ height - padding.bottom - yScale()(point.birthrate) }'
|
||||
></rect>
|
||||
{/each}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.chart {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.tick {
|
||||
font-family: Helvetica, Arial;
|
||||
font-size: .725em;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.tick line {
|
||||
stroke: #e2e2e2;
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
|
||||
.tick text {
|
||||
fill: #ccc;
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.tick.tick-0 line {
|
||||
stroke-dasharray: 0;
|
||||
}
|
||||
|
||||
.x-axis .tick text {
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.bars rect {
|
||||
fill: #a11;
|
||||
stroke: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<div class="chart">
|
||||
<h2>US birthrate by year {width}/{height}</h2>
|
||||
<svg bind:clientWidth={width} bind:clientHeight={height}>
|
||||
<!-- y axis -->
|
||||
<g class="axis y-axis" transform="translate(0,{padding.top})">
|
||||
{#each yTicks as tick}
|
||||
<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
|
||||
<line x2="100%"></line>
|
||||
<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<!-- x axis -->
|
||||
<g class="axis x-axis">
|
||||
{#each points as point, i}
|
||||
<g class="tick" transform="translate({xScale(i)},{height})">
|
||||
<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<g class='bars'>
|
||||
{#each points as point, i}
|
||||
<rect
|
||||
x="{xScale(i) + 2}"
|
||||
y="{yScale(point.birthrate)}"
|
||||
width="{barWidth - 4}"
|
||||
height="{height - padding.bottom - yScale(point.birthrate)}"
|
||||
></rect>
|
||||
{/each}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
Loading…
Reference in new issue