4 ms·

Congrats on an extremely well-done library. Glad to see d3 getting addition options with a much higher level of abstraction for those users who just want to ma

Congrats on an extremely well-done library. Glad to see d3 getting addition options with a much higher level of abstraction for those users who just want to make a common visualization with a minimum of fuss. I've just started my on take on a high-level chart library based on d3, one that leverages React components [1]. I'm hoping to retain an equally simple interface as MetricGraphics. In fact, I'm sure I'll draw a lot of inspiration from this excellent chart library. My library is still very early stage, but I'd love to get feedback on possible directions from React users and others interested in dataviz (someone mentioned candlesticks, which I'm noting down in my todo). 1. http://esbullington.github.io/react-d3/ http://esbullington.github.io/react-d3/

maelito 12y ago
Here's a horizontal bar chart that could complete your examples. https://github.com/laem/react-horizontal-bar-chart https://github.com/laem/react-horizontal-bar-chart It's the same building principles : chart is a React component, svg written as JSX, using d3's scales (no axis in mine, but bar info as tooltips instead).
- eric_bullington 12y ago
  Very nice! React components are really the perfect level of abstraction for a chart library.
nacs 12y ago
Sensible hover effects are essential IMO (not just for prettiness sake) and is a basic thing that quite a few libraries seem to miss out. Also, an easy way to customize all styling, tick intervals and min-max ranges would be good.
- eric_bullington 12y ago
  Thanks for your input. Animated effects like hover on definitely on my todo list. And it's already possible to customize styling and tick intervals, although I haven't documented that yet (still setting up documentation that goes beyond the example site and README). I hadn't thought of an API for customizable min-max ranges. It was something I figured people would do to their data prior to putting it in the chart, but bears considering.
  - nacs 12y ago
    Min-max ranges are useful for keeping desired range visible even when the data shows very little change (like a 0-100 min-max scale that shows the full range even when all of the data happened to fall within 93-99 for example).
aw3c2 12y ago
Properly definable color ranges. Let's say I want to color values below 0 in blue shades, values above 0 as red shades. Pretty much none of the libraries allow anything like that (unless you jump through hoops and write ugly hacks).

maelito 12y ago

Here's a horizontal bar chart that could complete your examples. https://github.com/laem/react-horizontal-bar-chart https://github.com/laem/react-horizontal-bar-chart It's the same building principles : chart is a React component, svg written as JSX, using d3's scales (no axis in mine, but bar info as tooltips instead).

eric_bullington 12y ago
Very nice! React components are really the perfect level of abstraction for a chart library.

nacs 12y ago

Sensible hover effects are essential IMO (not just for prettiness sake) and is a basic thing that quite a few libraries seem to miss out. Also, an easy way to customize all styling, tick intervals and min-max ranges would be good.

eric_bullington 12y ago
Thanks for your input. Animated effects like hover on definitely on my todo list. And it's already possible to customize styling and tick intervals, although I haven't documented that yet (still setting up documentation that goes beyond the example site and README). I hadn't thought of an API for customizable min-max ranges. It was something I figured people would do to their data prior to putting it in the chart, but bears considering.
- nacs 12y ago
  Min-max ranges are useful for keeping desired range visible even when the data shows very little change (like a 0-100 min-max scale that shows the full range even when all of the data happened to fall within 93-99 for example).

aw3c2 12y ago

Properly definable color ranges. Let's say I want to color values below 0 in blue shades, values above 0 as red shades. Pretty much none of the libraries allow anything like that (unless you jump through hoops and write ugly hacks).