
Variance - jashkenas
https://variancecharts.com/
======
morsch
Note that it's not free (as in speech) software, nor is it free to use for
commercial projects. Just a PSA, I don't think there's any point in discussing
the pros and cons of that; not that I can stop anyone.

------
glaugh
Apologies that this is about form not substance:

I appreciate the clarity of the "What makes Variance unique?" and "Where is
Variance not a good fit?" sections. Really useful.

As someone who makes a data analysis tool (with a bit of viz thrown in),
that's probably something we could do better.

~~~
lynaghk
No apology necessary, as there isn't a useful distinction between "form" and
"substance" here = )

My dev background is in the Clojure community, where Rich sets a strong tone
about the importance of discussing tradeoffs. We outlined those tradeoffs
explicitly on the site because that's always what's on the forefront of my
mind when making a technical decision. I'm glad you found it helpful.

------
ciscoriordan
Looks great. The landing page reminds me of the cover of Tufte's "The Visual
Display of Quantitative Information"
([http://www.edwardtufte.com/tufte/graphics/vdqi_bookcover.gif](http://www.edwardtufte.com/tufte/graphics/vdqi_bookcover.gif)).

~~~
skeoh
My thoughts exactly. I have the book sitting on my desk right now!

------
fdb
This is written by Kevin Lynagh, known for his work on C2 (Like D3 in Clojure
- [http://keminglabs.com/c2/](http://keminglabs.com/c2/)) and "A grammar for
statistical graphics"
([http://vimeo.com/53214578](http://vimeo.com/53214578)).

------
dantiberian
This is really cool. I initially thought from the name that this only
supported one type of chart (variance) but it actually has line, bar,
scatterplot, dotplot, boxplot and range. I couldn't see it explicitly stated
but I think you could build your own charts as well.
[https://variancecharts.com/examples/](https://variancecharts.com/examples/)

Also, the pricing and licensing model seems right on. As a consultant, this is
the cost of a couple of billable hours. I wouldn't hesitate to use it for a
client project where they needed these kinds of graphs.
[https://variancecharts.com/examples/](https://variancecharts.com/examples/)

------
jmduke
This reminds me a lot of Vega
([https://github.com/trifacta/vega](https://github.com/trifacta/vega)), albeit
using a HTML/CSS approach as opposed to a JSON one. By default, I'm excited
for new ways to approach data visualization, since its a really exciting topic
with no clear winners.

I was worried about the hefty price tag until I realized that it was free for
non-commercial projects. Will definitely try and play around with it this
weekend, as I imagine combining this with basic Python templating could be an
even stronger dataviz REPL than mpld3 or vincent.

~~~
lynaghk
Variance, like Vega, draws a ton from Wilkinson's "Grammar of Graphics". In
particular I wanted something like Hadley Wickham's ggplot2 R library, but on
the web.

I toyed with the idea of an explicit data format that could be generated by
different tools (I talked about this at the 2012 Clojure/conj
[https://www.youtube.com/watch?v=xyGggdg31mc](https://www.youtube.com/watch?v=xyGggdg31mc)).
Conceptually that route is cleaner.

However, the reality is that any such scheme requires "escape hatches" to drop
into the target representation (be it HTML/CSS, Canvas, &c.). We decided it
would be best to embrace a single target, HTML+CSS, rather than try to build
an abstraction targeting multiple final rendering systems.

~~~
alsocasey
Could you comment on how easily one very familiar with Wilkinson's work and
Hadley's ggplot2 might pick up this tool and produce useful visualization? How
similar is the syntax? How does it compare to R's Shiny applications? Is it
possible, for example, to update part of a visualization only rather than
redraw the whole thing?

------
throwawy
The example graphs confuse dependent and independent variables, putting
quarters on the vertical axis. This makes the curve look negative, when in
fact it's positive (up and to the right - usually a good thing). This really
takes away from the example, as it takes seemingly important business data,
and renders it in a negative way that I wouldn't expect or like. I strongly
suggest correcting the example.

Otherwise this looks awesome.

P.S. Should this be a Show HN? It feels like one.

~~~
lynaghk
Are you referring to this example:
[https://variancecharts.com/examples/bar_grouped/](https://variancecharts.com/examples/bar_grouped/)
?

I tend to prefer horizontal bar to vertical bar charts for English graphics
because the label text reads left-to-right, making it easier to read.

It's a good observation though; readers often expect the independent variable
to be on the abscissa. We'll be discussing these kinds of graphical decisions
in a series of free articles on the site.

------
watty
I noticed this uses AngularJS under the hood. How would it play in an existing
AngularJS app - can we install it as a module? Also, how would one do stacked
bar charts?

~~~
lynaghk
We haven't exposed it on the site yet, but if you have an existing Angular.js
app then you can import Variance as an Angular module for a cost of about
34kB. Email variancecharts@generalreactives.com and we can get you squared
away.

~~~
watty
Very cool. Are you concerned at all about Angular 2.0 and potentially having
to rewrite major parts?

~~~
lynaghk
Variance is currently built on Angular, but that's not part of the public API
contract. It's very likely that at a future point we will whip up a
faster/leaner DOM compiler and drop 100kB of Angular features that Variance
does not need.

------
kylebrown
Nicely done. Some support for real-time updates would be a hit (using eg a
firebase websocket URL as a data source, or a JSONP url for interval polling).

------
judk
Why don't the charts plot he variance in the data?

------
hadem
They seem to push the idea of the ability to build charts without JavaScript.
On the other hand, I have to learn their XML markup. Is the markup universal
in anyway or is it proprietary to their charting library?

------
the_cat_kittles
these charts are exceedingly pretty- i couldn't tell from the examples if
there are things included to make them more interactive or not (hover info,
zoom in and out etc)

~~~
nateweiss
I too would like to know if anything is planned for built-in support for
things like hover states, tooltips, etc, so that users can
inspect/explore/drill-into the data shown in a Variance-powered chart.

~~~
lynaghk
We have some stuff planned, but nothing on a firm timeline.

That said, remember that Variance was designed to embrace HTML and CSS. You
want hover effects? Use a plain ol' CSS selector. If you want something more
elaborate, you can definitely just throw some classes onto different parts of
your visualization and use other JS libraries like Bootstrap's tooltips.

~~~
nateweiss
Cool, thanks. I have already played around a bit with adding some hover
effects etc, which is indeed straightforward since I can just use a plain old
selector as you mention, etc.

I need to mess around to see if there is a straightforward way I could get a
reference to the underlying data item (the row in the .csv for many of your
examples, etc) from the context of a callback that fires on say
$('bar').hover() or what have you. Will look into it.

Anyway thanks for answering, and nice work.

------
jstevans
It appears the styling for both site and app are broken on IE11. Sticky footer
floats in the middle of the page, labels aren't distributing across axes, and
lines seem to be missing from the graph itself.

[http://imgur.com/lsjM9Yc](http://imgur.com/lsjM9Yc)

------
diminoten
Why are all the good chart generators that aren't dwarf fortress-esque always
for-profit ventures?

~~~
cheald
Probably because someone put in a lot of effort to write visualization
software that isn't dwarf fortress-esque and would like to be compensated for
it.

If you'd like to build an equivalent open-source library, though, you have my
vote.

~~~
diminoten
I mean this is the obvious answer, but I don't find it holds muster when
considering open source projects like Linux and gcc, two projects who are
immensely more complicated and are entirely Free.

I just wonder what it is about visualization that lends itself to
monetization.

~~~
cheald
Linux and gcc are somewhat atypical, IMO. They are also both developer-
oriented tools rather than layman-oriented tools (though Linux is rapidly
moving to be more layman-friendly, granted!).

I would argue that among tools written for the layman, the commercial versions
seem to be better than their OSS counterparts. This isn't universally true,
but people without expertise are often willing to pay some money to not have
to develop expertise. When it comes to visualization libraries, there are
_plenty_ of high-quality visualization tools that are highly accessible to the
experienced developer, but not to the layman. Developers don't have much
incentive to make them easier for the layman to use outside of financial
motivation.

------
sdoering
Having to load the "free" version from the variance cdn is the showstopper
here.

I really refrain from sending my users data to anyone else, that is without my
control. So sadly, as beautiful, as I find this, I have to refrain from using
it in my non profit projects.

~~~
NyxWulf
You are loading the JavaScript library from the CDN into a browser. The data
also goes to the browser, not to their CDN. So if sending your data to them is
the show stopper for you, that shouldn't stop the show since that's not what
happens.

------
Sulfolobus
Is it just me or does naming a plotting lib after a common prob/stat concept
seem like a bad idea. Makes it a bit of a pain to search for information
about.

------
jahewson
First graph on the landing page has no x-axis :(

~~~
jacobolus
Can you elaborate on what you are referring to and why you think it’s a
problem? The chart looks quite nice to me.
[http://imgur.com/Po8lelr](http://imgur.com/Po8lelr)

~~~
gus_massa
The labels in the axis are misplaced in IE11. They look right in Chrome.
[http://imgur.com/oLHPoYy](http://imgur.com/oLHPoYy)

~~~
RyLuke
Thanks, gus. We're working on some fixes for IE as we speak.

------
FootballMuse
Looks great on screen, but not great (if at all) when printed. Is this being
addressed at all?

------
vrepsys
truly nice looking charts. Wondering, if the colors and other styles built-in
or the user has to define them?

Also, seems only IE10+ version is supported, wondering what prevents the
library from working on IE9, since (I think) svg is supported on v9 as well.

~~~
lynaghk
Variance is production-oriented which, for data visualization, requires a ton
of the "designer interface" as much as it does from the "developer/analyst
interface".

The CSS is broken out into necessary structural bits (where everything is
gray, there are no margins, &c.) and then into visual themes. If you aren't a
designer, you can just use the stock theme. If you _are_ a designer then you
can start from the ground up to build the visual identity that you need.

At no point do you ever have to start throwing `!important` everywhere to
override our styling decisions. We intend to release actual SASS/Compass
mixins so that you can generate the structural CSS directly in your workflow
instead of juggling multiple CSS files and their implicit relationships.

As for IE9, it's all flexbox issues. All of the charts are responsive, and
Variance leans on flexbox CSS quite a bit (which IE9 does not support).

~~~
jwr
I think what was meant was whether Variance comes with built-in themes. At
least that was my first question — having a set of well-designed themes would
add a lot of value.

------
eudox
I like the use of non-HTML tags instead of div class madness.

------
latchkey
Very cool, also interesting that it's using Angular.

------
osi
nice. looks to be built on d3.

~~~
lynaghk
Hi, developer lead here. Variance is not built on D3; we're using some of the
scale code, but that's it.

In fact, variance-standalone.min.js is about 10kB smaller compared to current
d3.min.js = )

~~~
osi
ah i stand corrected! when looking at the minimized code some looked very
similar to d3's minimized code. either way, impressive stuff!

------
EToS
really nice

