Is the point of this article "we managed to get charts into email"? In places there is a bit too much subjective self-praise for anything other than a sales pitch: "...elegant, beautiful, and timely..." I personally think their greyscale and doughnut charts don't look great.
I would even go further to say that majority of this dashboard is meaningless, just noise. What it lacks is the Why's..
For instance, "Total Page Views" has dropped by 35% in comparison to the previous 4 weeks... why?
The doughnut chart can be reduced to a series of bullet points with a comparative sparkline to identify the main points of change.
That's just your opinion, and in my opinion you are being far more offensive than Colliwinks by calling him a jerk on a public forum.
And still they used doughnut charts.
Here is a PDF article by Stephen Few about pie charts: http://www.perceptualedge.com/articles/08-21-07.pdf
When you're summarizing coarse relative size across arbitrary categories, bar charts and tables give your selection of categories too much weight: everyone looks at the biggest bar or the biggest number and it's really hard to measure a long tail distribution visually.
If the message you're trying to send is, "nothing but X and Y matter, everything else combined is tiny", I still can't imagine a better visualization than a pie (or a doughnut).
However, in part-to-whole relationship tasks, pie charts can outperform bar charts, since in bar charts there is no true "whole".
(In addition to Few's post, Kosara has more on this: http://eagereyes.org/criticism/in-defense-of-pie-charts)
Weekly digests + sexy charts = unbelievable upticks in retention. It's also a great way to push product updates and blog posts directly to your customers.
Just wanted to point out: Although the title/article emphasizes d3, I think additional emphasis should be put on PhantomJS. There are a lot of complexities with implementing a headless browser. Libraries, such as Rhino and Selenium, have fallen short. PhantomJS really has created a nice balance for developers.
Phantom sites on top of QTWebKit (and more specifically QTWebFrame/Page) so the code is quite approachable if you want to look under the hood. I think the only downside is that QTWebKit lags a bit so a competing technology built on chromium would be even better. The other downside of course is that your rendering needs are significantly higher than generating text based email (if you are at significant volume).
Aside: I understand trends like stock value over time can be useful to see in a chart, but often times other charts seem unnecessary to me.
Four Data Sets:
Simple Statistical Summary of Each Data Set is Identical.
Visually Totally Different.
fixed url - thanks @eddmc
I think they're a great communication tool between the technical people and everyone else, and it creates a simpler dialog. "Why is there such a big drop in the graph here" "Well, our traffic was lower because..."
I think it's also an emotional/psychological thing. Business people like to see upwards trends! It makes them more confident in the business.
etc. I'm sure there are far more qualified people to answer this.
I'd say, yes numerical is often just as good, but not always. Also, in my opinion, whether information is displayed numerically or visually, the key is to be as minimalistic as possible.
Edit: where's that Markdown standard spec...
It seems like a lot of engineering type folks just won't accept that most people would rather look at a colorful picture than a list of percentages. If you gave me a choice between looking at a fancy graph that took up more space and showed less data and a list of numbers, I'll take the graph every time. Because I'm a human, and humans get bored easily, and humans appreciate art and color.
Don't downplay the importance of eye candy. People like eye candy, just like they like mouth candy. Sure, eating raw sugar is rationally stupid especially when there are many more logical, healthy choices out there. But sometimes you just want to taste something really really sweet; sometimes you really would just rather look at something really pretty.
I wondered: could we perhaps get PhantomJS to run our data
visualization on the server, capture the rendered output,
and then assemble an email with light HTML, CSS, and
I don't recall any handicap at all.
Yes, this kind of solution requires more resources.
These objections are all worth raising but do not negate the power of this kind of solution. For certain categories of highly interaction apps with a large amount of image or data processing, doing all the work on the client side is a really bad idea, given the wide varieties of client capabilities and available bandwidth.
We don't use D3 for our visualizations (I'd love to, but our users can use the dashboards "live" and, well... Internet Explorer 8) and we snapshot the entire dashboard - which isn't quite as clever as what is done here, but does have the advantage that the resulting mail is self-contained and does not require the dynamically generated images to be hosted somewhere.
Like these guys, I have nothing but good things to say about PhantomJS. We'd previously used another "headless webkit" - wkhtmltoimage - in a similar role but Phantom's design as a general purpose scripting engine for headless browsing tasks is much, much more useful.
I liked the idea of using regular HTML and CSS, but pre-phantomjs the closest I could come was princeXML, and even then it lacked js support and the licensing costs were pretty high.
How does parse.ly actually work? Do you sign up for Google Analytics and open it to them to they get the data from there?
I did not want to sign up just to learn this and there was no technical information or FAQ on the homepage or I overlooked it!
Sorry that you couldn't find that information easily -- I'll try to think about how to make it clearer on the website.
Could you tell us a little more about domshot.
I just the other day looked at phantomjs and ended up using casperjs on top as it allowed to use standard selectors to pick the elements I wanted to capture.
This way with a few lines of code, you can go from Jinja2 template -> rendered PNG without having to worry about the details of passing information back-and-forth between your Python app and a PhantomJS instance.
Sound interesting? We're planning on open sourcing it. Ping us (hello at parsely dot com) and we'll notify you of when it's available.
It would be open source already, but we're a bit backlogged on spare time projects at the moment. We just made an open source release of http://schema.to a couple weeks ago, and now Sandy struck so we find ourselves catching up. But, soon!
Here is a "before" screenshot of the Weekly Digest without the images downloaded in GMail:
And here's an "after" screenshot, after the images have been downloaded and rendered into the mail as well: