pooch.js

The main components for the pooch.js charting and mapping library are:

pooch.chart()
pooch.data()
pooch.fetch()
pooch.helpers
pooch.map()
pooch.popup()
pooch.symbolGroup()
pooch.zoomControl()

View the Project on GitHub blueshirt/pooch.js

When a pet project becomes a reality... pooch.js

Create an interactive chart or map in just a few lines with the pooch.js JavaScript library:

var chart1 = pooch.chart (".container").symbolGroup ([symGrp1, symGrp2])
                                       .height (400)
                                       .width (800)
                                       .bounds (symGrp1)
                                       .zoomControl (zoomControl1);

examples

counties map
hexadogs!
interactive globe
animated slippy
simple pie chart
many pie charts

utilities

Sometimes you may want to create an interactive chart with data from Excel. Or there may be times when you want to load a shapefile in the browser and build an interactive thematic map. Other times you may want to dress up like a tree and hold really, really still. The pooch.js library can help you with two of those three things. Use the pooch.js designer utility to start converting files and data into something useful.


documentation


pooch.chart ( div )

div - string or dom element to use as a chart container

Charts are the basis for all drawing in pooch. Elements (symbolGroup, zoom controls, etc.) are added to the chart and then drawn and potentially animated.

examples

    var myChart = pooch.chart("#divID")';                     //sets the chart's container using a div's ID
    var myChart = pooch.chart(".divClassName")';              //sets the chart's container using a div's class ID
    var myChart = pooch.chart(pooch.fetch("#divID").dom())';  //sets the chart's container using a fetched div

.activeSymbol( symbolGroup, key )

symbolGroup - symbolGroup object containing the individual symbol to make active
key - string of the individual symbol name, defined in the data key

Gets or sets the active symbol in the chart.

examples

    myChart.activeSymbol(symGrp1, "montana");   //sets the active symbol
    myChart.activeSymbol();                      //gets the active symbol


.axisMaxX( number )

number - integer to use as maximum x value

Gets or sets the maximum x value (right) of current chart viewing area. This does not set the position of the chart on the page, but rather sets the maximum x value to use for placing the chart's symbols. Zooming in or out will update this value.

examples

    myChart.axisMaxX(50000);   //sets the chart's maximum x value
    myChart.axisMaxX();        //gets the chart's maximum x value


.axisMinX( number )

number - integer to use as minimum x value

Gets or sets the minimum x value (left) of current chart viewing area. This does not set the position of the chart on the page, but rather sets the minimum x value to use for placing the chart's symbols. Zooming in or out will update this value.

examples

    myChart.axisMinX(0);   //sets the chart's minimum x value
    myChart.axisMinX();    //gets the chart's minimum x value


.axisMaxY( number )

number - integer to use as maximum y value

Gets or sets the maximum y value (top) of current chart viewing area. This does not set the position of the chart on the page, but rather sets the maximum y value to use for placing the chart's symbols. Zooming in or out will update this value.

examples

    myChart.axisMaxY(3000);   //sets the chart's maximum y value
    myChart.axisMaxY();       //gets the chart's maximum y value


.axisMinY( number )

number - integer to use as minimum y value

Gets or sets the minimum y value (bottom) of current chart viewing area. This does not set the position of the chart on the page, but rather sets the minimum y value to use for placing the chart's symbols. Zooming in or out will update this value.

examples

    myChart.axisMinY(0);   //sets the chart's minimum y value
    myChart.axisMinY();    //gets the chart's minimum y value


.bounds( symbolGroup )

symbolGroup - symbolGroup for framing the current chart view

Gets or sets the viewable bounds of the chart.

examples

    myChart.bounds(symGrp1);   //sets the viewable extent of the chart
    myChart.bounds();           //gets the viewable extent of the chart


.draw( steps, layer )

steps optional - number of tweening steps
layer optional - string defining which chart layer to draw, either "back" or "main"

Draws the symbols and chart. Calling draw() with no arguments will draw all layers, and therefore all symbols, in one step. Passing in the number of steps will animate the symbols to their end state using the symbol's easing property. Valid values for the layer argument are "back" and "main."

examples

    myChart.draw();           //draws all layers in one step
    myChart.draw(10);         //draws all layers in 10 steps, animating symbols from their start position to their end position
    myChart.draw(5, "main");  //draws only the symbols on the main layer, in 5 steps


.height( number )

number - height of the chart

Gets or sets the height of the chart.

examples

    myChart.height(800); //sets the height of the chart
    myChart.height();    //gets the height of the chart


.house( element )

element - DOM element (div) or string of the container ID to house the chart

Gets or sets the container for the chart. Typically, the chart is initialized with a container, but this method can also be used. This method is the best way to retrieve the chart's container after initialization.

examples

    myChart.house("#divID")';                     //sets the chart's container using a div's ID
    myChart.house(".divClassName")';              //sets the chart's container using a div's class ID
    myChart.house(pooch.fetch("#divID").dom())';  //sets the chart's container using a fetched div
    myChart.house();                              //gets the chart's containing DOM element (div)


