somehow

make infographics, without thinking

somehow creates SVG, using your data, that you can throw-into your webpage.

let somehow = require('somehow')
 
let world = somehow({
  height: 300,
  aspect: 'golden'
})
 
let line = world.line()
line.set(`
june 5 2019, 10
july 7 2019, 15
july 7 2020, 18
aug 8 2021, 50
`)
 
world.fit()
 
document.body.innerHTML = world.build()

the idea is that you think (mostly) about the actual data, and not the layout.

#1 - .fit()

this scales, and fits the data for all given shapes, automatically. You don't have to manage d3Scale range & domain.

#2 - .build()

running .build() returns html-strings by default, but the library uses Jason Miller's htm library so can call .bind(React.createElement) and return React Components.

The joke is that D3 is easy, as long as you're an expert.

This library is built for personal use, and is essentially a wrapper for d3-path, d3-shape, and spacetime.

more to come!

Current API:

- line(obj)
- dot(obj)
- text(obj)
- area(obj)
- midArea(obj)
- rect(obj)
- bar(obj)
- annotation(obj)
- image(obj)
- arrow(obj)
- snake(obj)
- shape(obj)

- bind(fn)
- xAxis
- yAxis
- fit(x, y)
- fitX(x)
- fitY(y)
- build()
- getShape(id)
- redraw()
- clip(bool)
- title(str)

Axis

- color(c)
- remove()
- show()
- format(str)
- ticks(arr)
- prefix(str)
- suffix(str)
- clip(bool)
- label()

Shape

- set(str)
- at(x, y)
- from(x, y)
- to(x, y)
- color(c)
- opacity(n)
- title(str)
- straight()
- soft()
- onMount(fn)
- click(fn)
- hover(fn)
- clip(bool)

Area

- line(n)

Rect

- color()
- width(n)
- height(n)
- rounded(n)
- border(n)

Line

- dotted()
- width()

Text

- before(x, y)
- after(x, y)
- center(x, y)
- left()
- right()
- middle()
- color(c)
- dy(num)
- dx(num)
- dodge(x, y)
- font(num)
- extent()
- text(str)

Dot

- radius(num)

Annotation

- on(x, y)
- title(str)
- nudge(x, y)

MidArea

- zero(y)

Bar

- width()
- zero()
- at(x, y)

Image

- src(txt)
- caption(str)
- size(w, h)
- width(w)
- height(h)

Arrow

- from(x,y)
- length(num)
- width(num)

Now

- top()
- bottom()
- label(str)

Title

- top()
- bottom()
- right()
- left()

MIT