spencermountain / somehow

a number of Svelte infographics

somehow

Svelte infographics components

_{by Spencer Kelly}

a collection of Svelte components that generate infographics, in a similar style.

These were built for creating graphics on thensome.how, but may be useful to others, perhaps just for copy+pasting.

Responsive:

• automatically set scales from data (when possible)
• full-width of parent
• vertically + horizontally centered

Shared look

• HTML over SVG, whenever possible
• re-used color-schemes from spencer-color

Same setup

• broken into declarative Components, whenever possible
• d3 sometimes (whenever possible)
• shared rollup/npm config

somehow-calendar

repo

<script>
  import { Month, Day } from './src'
</script>

<Month date="march 2012">
  <Day date="march 28th" color="blue" />
</Calendar>

demo

somehow-keyboard

repo

<script>
  import { Keyboard, Key } from './src'
</script>

<Keyboard>
  <Key key="8" fill="red" />
</Keyboard>

demo

somehow-timeline

repo

<script>
  import { Timeline, Column, Line } from 'somehow-timeline'
</script>
<Timeline start="Jan 1 2020" end="Dec 30 2020" height="500">
  <Column width="75">
    <Line start="January 1 2020" end="Feb 20 2020" color="pink" width="15px" dotted="{true}" label="Before" />
    <Line start="Feb 20 2020" end="November 11 2020" width="15px" dotted="{true}" color="#6699cc" label="Middle" />
    <Line start="November 11 2020" end="December 20 2020" width="15px" color="fire" label="After" />
  </Column>
</Timeline>

demo

somehow-barchart

repo

<script>
  import { Horizontal, Bar } from 'somehow-barchart'
</script>
<Horizontal>
  <Bar color="blue" value="19" />
  <Bar color="red" value="5" />
  <Bar color="green" value="10" label="green" />
</Horizontal>

demo

somehow-year

repo

<script>
  import { Year, Day } from './src'
</script>

<Year date="2020">
  <Day date="march 28th" color="blue" />
</Year>
<Year date="2021">
  <Day date="march 28th" color="blue" />
</Year>

demo

somehow-circle

repo

<script>
  import { Round, Arc, Circle, Line, Label } from 'somehow-circle'
</script>

<Round rotate="0" margin="10">
  <Arc from="-45" to="45" color="blue" width="8" />
  <Arc from="-10" to="-5" color="red" width="8" />
  <Circle radius="73" />
  <Line length="70" angle="30" />
  <label angle="32" radius="68" text="30°" color="grey" size="8" />
</Round>

demo

somehow-maps

repo

<script>
  import { Globe, Line, Graticule, Dot, Latitude } from 'somehow-map'
</script>

<Globe rotate={30} tilt={-10}>
  <Graticule />
  <Countries stroke="grey" />
  <Latitude at={40} />
  <Line from="toronto" to='jamaica' />
  <Dot at={[90, 0]} color="lightblue" radius={50} />
</Globe>

demo

somehow-grid

repo

<script>
  import { Grid, Part } from 'somehow-grid'
</script>

<Grid total="500">
  <Part color="red" count="100" />
  <Part color="blue" count="100" />
</Grid>

demo

somehow-input

repo

<script>
  let number = 3
</script>
<Number
  bind:number="{index}"
  min="1"
  max="4"
  hasSlider="{false}"
  hasKeyboard="{false}"
/>

demo

somehow-slider

repo

<script>
  import { Vertical, Slider, Label } from './src'
</script>
<Vertical bind:value min="{0}" max="{200}">
  <label start="10" end="20" color="red" label="beginning" />
  <label start="20" end="180" color="blue" label="middle" />
  <label start="180" end="190" color="red" label="end" />
</Vertical>

demo

somehow-sankey

repo

<script>
  import { Sankey, Node } from 'somehow-sankey'
</script>
<Sankey height="600">
  <Col>
    <Node name="Property Taxes" to="Toronto" value="4400" color="sea" />
    <Node name="Province/Fed" to="Toronto" value="2500" color="red" />
    <Node name="TTC Fares" to="Toronto" value="1300" color="sky" />
    <Node name="Fees" to="Toronto" value="900" color="sky" />
  </Col>
  <Col>
    <Node name="Toronto" value="11600" color="blue" />
  </Col>
</Sankey>

demo

MIT