

Epoch – A real-time charting library - jermo
http://fastly.github.io/epoch/

======
gingerlime
Looks nice. It's great to see more d3-based charting libraries. I'm personally
using Rickshaw[0] to power the charting of Giraffe[1], a light weight front-
end for Graphite. Sorry for the plug, but it's important to give some context.

One obvious thing that felt like Epoch was missing was hover-over info. At
least I couldn't spot it on the examples.

[0][https://github.com/shutterstock/rickshaw](https://github.com/shutterstock/rickshaw)
[1][https://github.com/kenhub/giraffe](https://github.com/kenhub/giraffe)

~~~
jpkeisala
Are there more d3 based libraries than the ones you mentioned?

~~~
dkersten
I've had great success with [http://dimplejs.org](http://dimplejs.org)

Makes common things easy and gets the hell out of your way when you want to
customise things with D3.

~~~
paperwork
I'm a fan of dimple as well. I created custom tags for it[1] so you can draw
charts in the following manner:

    
    
      <dimple-chart data="data" height="300" width="300" margin-bottom="15%" type="bar">
        <dimple-axis position="y" type="measure" field="Awesomeness"></dimple-axis>
        <dimple-axis position="x" type="category" field="Word" orderBy="Word"></dimple-axis>
        <dimple-legend x="10" y="10" width="500" height="30" ></dimple-legend>
      </dimple-chart>
    

I just started building this using Mozilla's x-tags. Mainly to clean up my own
app, others are welcome to take a look.

[1][https://github.com/falconair/dimple-
chart](https://github.com/falconair/dimple-chart)

------
haberman
Looks really nice. Since I started using React, though, I've wanted to find a
similarly nice charting library that is reactive instead -- that renders to a
React component with SVG instead of mutating the DOM directly. This would help
minimize the number of DOM updates when just a few data points change, and
seems like it would fit better within a React app.

(This approach unfortunately rules out D3, which mutates the DOM directly and
doesn't have smart diffing AFAIK).

Anyone know of a reactive charting library?

~~~
fletchowns
Isn't SVG part of the DOM though?

~~~
nilkn
I've never used React, but I believe it maintains a virtual DOM and uses it to
compute the minimal number of changes that need to be enacted on the browser's
DOM. So basically, it's precisely because SVG is part of the DOM that it could
potentially be a good application of React.

~~~
haberman
Exactly. The React paradigm is to never mutate the DOM directly, but instead
let React mutate it. I wrote a friendly intro here:
[http://blog.reverberate.org/2014/02/react-
demystified.html](http://blog.reverberate.org/2014/02/react-demystified.html)

------
nichodges
I've just finished up a project using NVD3, and at first glance this looks
like a slightly simpler option. This is a good thing - NVD3 has become complex
to the point where I would recommend someone to just learn D3 rather than use
a reusable library.

Epoch appears to be a good alternative for people who just want to quickly
build charts for today's web. Great work.

~~~
streametry
I think the authors of NVD3 have recognized the complexities as well and have
planned a rewrite [1] this year.

[1] [http://nvd3.org/blog/2014/03/state-of-
nvd3/](http://nvd3.org/blog/2014/03/state-of-nvd3/)

------
CptMauli
Again, something which all of these projects ignore, no step chart and no way
to have gaps for missing data.

~~~
sdrothrock
I've run into this problem a lot but end up getting around it by finding
"gaps" and putting in null data manually.

~~~
CptMauli
that implies its possible at all to represent null in a meaningful way

------
snorkel
Very smooth animation, but those colors ... ech ... I wish it had the color
and style customization that Highcharts offers, for example gradient fills and
opacity support ... or rather I wish Highcharts update animations were this
smooth.

~~~
omgwow
So the real-time charts support CSS styling, though I don't think they'll
handle gradients at this time. Why not open up an issue on github :) ?

------
hackerews
this is great. i like the variety of graphs, especially heatmap. however, it'd
be great to have hover effects and interactive legends with these time-series
like in rickshaw and dygraphs.

~~~
streametry
Lack of hover effects caught my attention as well. Additionally for time
series data range selectors come in handy. Dygraphs [1], NVD3 [2] and
Highcharts all have them.

[1] [http://dygraphs.com/gallery/#g/range-
selector](http://dygraphs.com/gallery/#g/range-selector) [2]
[http://nvd3.org/examples/lineWithFocus.html](http://nvd3.org/examples/lineWithFocus.html)

~~~
cbsmith
Overlaying hover effects is really pretty easy though, no?

------
whocanfly
This looks great. How do I plot a timeline where values are sum of all values
that lie within a time unit, say, 1 day/1 hour?

~~~
clubhi
You sum all the values within the hour. Seriously, you should do most data
massaging before it enters a charting package.

------
eterm
It looks really good, although one slightly confusing thing is that the static
line graph appears to be smoothed but the real time one is unsmoothed and
there isn't a configuration option listed to change that?

------
alok-g
Are there any charting libraries that do 2D and 3D both? If not, are there
separate 2D and 3D libraries with a consistent and modern look and feel?

------
lalwanivikas
Would you recommend this over FusionCharts for personal projects? (BTW
FusionCharts is free for personal use)

~~~
e1g
I would recommend Highcharts[1] - a very wide range of great looking charts
with minimal effort. Also free for personal/non-commercial use. Unlike
D3-based charting libraries, it works on everything from IE8 to mobiles.

[1] [http://www.highcharts.com](http://www.highcharts.com)

~~~
lalwanivikas
I'm experimenting with both right now and was impressed by both the number of
charts available and the customer support of FusionCharts[1]. They also have a
very exhaustive documentation but I guess I should try out HighCharts too. Any
specific reason for choosing Highcharts over FusionCharts? Or any bad
experience with FusionCharts in the past?

[http://www.fusioncharts.com](http://www.fusioncharts.com)

~~~
e1g
FusionCharts used Highcharts for rendering for a while, so in a way FC was a
superset of HC. The two projects have parted ways last year, and FC has done
great work through Raphael since then. I consider FusionCharts to be more
feature rich, especially with some edge cases, but we chose Highcharts for
three reasons -

1\. SaaS pricing and licensing of Highcharts was more suitable given the scale
of our team/application.

2\. None of the unique features from FusionCharts had any purpose for our app.

3\. At the time, Highcharts had better design out of the box (although FC has
nearly caught up in this regard).

We have found Highcharts to small in size, quick in rendering, and flexible in
structure to allow us add custom plugins, so we haven't looked back.

At this point I see the two options as very comparable on nearly every
dimension, but it's still worth experimenting with both to see which one fits
your style and product better (skinning, performance, flexibility for your
feature-set etc).

------
hendry
Another time line graphing library without things like moving averages that I
want. :/

------
eddd
i don't see any example how to plot real-time chart using http api - therefore
this 'real-time' is not that useful.

~~~
nichodges
Load the data into the js however you want, then use the update method on the
chart. D3 is pretty quick rendering, so it's about as useful real-time as
you're going to see in the browser.

------
snowwindwaves
the killer feature for me in a charting library is the ability to have
multiple Y-axis scales. Say I want to have three time-series, so I am plotting
efficiency in %, power in megawatts and flow in m3/s on the Y-axis and time on
the x-axis, three Y-axis scales are required.

Usually I end up with multiple charts or some SCADA program has made it so the
Y-axis scale changes when you select a series if there is only 1 chart.

------
grogenaut
It'd be great to know on that front page what language it is in. Without
having to browse into the git repository or extract the zip distribution.

~~~
driverdan
Pretty obvious it's some form of JavaScript (CoffeeScript in this case) since
it runs in the browser.

------
Argorak
"Built for Developers" \- well, I certainly hope so!

Who else would a JavaScript library be built for?

~~~
jgrahamc
Designers? Upper Management?

~~~
the906
Being a design/dev person here, now I"m curious what a D3js library built
specficially for designers would look like.

------
farnulfo
Why use a common name that have a different meaning ?

~~~
odonnellryan
Marketing.

------
mellisarob
it seems good but more content is advisable.

~~~
omgwow
Content as is "a more robust website" or content as in "more charts and
features"?

