d3KitMaking d3 charts just a little bit easier.

@kristw @trebor

explanations inside

How?

d3Kit helps you

● do boring setup tasks (margins, etc.)

● create responsive charts (handle resize)

● create reusable components

● manage layers

d3Kit helps you

● do boring setup tasks

● create responsive charts

● create reusable components

● manage layers

d3Kit.Chartlet

d3Kit.Skeleton

d3Kit.LayerOrganizer

d3Kit.factory

Margins (d3’s margin convention)

http://bl.ocks.org/kristw/7eef5cb21f3dfc1c0a4c

Margins (d3’s margin convention)

<svg> <g transform=”...”></g></svg>

Usually you will have to create an <svg> and a <g> inside with some translation to add margins for the axes. d3 has this page that explains the convention. However, there are several steps that you have to do every time.

It also does not let you easily change the margin later.

http://bl.ocks.org/kristw/7eef5cb21f3dfc1c0a4c

Let d3Kit.Skeleton handle that

Bar chart

http://bl.ocks.org/kristw/9ecc2d17061cadbe3707

Bar chartLet’s compare how to implement this simple bar chart.

http://bl.ocks.org/kristw/9ecc2d17061cadbe3707

Using d3KitOriginal d3 example

Using d3KitOriginal d3 example

Using d3Kit, you can create a skeleton, passing in the container (e.g. body) and let it create the <svg>, <g>, and calculate the margins. Then you can obtain the <g> using skeleton.getRootG()

Always use skeleton.getInnerWidth() to get content area. If you change the margin via skeleton.margin() later, You do not have to worry about updating width calculation at all. skeleton.getInnerWidth() will return the updated inner width.

Responsive chart

http://bl.ocks.org/treboresque/f839966214cf66627df6

Responsive chartd3Kit.Skeleton also help you catch resize events and resize the skeleton according to your need (full-width, keep aspect ratio.)

In this example, the Japan flag will grow/shrink when you resize the window, but always keep the same aspect ratio.

Skeleton dispatches “resize” event, so you will know when to redraw your vis.

http://bl.ocks.org/treboresque/f839966214cf66627df6

Reusable chart

http://bl.ocks.org/kristw/d8b15dd09a4c3510621c

Reusable chartd3Kit also provides a lightweight factory to help you create reusable chart on top of a skeleton.

We are not trying to define a complex frame work here, but we aim to set the stage and get out of the way.

http://bl.ocks.org/kristw/d8b15dd09a4c3510621c

Chartlet

http://bl.ocks.org/treboresque/6cc9d948be0635d88990

ChartletChartlet helps you create reusable components within chart. For example, these faces below are implemented using Chartlet. You can interact with them individually. We can easily reuse this face vis in another chart.

http://bl.ocks.org/treboresque/6cc9d948be0635d88990

Available today!Just open sourced! Fresh from the oven.

bower install d3kitgithub.com/twitter/d3kit

Krist Wongsuphasawat

@kristwRobert Harris

@trebor

github.com/twitter/d3kit