.mouseMove( callback )

callback - function to call on mouse move

Custom mouse event initializer which adds two new variables, localX and localY, to javaScipt's existing mousemove event. The custom variables are useful for tracking mouse movement while also taking into account the chart's scroll offsets and other layout attributes.

examples

    myChart.mouseMove(myCallback);       //passes a callback function to trigger on mouse move

    function myCallback(e)               //called when mouse moves on the chart
    {
      console.log(e.localX, e.localY);   //shows pooch's custom mouse event variables, localX and localY
    }


.mouseOver( callback )

callback - function to call when the cursor enters the chart

Custom mouse event initializer for when the cursor enters the chart.

examples

    myChart.mouseOver(myCallback);   //passes a callback function to trigger on mouse over

    function myCallback()
    {
      console.log("cursor is now over the chart");
    }


.mouseOut( callback )

callback - function to call when the cursor leaves the chart

Custom mouse event initializer for when the cursor leaves the chart.

examples

    myChart.mouseOut(myCallback);   //passes a callback function to trigger on mouse out

    function myCallback()
    {
      console.log("cursor has left the chart");
    }


.reset( )

Resets the chart's view to the default extent and zoom level.

examples

    myChart.reset();   //draws the chart at its default extent and zoom level


.symbolGroup( array )

array - collection of symbolGroups to add to the chart

Adds symbolGroups to the chart for display and animation. The symbolGroups are drawn in the order they are placed into the array, so the symbolGroup at index 0 is drawn before the symbolGroup at index 2. Layering of the symbolGroups is achieved using a combination of the symbol's order in the array and the symbolGroup's layer method.

examples

    myChart.symbolGroup([symGrp1]);                     //adds a symbolGroup to the chart
    myChart.symbolGroup([symGrp1, symGrp2, symGrp3]);   //adds multiple symbolGroups to the chart


.width( number )

number - width of the chart

Gets or sets the width of the chart.

examples

    myChart.width(800);   //sets the width of the chart
    myChart.width();      //gets the width of the chart


.zoom( level )

level - index of the zoom levels array

Gets or sets the zoom level for the chart. The level index starts at 0. The zoom levels array may contain several levels that you define, and the five default levels are [1, 2, 4, 8, 16].

examples

                       //assumes a zoom level array of [1, 2, 4, 8, 16]  
    myChart.zoom(3);   //sets the zoom level to 3 (8 times original size, in this case)
    myChart.zoom();    //gets the zoom level


.zoomIn()

Zooms the chart in one zoom level.

examples

    myChart.zoomIn();   //zooms the chart in


.zoomLevels( array )

array - array of zoom levels

Gets or sets the array of zoom levels for the chart. The array may contain several levels that you define, and the five default levels are [1, 2, 4, 8, 16]. The levels can be called through the zoom method.

examples

    myChart.zoomLevels([1, 4, 16, 48]);   //sets the zoom levels array to [1, 4, 16, 48]
    myChart.zoomLevels();                 //gets the zoom levels array


.zoomOut()

Zooms the chart out one zoom level.

examples

    myChart.zoomOut();   //zooms the chart out



pooch.data ( array )

array - array of JSON objects containing information to use as a symbolGroup's properties

Data objects provide the information necessary to draw a symbolGroup. Data objects are intialized with an array of JSON objects that then need to be combined with a key. Data objects are ready to be used as symbolGroup data after the key has been set.

examples

    var myData = pooch.data([markerAttrData])';               //creates a data object using a single JSON object
    var myData = pooch.data([polyShapeData, polyAttrData])';  //creates a data object using a multiple JSON objects


.key( id )

id - string

Gets or sets the key name for any symbolGroup created from the data.

examples

    myData.key("names");   //structures the data object to use the names field as keys
    myData.key();          //gets the field used as a key name


.keys( )

Gets an array of key names for the data, created when the data key is set.

examples

    myData.keys();   //gets an array of the key names in the data object


.datum( key, value )

id - string ID of the symbol to get or set
value optional - object containing the new values for an individual symbol

Gets or sets the data for an individual symbol. Calling datum() with no arguments will return all of the data for the data object. Including a value argument will set the object defined by the key argument.

examples

    myData.datum();                                  //gets all of the objects in the data object
    myData.datum("wisconsin");                       //gets the data object with the "wisconsin" key
    myData.datum("wisconsin", {squareMiles: 65503}); //sets the "wisconsin" object with a new set of key/value pairs




pooch.fetch ( id )



pooch.helpers



pooch.map ( div )



pooch.popup ( id )



pooch.symbolGroup ( shape )



pooch.zoomControl ( id )


Authors and Contributors

Jeremy White (@blueshirt), graphics editor for The New York Times, started pooch.js in his spare time.

This project is maintained by blueshirt

Hosted on GitHub Pages — Theme by orderedlist