6 ms·

Koto.js – A D3 charting framework written in ES6

90 points by sebg 10y ago

thex10 10y ago
> However, as somebody who greatly depends on the d3.chart framework, I’ve gotten concerned that support for the project has dwindled over the past several months. This has prompted me to write my own reusable charting framework, Why not put that energy into contributing to the Miso Project?
dharness 10y ago
I'm super surprised there isn't a big chart front and centre on that site! or.. really anywhere on that site. Nice site though, don't get me wrong
- d--b 10y ago
  Same here! No demo, no chart in docs, ...
  - divanvisagie 10y ago
    It's a framework around D3, if you want to see what the charts will look like , you can see them on the D3 site.
    - edejong 10y ago
      From all the beautiful graphs present on the D3 site, the demo shows some boring examples. Why not dazzle the audience with a force-directed layout?
    - weego 10y ago
      So if there's no differentiator why should I be interested in it? If you have a library that's entire purpose is visual and you show me nothing then that's a failure. I'm not going to clone a repo and spin up some examples just to see if they suck or are awesome.
- poseid 10y ago
  indeed, first thought was how does it differ from classic d3 charts ? i like d3 a lot, but usually it takes some boilerplate code to setup charts. when working with multiple datasets the d3 commands look a bit confusing at times, so higher level abstractions are interesting to see
pacomerh 10y ago
Here are the examples, in case you didn't see them. They're not obvious in the site (bottom of the github readme) Basic Bar Chart (ES2015): http://jsbin.com/qopuwerixa/edit?js,output http://jsbin.com/qopuwerixa/edit?js,output Basic Bar Chart (ES5): http://jsbin.com/zutise/edit?js,output http://jsbin.com/zutise/edit?js,output Stacked Bar Chart (ES2015): http://jsbin.com/nifoxohuxa/edit?js,output http://jsbin.com/nifoxohuxa/edit?js,output
- biot 10y ago
  Those look worse than the first charting libraries I used in the 90s.
  - pacomerh 10y ago
    Yeah, but I think the point the author is trying to make is that whatever you can do with D3, you can do with this. But the responses just prove that 'love starts from the eye'
paradite 10y ago
> Common API for getting and setting accessor functions. This is a really good idea, and it solves the issue of coupling commonly see in d3.js examples, where the chart needs to know about the keys (properties) of the data. I usually write accessor functions as part of my model to avoid this coupling but letting the chart component take in accessor is clearly a better approach.
- tomgp 10y ago
  yeah, this is the bit I liked. Personal taste: I'd prefer to see this implemented without extending a base class i.e. by composition rather than inheritance, seems more d3-ish to me.
eddeh 10y ago
http://nvd3.org/ http://nvd3.org/
- ergo14 10y ago
  http://c3js.org/ http://c3js.org/
  - jnbiche 10y ago
    http://metricsgraphicsjs.org/ http://metricsgraphicsjs.org/
    - mattsahr 10y ago
      http://dimplejs.org/ http://dimplejs.org/
  - 91bananas 10y ago
    nvd3.js is not so good, we've moved to c3 and haven't looked back at my shop
- wheaties 10y ago
  Having worked with Bob and having him explain the "why" of the different transitions, the behavior of the charts combined with the look/feel really sell them to me. It's hard to compare other charting libs to this. That said, would be nice if they finally open sourced more of the better charts that were on the main applications of the company behind it.
patates 10y ago
I really don't like when subscribers get the instance as an implicit this instead of an explicit parameter. It makes code harder to read if you ask me. Other than that nitpick, the examples given in the Readme.md are a bit too basic, the author maybe could show it off a little bit.
k__ 10y ago
I would wrap such libraries myself, which is rather easy with React and takes out one third party thing that could break. I made an integration example a while ago: https://github.com/kay-is/react-from-zero/blob/master/16-advanced-integration.html https://github.com/kay-is/react-from-zero/blob/master/16-adv... I found it much easier to reason about these libraries behaviour if I had one small interface from React to the lib. It makes updates also easier, no need to wait that the wrapper gets updated.
smnplk 10y ago
I'm having a severe case of js fatigue.
- bryanrasmussen 10y ago
  there's a framework for that.
stared 10y ago
...and examples? (One of the best thing about D3.js (as an approach, not only - a library) is "examples (with working code) first". First both in terms for priority, and exposure.)
ab5tract 10y ago
I heard you like charting frameworks, so I wrapped your charting framework in a charting framework!
toomuchstuff 10y ago
this sucks so bad d3 is good. let's just use that you genius

