- Our Work
- Industries We Serve
- Services We Deliver
- Why Work with Us
- Our Thinking
- Week in Review
- 5 Ways Design Systems Create Business Value
- 5 Ways to Make Your Nonprofit Engage Using Facebook Timeline
- 6 Great Interactive Data Visualization Tools (Part 1)
- 6 Great Interactive Data Visualization Tools (Part 2)
- Announcing the First Brands Behaving Badly Awards
- Best of 2011 Roundup
- Brands Behaving Badly, Summer 2010 Bronze Medalist, Lebron James
- Brands Behaving Badly, Summer 2010 Gold Medalist, BP
- Brands Behaving Badly, Summer 2010 Silver Medalist, Toyota
- DIY Communications: Multitasking Your Way to a Mediocre Brand
- Five Things to Consider as You Dive Into Responsive Web Design
- Getting High on Your Own Supply
- Intervention: Identity Crisis Edition
- Invest in Partners, Not Products
- Is Your User Experience Degrading Your Brand?
- Labeling for Good: White Paper
- Maximizing Design Firm Relationships During the Budgeting Process
- Maximizing Design Firm Relationships by Managing Stakeholder Input
- Maximizing Design Firm Relationships by Setting Appropriate Success Metrics
- Putting Pinterest to Work for Your Business or Nonprofit Brand
- Putting Pinterest to Work for Your Business or Nonprofit Brand Part 2
- Responsive Design Planning: More Than a Line Item
- Rethinking the Traditional Policy Report
- Show Your Nonprofit's Brand a Little Love!
- Speaking a Client's Language
- State of the State of the Union: Power(Point) to the People?
- Stepping Back From Komen's Brand Disaster
- The 5 Benefits of Designing a Consistent Brand
- The Fundamentals of Developing a Strong Brand
- The Website RFP - Basic Best Practices for Small Businesses and Non-Profit Organizations
- Three Ways for Nonprofits to Maximize Design Firm Relationships
- Three Ways to Future-Proof Your Content Management System
- Web Typography Part 1
- Web Typography: An Important Way to Strengthen Your Brand Online (Part 2)
6 Great Interactive Data Visualization Tools (Part 2)
Welcome back for the second part of my series on interactive data visualization (dataviz) tools. In part one, we covered three cool tools for visualizing charts and graphs and many other data types on a webpage. In part two, we take a look at three more tools that are a bit more complex but have some incredible data visualization capabilities.
- jQuery Visualize (Part 1)
- Google Charts (Part 1)
- Highcharts (Part 1)
- Simile Exhibit
Exhibit is a very robust and customizable offering. One of its main strengths is a unique approach to rendering the data. In addition to easy-to-use filtering, sorting and search tools, it allows you to use an HTML template (called a “lens” in Exhibit) to be constructed to get everything on the page looking exactly how you want it. It’s almost like a mini-CMS for dataviz where you can access your data through attribute values directly in the lens. For projects that require a high degree of sensitivity to look and feel, this extreme level of flexibility for building data visualizations is fantastic.
- Visualization Types Supported: Line Graphs, Maps, Scatter Plots, Multi-Filterable Lists, Timelines, Timeplots and more…with widgets!
- Data Input Sources: JSON, Spreadsheet
- Data Output: HTML
- Styling Options: CSS
Flexible & Powerful Approach to Design
I really like the approach of Exhibit, where data is presented through a “lens” – an HTML template shell that elements are placed into. This makes the system completely customizable and CSS styleable, which means designers love it, and creating consistency for clients’ brands is a snap.
Letting users filter your data by any number of criteria is incredibly useful, and turns your information from static content into a real interactive feature. Filtering is built right into Exhibit and it’s easy to implement. Server-side filtering can be a chore (not to mention expensive), so Exhibit really stands out in making user filtering incredibly quick and easy. The same goes for sorting and search. Exhibit makes it very easy to give your site users control over getting exactly the view of your data they want, and therefore a more valuable understanding of why it’s important.
Jumping into complex dataviz tools can be an undertaking and requires some trial and error. Exhibit really speeds the process with great documentation on their website and some excellent beginner tutorials.
Want top push Exhibit even further? You can add functionality with widgets. There are widgets available for bibliography and citations collections, a CoverFlow style image viewer, timelines, and timeplots—just to name a few. This kind of product extension makes Exhibit one of the most robust and flexible options out there for data visualization.
Steep Learning Curve
- Visualization Types Supported: Area Chart, Bar Chart, Pie Chart, Tree Map, Force Directed, Radial Graph, Sunburst, Icicle, Space Tree, Hyper Tree
- Data Input: JSON
- Output: Canvas
Unique Chart Types
I really like the various non-standard visualization types available in the InfoVis Toolkit. This tool might be overkill for the occasional pie chart but could really shine when you have to approach display options for more complicated data.
Animations / Interactions
The animations are a great addition to these charts and graphs. They lend a nice Flash-like quality to these charts that is really nice. And the ability to interact with these graphs – dragging stuff around and manipulating the graph (like this one) is very cool and could be really useful.
D3 isn’t really like the others. It is not a “ready-to-go” charting tool but rather a framework for drawing data-based elements. The D3 website says it best: “Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data.”
And, since you can create SVG graphics, you could use this output anywhere, including print applications. D3 could be the center of a slick web/print publishing workflow for a graph heavy project.
- Visualization Types Supported: All? The sky's the limit.
- Data Input: JSON, GeoJSON, CSV
- Output: HTML, SVG
You can pretty much use D3.js to draw anything you want based on data. This is an amazing tool for people who create new data visualizations and visualizations built on really large datasets.
Very cool that you can tell D3 to create HTML items as well as SVG. Definitely opens to the door to styling with CSS, which is ideal.
These six products are just the tip of the iceberg for dataviz. There are dozens of other great products out there. But these should give you a good idea of what is happening and a sense of the range of capabilities and complexity of the interactive dataviz world.
It is so exciting to see so many open-source data visualization projects and the list is growing every day. As browsers continue to support more and more robust visual features and computers and mobile devices continue to get more powerful, I’m sure we can expect the world of data visualization to get even more sophisticated and expansive.
Posted by Paul Chamberlain
January 25, 2012
Categories: Content, Data Visualization, Technology
InsightsThe 5 Keys to Effective Responsive Design InsightsContent-First Website Development: A Real World Experiment Insights4 Mobile Design Strategies for Content-Heavy Websites InsightsStrengthening Audience Engagement with Parallax Scrolling Website Design InsightsThe Problem With Traditional Branding Agencies InsightsDesigning With the Real Deal InsightsThe Best CMS for Content-Heavy Websites InsightsBeyond Like and Follow: Engaging Nonprofit Supporters Through Social Media Insights6 Ways to Use Behavioral Science to Strengthen Your Brand