A Core Animation-based, D3.js-inspired drawing library for Cocoa Touch.
Objective-C Shell
Switch branches/tags
Nothing to show
Latest commit bacf886 May 7, 2015 @patr1ck Xcode 6.3.1 upkeep.
Failed to load latest commit information.
OCD3.xcodeproj Xcode 6.3.1 upkeep. May 7, 2015
OCD3 Xcode 6.3.1 upkeep. May 7, 2015
OCD3Tests Xcode 6.3.1 upkeep. May 7, 2015
.gitignore Update to build docs. Mar 21, 2013
LICENSE Add License file Feb 22, 2013
README.md Add tutorial link to Readme. Mar 22, 2013
build_docs.sh Update to build docs. Mar 21, 2013



OCD3 is a Core Animation-based, D3.js-inspired drawing library for Cocoa Touch. Specifically, OCD3 uses CAShapeLayer, along with CAAnimations and D3.js-style enter/update/exit patterns to do data-bound drawing in a view.

While not quite a D3.js port, it is still a good idea to have a general understanding of D3.js before diving into this code. Here are some good tutorials:

Three Little Circles
A Bar Chart, Part 1
A Bar Chart, Part 2

The code for these tutorials (along with some others, like Pie Chart and OMG Particles) are implemented in the provided sample app.

OCD3 is still under heavy alpha development, so its API is subject to change. It's not recommended to use it in production code until a formal release/annoucement is made. Versioning will, at some point, follow SemVer.


An OCDView plays host to all OCD3 content. This view is typically made up of 1 or more OCDNodes. These nodes are analogous to DOM nodes in an SVG element. Here, they are act as smart wrappers around CAShapeLayers. While you can specify the shape by using the OCDNode's -setNodeType: method and then manually add it to a view, there are more powerful ways of drawing in OCD3 which you can leverage, which we will talk about in a moment.

OCD3 provides an OCDSelection class, which is returned when you "select" nodes from an OCDView. Once you have a selection you can bind an array of data to those nodes, which can then act as a representation of the data. Nodes that don't already exist in the view are created, ones that are no longer needed are destroyed, and others are updated as needed. This is known as a data-join.

OCD3 also provides OCDScale, OCDNodeFormatter, and OCD*Layout classes. OCDScale is analogous to d3.scale, OCDNodeFormatter is analogous to the d3.svg shape generators, and the OCD*Layout classes try to help with node layout, similar to the d3.layout library.


Appledoc-generated documentation is available for most classes here: OCD3 Documentation

Also, a simple tutorial is available on the wiki: Animated Bar Chart