Code Monkey home page Code Monkey logo

ocd3's Introduction

OCD3

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.

Concepts

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.

Documentation

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

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

ocd3's People

Contributors

patr1ck avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.