70 строки
1.7 KiB
Svelte
70 строки
1.7 KiB
Svelte
<script>
|
|
export let width
|
|
export let margins
|
|
export let radiusScale
|
|
export let opacityScale
|
|
|
|
$: minOpacity = opacityScale.domain()[0]
|
|
$: maxOpacity = opacityScale.domain()[1]
|
|
$: opacityRange = maxOpacity - minOpacity
|
|
$: opacities = [
|
|
minOpacity,
|
|
minOpacity + opacityRange/5,
|
|
minOpacity + opacityRange*2/5,
|
|
minOpacity + opacityRange*3/5,
|
|
minOpacity + opacityRange*4/5,
|
|
maxOpacity]
|
|
|
|
let height = 60
|
|
</script>
|
|
|
|
<svg {width} height={height}>
|
|
<g transform={`translate(${margins.left},${0})`}>
|
|
<text
|
|
x={72}
|
|
y={12}
|
|
text-anchor={'middle'}
|
|
>Breakout Scale</text>
|
|
{#each radiusScale.domain() as rad,i}
|
|
<circle
|
|
cx={12 - radiusScale(rad) + i*30}
|
|
cy={32}
|
|
r={radiusScale(rad)}
|
|
fill={'#555555'}
|
|
></circle>
|
|
{/each}
|
|
<text
|
|
x={(width - margins.left - margins.right)/2}
|
|
y={12}
|
|
text-anchor={'middle'}
|
|
>Offline Mobilization</text>
|
|
<circle
|
|
cx={(width - margins.left - margins.right)/2}
|
|
cy={32}
|
|
r={12}
|
|
fill={'none'}
|
|
stroke={'#000000'}
|
|
stroke-width={1.5}
|
|
></circle>
|
|
<circle
|
|
cx={(width - margins.left - margins.right)/2}
|
|
cy={32}
|
|
r={9}
|
|
fill={'#555555'}
|
|
></circle>
|
|
<text
|
|
x={width - margins.left - margins.right - 72}
|
|
y={12}
|
|
text-anchor={'middle'}
|
|
>Attribution Score</text>
|
|
{#each opacities as op,i}
|
|
<circle
|
|
cx={width - margins.left - margins.right - 150 + i*30}
|
|
cy={32}
|
|
r={9}
|
|
fill={'#555555'}
|
|
opacity={opacityScale(op)}
|
|
></circle>
|
|
{/each}
|
|
</g>
|
|
</svg> |