Skip to content

Contour 1.0 Released!

A year and a half ago, we introduced Forio Contour, a JavaScript library that provides an easy-to-use set of common visualizations, plus a framework for extending them. Contour is a free and open source library based on D3.

We’re now happy to release Contour 1.0!

Take a look at:

Watch this space for news about an upcoming webinar on the new features. (If you’re new to Contour, see our intro webinar here.)

Release Notes: Contour 1.0

Contour Core: New Features

  • Export visualizations as static images. The new exportable visualization can be added to any Contour instance. It allows you to download the Contour instance as an image (SVG, PNG, etc.) or place it within another container on the page. See details.

  • JSON Data Connector. In addition to CSV and TSV, Contour now supports data in JSON format. See the example.

  • Preprocessing for large data sets. Sometimes, usually for performance reasons, you don’t want Contour to draw all of the points in your data set. You can now define your own preprocess function for line charts, bar charts, column charts, and scatter plots that describes what should happen in these cases. The function should return the (filtered) data set to draw. See details or try it yourself.

  • Tooltip formatting functions. There is now additional control of tooltips, thanks to a tooltip formatter: Define your own function that describes what to display. See details or try it yourself.

  • Separate elements for legends. You can now define a separate DOM element for where to place the legend for your visualization. See details or try it yourself.

  • Bug Fixes. Not really a new feature, but no release is complete without a slew of bug fixes. Check the GitHub project for details; major areas addressed include better pie chart positioning, plus lots of clean up for x-axis, y-axis, and tick marks behaviors in cartesian graphs.

Contour Geo

The other major part of Contour 1.0 is the addition of Contour Geo!

Contour Geo allows you to add one or more map visualizations to any instance of Contour. Simply add .geo() to your Contour instance (think of this as similar to adding .cartesian() before a line or bar chart). Then, add the type of map you want, for example .USMap(). 

d3.json('us.json', function(mapUnit) {
	new Contour({ el: '#chart' })
	.geo()
	.USMap(mapUnit)
	.render();
});

Check out the gallery. Then read up on the details for creating and the details for configuring your new maps. Or, just try it yourself!

Map visualizations are based on TopoJSON files. Several are included with Contour, and you can also create your own.

Like other Contour visualizations, you have a lot of control over configuration details — such as changing the scale and projection of the map, adding markers, etc.

Happy visualizing!