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
<script>
import { Month, Day } from './src'
</script>
<Month date="march 2012">
<Day date="march 28th" color="blue" />
</Calendar>
somehow-keyboard
<script>
import { Keyboard, Key } from './src'
</script>
<Keyboard>
<Key key="8" fill="red" />
</Keyboard>
somehow-timeline
<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>
somehow-barchart
<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>
somehow-year
<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>
somehow-circle
<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>
somehow-maps
<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>
somehow-grid
<script>
import { Grid, Part } from 'somehow-grid'
</script>
<Grid total="500">
<Part color="red" count="100" />
<Part color="blue" count="100" />
</Grid>
somehow-input
<script>
let number = 3
</script>
<Number
bind:number="{index}"
min="1"
max="4"
hasSlider="{false}"
hasKeyboard="{false}"
/>
somehow-slider
<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>
somehow-sankey
<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>
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent