Model(data)

A data model for storing named datasets.

parameter type description
data Object or d3.map

optional datasets to initialize

Examples

var model = new eiti.data.Model();

load(name, url, [callback])

Load data from a URL into a named dataset.

parameter type description
name String

the unique dataset name

url String

the URL to load

callback [Function]

the callback function

Examples

model.load('states', 'path/to/states.json', function(error, topology) {
});

get(name)

parameter type description
name String

the dataset name

Returns

Boolean :

true if the named dataset exists, false if not

has(name)

parameter type description
name String

the dataset name

Returns

Boolean :

true if the named dataset exists, false if not

set(name, data)

Store a dataset with a unique key

parameter type description
name String

the dataset name

data Any

the data to store

Returns

Any :

returns the data as set

createIndex(src, dest, keys, [rollup])

Create a nested index using eiti.data.nest from a named dataset and alias it to a new name.

parameter type description
src String

the source dataset name

dest String

the destination dataset name

keys Array<String or Function>

the keys to nest

rollup [Function]

the optional rollup function

Examples

model.set('foo', [
  {x: 'bar', y: 'baz'},
  {x: 'qux', y: 'quux'}
]);
var index = model.createIndex('foo', 'bar', ['x', 'y']);
assert.deepEqual(index, {
  bar: {
    baz: [
      {x: 'bar', y: 'baz'}
    ],
  },
  qux: {
    quux: [
      {x: 'qux', y: 'quux'}
    ]
  }
});

eiti.charts.area

An area chart generator for d3.

Returns

areaChart

Examples

var area = eiti.charts.area()
  .x(function(d) { return d.year; })
  .y(function(d) { return d.category; })
  .value(function(d) { return d.value; });

d3.select('svg')
  .call(area, [
     {year: 2000, category: 'x', value: 10},
     {year: 2001, category: 'x', value: 12},
     // ...
     {year: 2010, category: 'y', value: 8}
  ]);

areaChart(svg, [data])

Renders a chart in a given d3 selection. Use eiti.charts.area to create one.

parameter type description
svg d3.selection

a d3 <svg> element selection

data [Array]

optional data

y([y])

Get or set the chart's layer group accessor.

parameter type description
y [String or Function]

set the layer group accessor

Examples

var y = areaChart.y();
areaChart.y(function(d) { return d.Commodity; });
areaChart.y('Commodity'); // same as above

x([x])

Get or set the chart's horizontal value accessor.

parameter type description
x [String or Function]

set the horizontal value accessor

Examples

var x = areaChart.x();
areaChart.x(function(d) { return d.Year; });
areaChart.x('Year'); // same as above

voronoi([voronoi])

Toggle creation of Voronoi regions for interactivity.

parameter type description
voronoi [Boolean]

if true, voronoi regions will be created

value([v])

Get or set the chart's vertical (numeric) value accessor.

parameter type description
v [String or Function]

set the vertical value accessor

Examples

var value = areaChart.value();
areaChart.value(function(d) { return d.Revenue; });
areaChart.value('Revenue'); // same as above

stacked([stacked])

Toggle stacking layout. Area charts are not stacked by default.

parameter type description
stacked [Boolean]

if true, enabled stacking layout

Examples

var stacked = areaChart.stacked();
areaChart.stacked(true); // tell it to stack

margin([margin])

Get or set the chart's margin in pixels.

parameter type description
margin [Any]

set the margin as returned by eiti.ui.margin.

Examples

var margin = areaChart.margin();
areaChart.margin({top: 0, right: 20, bottom: 30, left: 10});
areaChart.margin([0, 100]); // NB: [y, x]
areaChart.margin(20); // 20 on all sides

log([log])

Toggle logarithmic y-axis scaling.

parameter type description
log [Boolean]

if true, enabled logarithmic scaling

Examples

var log = areaChart.log();
areaChart.log(true); // use logarithmic scaling

fill([fill])

Get or set the layer fill accessor.

parameter type description
fill [Any]

set the fill accessor

Examples

var fill = areaChart.fill();
areaChart.fill(d3.scale.category20());
areaChart.fill(function(d, i) {
  return i % 2 ? 'yellow' : 'orange';
});
areaChart.fill('red');

Commodities

Commodity grouping and color model.

getGroups

Get the list of commodity groups as an array.

Returns

Array<String>

getGroup(commodity)

Get the nesting group for a given commodity.

parameter type description
commodity String

Returns

String :

the commodity group

getPrimaryColor(commodity)

Get the primary color for a commodity group.

parameter type description
commodity String

the commodity or group

Returns

String :

a CSS color

getColors(commodity, steps)

Get the colors associated with a commodity's group color scheme.

parameter type description
commodity String

the commodity or group

steps Number

the number of color steps (default: 9)

Returns

Array<String>

setGroup(commodity, group)

Set the nesting group for a given commodity.

parameter type description
commodity String
group String

OTHER

The group to which commodities with an unspecified group will be assigned, namely Other Commodities.

eiti.format.shortDollars(num)

Produces short dollar strings in SI format with 1 decimal, e.g. $1.2m or $4.8b.

parameter type description
num Number

Returns

String

eiti.format.dollarsAndCents(num)

Produces dollar strings with thousands separators and 2-decimal cents, e.g. $1,234,567.89.

parameter type description
num Number

Returns

String

eiti.format.dollars(num)

Produces whole dollar strings with thousands separators, e.g. $1,234,567.

parameter type description
num Number

Returns

String

eiti.data.nest(rows, keys, [rollup])

Nest data into an object structure:

parameter type description
rows Array

a dimensional tabular data set

keys Array

a list of key functions or property names

rollup [Function]

an optional value rollup function

Examples

var data = [{x: 1, y: 2}, {x: 2, y: 2}];
var nested = eiti.data.nest(data, ['x', 'y']);
assert.deepEqual(nested, {
  1: {
    2: [
      {x: 1, y: 2}
    ]
  },
  2: {
    2: [
      {x: 2, y: 2}
    ]
  }
});

eiti.data.walk(data, callback)

Walk a nested object structure and call a function on each "leaf" node (that is not an object).

parameter type description
data Array or Object

the array or object to iterate over

callback Function

the function to call on each leaf node

Examples

var value = [];
eiti.data.walk({foo: {bar: 'baz'}}, function(d, i) {
  values.push(d);
});
assert.deepEqual(values, ['baz']);

eiti.format.metric(num)

Produces international system/metric form, e.g. 4.1M

parameter type description
num Number

Returns

String

eiti.format.range(format)

Create a range formatter that strips the preceding $ from the second value to produce strings like $10m - 20m instead of $10m - $20m.

parameter type description
format String or Function

eiti.data.getter(key)

Create a key getter function a la Python's itertools.itemgetter().

parameter type description
key String or Number or Function

Returns

Function

Examples

var title = eiti.data.getter('title');
var titles = data.map(title);

eiti.ui.slider

Create a slider from a d3 selection that dispatches 'change' events whenever the element is clicked, tapped or dragged.

Examples

var slider = eiti.ui.slider()
   .range([0, 100])
   .on('change', function(e) {
     console.log('slider value:', e.value);
   });
 d3.select('#slider')
   .call(slider);

eiti.ui.tip

Create an augmented d3-tip instance with "show" and "hide" event dispatching capabilities. EITI tips also have a .target() accessor which allows you to override the element that's used to calculate tooltip positioning.

Examples

var tip = eiti.ui.tip()
  .on('show', function() {
    console.log('tip show:', this);
  })
  .target(function() {
    return this.querySelector('circle');
  });

eiti.ui.margin(input)

Create a margin object {top, right, left, bottom} from any of the following types:

  • string: coerce to a number
  • number: a margin object with equal top, right, left and bottom values
  • array: read the values as [top, right, bottom, left] if there are 4 or more elements; otherwise read as [vertical, horizontal]
  • object: set top, right, bottom and left keys to 0 if not set, then return the object

parameter type description
input Any

eiti.util.extend(base, [other])

Extend objects with additional properties, a la $.extend().

parameter type description
base Object

the base object onto which all other properties will be added

other [Object]

one or more additional objects with properties to be copied

Returns

Object :

the base object with added properties

eiti.util.jiggleHash

Force a reset of location.hash so that the browser (hopefully) scrolls to the element with the fragment identifier and toggles the :target pseudo-class.

Returns

Boolean

eiti.util.bringToFront

d3 helper for bringing an element to the front among its siblings. Use it with an event listener, e.g.:

Examples

d3.selectAll('svg path')
  .on('mouseover', eiti.util.bringToFront);

eiti.util.sendToBack

The compliment to bringToFront, returns an element to its previous position among its siblings.

Examples

d3.selectAll('svg path')
  .on('mouseover', eiti.util.bringToFront)
  .on('mouseout', eiti.util.sendToBack);

eiti.format.transform(format, transform)

Create a composite format that wraps a d3 format (or any other formatting function) with a transform function.

parameter type description
format String or Function
transform Function

Returns

Function