https://github.com/spencermountain/somehow

a number of Svelte infographics
https://github.com/spencermountain/somehow

infographics svelte

Last synced: 25 days ago
JSON representation

a number of Svelte infographics

• Host: GitHub
• URL: https://github.com/spencermountain/somehow
• Owner: spencermountain
• Created: 2020-09-07T15:32:47.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-18T18:18:55.000Z (about 4 years ago)
• Last Synced: 2024-09-19T17:11:33.617Z (about 2 months ago)
• Topics: infographics, svelte
• Homepage: http://thensome.how/
• Size: 13.7 KB
• Stars: 9
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  
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](http://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](https://spencermounta.in/spencer-color/) *from spencer-color*

**Same setup**

  * broken into declarative Components, whenever possible

  * d3 sometimes (whenever possible)

  * shared rollup/npm config



### somehow-calendar

[repo](https://github.com/spencermountain/somehow-calendar)

```html

  import { Month, Day } from './src'

  

```





  demo





  



### somehow-keyboard

[repo](https://github.com/spencermountain/somehow-barchart)

```html

  import { Keyboard, Key } from './src'

  

```





  demo





  



## somehow-timeline

[repo](https://github.com/spencermountain/somehow-timeline)

```html

  import { Timeline, Column, Line } from 'somehow-timeline'

  

    

    

    

  

```





  demo





  



### somehow-barchart

[repo](https://github.com/spencermountain/somehow-barchart)

```html

  import { Horizontal, Bar } from 'somehow-barchart'

  

  

  

```

![image](https://user-images.githubusercontent.com/399657/88101585-3556aa00-cb6c-11ea-821c-c7413368889d.png)



  demo





  



### somehow-year

[repo](https://github.com/spencermountain/somehow-year)

```html

  import { Year, Day } from './src'

  

  

```





  demo





  



### somehow-circle

[repo](https://github.com/spencermountain/somehow-circle)

```html

  import { Round, Arc, Circle, Line, Label } from 'somehow-circle'

  

  

  

  

  

```





  demo





  



### somehow-maps

[repo](https://github.com/spencermountain/somehow-maps)

```js

  import { Globe, Line, Graticule, Dot, Latitude } from 'somehow-map'

  

  

  

  

  

```

![image](https://user-images.githubusercontent.com/399657/92409352-494f6e80-f10e-11ea-82cf-51c8bdc8e4c0.png)



  demo





  



### somehow-grid

[repo](https://github.com/spencermountain/somehow-grid)

```html

  import { Grid, Part } from 'somehow-grid'

  

  

```





  demo





  



### somehow-input

[repo](https://github.com/spencermountain/somehow-input)

```html

  let number = 3

```





  demo





  



### somehow-slider

[repo](https://github.com/spencermountain/somehow-slider)

```html

  import { Vertical, Slider, Label } from './src'

  

  

  

```





  demo





  



### somehow-sankey

[repo](https://github.com/spencermountain/somehow-sankey)

```html

  import { Sankey, Node } from 'somehow-sankey'

  

    

    

    

    

  

  

    

  

```





  demo





  



MIT