Code Monkey home page Code Monkey logo

ticks's Introduction

Ticks

A utility for choosing nice tick marks or histogram intervals.

This project is just an experiment. Use d3-scale if you need nice tick intervals, like this:

var ticks = d3.scale.linear()
  .domain(extent(data, accessor))
  .nice(count)
  .ticks(count);

In the above code, count is the approximate number of desired ticks.

API

ticks(min, max, n)

  • min The minimum value of the interval.
  • max The maximum value of the interval.
  • n The approximate number of desired ticks.

Returns an array of "ticks", numbers that are suitable to use as tick mark values. The first tick will be less than or equal to min, and the last tick will be greater than or equal to max.

Usage

Install via NPM:

npm install -S ticks

Example use:

var ticks = require("ticks");

ticks(0.5432, 9.543, 10); //[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
ticks(1, 10000, 5); // [ 0, 2000, 4000, 6000, 8000, 10000 ]
ticks(-1, 1, 10); // [-1,-0.8,-0.6,-0.4,-0.2,0,0.2,0.4,0.6,0.8,1]
ticks(1000, 1002, 10); //[1000,1000.2,1000.4,1000.6,1000.8,1001,1001.2,1001.4,1001.6,1001.8,1002]

API

# ticks(min, max, numTicks [,tight])

Computes and returns approximately numTicks ticks spaced nicely that include the given interval.

If tight is specified, then the first tick is the min, and the last tick is the max. The The Graphics Gems chapter "Nice Numbers for Graph Labels" by Paul S. Heckbert introduces the notion of "loose" and "tight" tick marks.

Algorithm

The algorithm for computing ticks is based on the idea of a "nice interval". Nice intervals can be expressed as (base * 10^exp), where exp is some integer exponent, and base is either 1, 2, or 5. Examples of nice intervals are 0.1, 0.5, 10, 20, 5, 2, and 500.

The Ticks algorithm computes the exponent of the raw interval, by Math.log10((max - min) / n), then computes both the floor and ceiling of this value, which are candidate exponents for use in generating nice intervals. The algorithm then tries all 6 possible combinations of the two candidate exponents with the possible bases (1, 2, and 5) to generate a set of candidate nice intervals. From the generated set of nice intervals, the one that is closest to the raw interval ((max - min) / n) is chosen.

Related Work

The seminal approach for generating tick marks appeared in "Nice Numbers for Graph Labels" by Paul S. Heckbert in the book "Graphics Gems", originally published in 1990.

Subsequently, there have been a variety of new takes on the problem. This research paper presents an approach for this that takes more factors into account, including the actual size of label text: An Extension of Wilkinson’s Algorithm for Positioning Tick Labels on Axes, by Justin Talbot, Sharon Lin, and Pat Hanrahan, and also surveys other algorithms.

Also, a similar algorithm is implemented in D3.scale.linear.ticks.

Development Tooling

This module is published as an NPM package. The module itself is authored using ES6 module syntax in index.js, which is declared as the jsnext:main entry point in package.json so it can be included in Rollup-based builds. The module is converted to CommonJS format in the prepublish script, which runs the pretest and test scripts, making the built file ticks.jsavailable in the NPM package. The built file is excluded from the Git repository via the.gitignorefile. Usually NPM ignores files in.gitignore, so to cause NPM to include ticks.js, an [empty .npmignore` file was added.

Here's what it looks like when npm publish is run:

During development you can run npm test to run the Rollup build and run the unit tests. The Mocha unit tests are written in ES5, and consume the CommonJS package generated by Rollup via Node.js.

This approach for using NPM and package.json to run Rollup and tests was inspired by the way d3-scale is organized and built. See d3-scale/package.json.

Curran Kelleher June 2015

ticks's People

Contributors

curran avatar

Watchers

James Cloos avatar Mark Chenoweth avatar  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.