How to make an interactive D3.js visualization using datamatic.io

Datamatic.io is a visualization generator based on the amazing D3.js library. It comes with:

• 9 templates (Mike Bostock’s samples)
• 36 color palettes (mostly colorbrewer2.org)
• colourful polygonic backgrounds (Trianglify)
• Excel-like editor optimized for editing tree structures (Handsontable)
• properties panel (dat-gui)

By remixing templates, palettes, backgrounds, data and properties, you can create all kinds of visualizations as if you were using an Excel file with a dash of PowerPoint.

Here is an example of how to create a visualization showing demographic data

1. Go to datamatic.io and sign in using your Google account. You can experiment without signing in but you won’t get editing history or exporting options as datamatic.io uses Google real-time API which requires users to be signed in.

Sign In using your Google account

2. Add data to the data editor

• you can copy/paste from Excel/Google sheets or add data manually

• you can add hierarchical data using the data editor breadcrumb

3. Select a template which represents your data

• we’re going to choose “Dynamic Bubble Chart” as it shows hierarchical data in an interactive, “zoomable” way

• you should see something like this:

4. Customize look and feel in the Properties panel

• choose Random Triangles as background pattern

• choose color palette

• set group-color-opacity to 0, item-color to one of the palette colors and text color to white

• set text properties to bold, upper case and font size 9

Now you should see this result:

Or other variations when remixing templates & properties:

More resources:

• datamatic.io demo video:

https://www.youtube.com/watch?v=Yn8HSnZmLfk

• Pinterest: Created by datamatic.io