90 points by sebg 10y ago

> However, as somebody who greatly depends on the d3.chart framework, I’ve gotten concerned that support for the project has dwindled over the past several months. This has prompted me to write my own reusable charting framework, Why not put that energy into contributing to the Miso Project?

dharness 10y ago

I'm super surprised there isn't a big chart front and centre on that site! or.. really anywhere on that site. Nice site though, don't get me wrong

d--b 10y ago
Same here! No demo, no chart in docs, ...
- divanvisagie 10y ago
  It's a framework around D3, if you want to see what the charts will look like , you can see them on the D3 site.
  - edejong 10y ago
    From all the beautiful graphs present on the D3 site, the demo shows some boring examples. Why not dazzle the audience with a force-directed layout?
  - weego 10y ago
    So if there's no differentiator why should I be interested in it? If you have a library that's entire purpose is visual and you show me nothing then that's a failure. I'm not going to clone a repo and spin up some examples just to see if they suck or are awesome.
poseid 10y ago
indeed, first thought was how does it differ from classic d3 charts ? i like d3 a lot, but usually it takes some boilerplate code to setup charts. when working with multiple datasets the d3 commands look a bit confusing at times, so higher level abstractions are interesting to see

pacomerh 10y ago

Here are the examples, in case you didn't see them. They're not obvious in the site (bottom of the github readme) Basic Bar Chart (ES2015): http://jsbin.com/qopuwerixa/edit?js,output http://jsbin.com/qopuwerixa/edit?js,output Basic Bar Chart (ES5): http://jsbin.com/zutise/edit?js,output http://jsbin.com/zutise/edit?js,output Stacked Bar Chart (ES2015): http://jsbin.com/nifoxohuxa/edit?js,output http://jsbin.com/nifoxohuxa/edit?js,output

biot 10y ago
Those look worse than the first charting libraries I used in the 90s.
- pacomerh 10y ago
  Yeah, but I think the point the author is trying to make is that whatever you can do with D3, you can do with this. But the responses just prove that 'love starts from the eye'

paradite 10y ago

> Common API for getting and setting accessor functions. This is a really good idea, and it solves the issue of coupling commonly see in d3.js examples, where the chart needs to know about the keys (properties) of the data. I usually write accessor functions as part of my model to avoid this coupling but letting the chart component take in accessor is clearly a better approach.

tomgp 10y ago
yeah, this is the bit I liked. Personal taste: I'd prefer to see this implemented without extending a base class i.e. by composition rather than inheritance, seems more d3-ish to me.

eddeh 10y ago

http://nvd3.org/ http://nvd3.org/

ergo14 10y ago
http://c3js.org/ http://c3js.org/
- jnbiche 10y ago
  http://metricsgraphicsjs.org/ http://metricsgraphicsjs.org/
  - mattsahr 10y ago
    http://dimplejs.org/ http://dimplejs.org/
- 91bananas 10y ago
  nvd3.js is not so good, we've moved to c3 and haven't looked back at my shop
wheaties 10y ago
Having worked with Bob and having him explain the "why" of the different transitions, the behavior of the charts combined with the look/feel really sell them to me. It's hard to compare other charting libs to this. That said, would be nice if they finally open sourced more of the better charts that were on the main applications of the company behind it.

patates 10y ago

I really don't like when subscribers get the instance as an implicit this instead of an explicit parameter. It makes code harder to read if you ask me. Other than that nitpick, the examples given in the Readme.md are a bit too basic, the author maybe could show it off a little bit.

k__ 10y ago

I would wrap such libraries myself, which is rather easy with React and takes out one third party thing that could break. I made an integration example a while ago: https://github.com/kay-is/react-from-zero/blob/master/16-advanced-integration.html https://github.com/kay-is/react-from-zero/blob/master/16-adv... I found it much easier to reason about these libraries behaviour if I had one small interface from React to the lib. It makes updates also easier, no need to wait that the wrapper gets updated.

smnplk 10y ago

I'm having a severe case of js fatigue.

bryanrasmussen 10y ago
there's a framework for that.

stared 10y ago

...and examples? (One of the best thing about D3.js (as an approach, not only - a library) is "examples (with working code) first". First both in terms for priority, and exposure.)

ab5tract 10y ago

I heard you like charting frameworks, so I wrapped your charting framework in a charting framework!

toomuchstuff 10y ago

this sucks so bad d3 is good. let's just use that you genius