somehow-graph

make infographics, without thinking

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

let somehow = require('somehow-graph')

let world = somehow({
  aspect: 'golden' // set x/y ratio of svg
})

// create a shape
let line = world.line()
// feed it some data..
line.set([
  'june 5 2019', 10
  'july 7 2019', 15
  'july 7 2020', 18
  'aug 8 2021', 50
])

//automatically set size of x/y axis
world.fit()

// throw it into the page
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()
- bold()
- 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