ZoomFunnel

Funnel widget with a zoom slider

Configuration Options

animate

Type: boolean
Default: true

Boolean if chart should animate

barFillColor

Type: color
Default: "#73B0D7"

Fill color of the bars

barPadding

Type: number
Default: 5
Units: px

The space between the bars

barWashoutColor

Type: color
Default: "#E4E5E5"

Color used to indicate bars that are not being highlighted

fontFamily

Type: string
Default: "Open Sans"

Font family of the labels and values

funnelHeight

Type: number
Default: 372
Units: px

undefined

funnelWidth

Type: number
Default: 400
Units: px

Funnel width at max zoom

height

Type: number
Default: 400
Units: px

Height of the widget

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

knobColor

Type: color
Default: "#555555"

Fill color for the circle on the zoom bar

knobRadius

Type: number
Default: 8
Units: px

Radius of the circle on the zoom bar

maxZoom

Type: number
Default: 100
Units: units

The arbitrary maximum amount you can zoom

minZoom

Type: number
Default: 0
Units: units

The arbitrary minimum amount you can zoom

prefix

Type: string
Default: ""

Text added before the number values

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showTooltip

Type: select
Default: {"name":"Show","value":true}

Show or hide the tooltip

suffix

Type: string
Default: ""

Text added after the number values

textColor

Type: color
Default: "#333"

Color of text when it is outside of the bars

textColorInsideBars

Type: color
Default: "#FFFFFF"

Color of text when it is inside of the bars

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color for the tooltip

tooltipTextColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip text

tooltipTextSize

Type: number
Default: 14
Units: px

Font size for the body text

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

valueTextSize

Type: number
Default: 18
Units: px

Text size of bar number values

width

Type: number
Default: 400
Units: px

Width of the widget

zoomBarFilledColor

Type: color
Default: "#555555"

Fill color for the zoom bar

zoomBarNotFilledColor

Type: color
Default: "#E4E5E5"

Color of the bar when it is not filled (right of the knob)

zoomHeight

Type: number
Default: 8
Units: px

undefined

zoomLabelTextColor

Type: color
Default: "#333333"

Font color for the zoom range values

zoomLabelTextSize

Type: number
Default: 14
Units: px

Font size for the zoom range values

zoomPercent

Type: number
Default: 0.75
Units: px

Initial starting x value of zoom knob

zoomWidth

Type: number
Default: 340
Units: px

undefined

Data Definition

Date

Type: date

Default validate:

function (d) { return new Date(this.accessor(d)) !== 'Invalid Date'; }

Default accessor:

function (line) { return line[2]; }

category

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return String(line[0]); }

value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

function (line) { return Number(line[1]); }

Events

Dispatch Events

dispatch:mousedrag

External Events

external:mousedrag

Example

//Setup some fake data
var data = [
  ['North', 15000],
  ['North', 10000],
  ['North', 7000],
  ['South', 6000],
  ['South', 4000],
  ['South', 3000],
  ['East', 2900],
  ['East', 1500],
  ['West', 1000],
  ['West', 100],
  ];

var width = 400;
var height = 400;

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    'height': 500,
    'width': 500
  })
  .append('g')
  .attr('transform', 'translate(29,45)')
  .chart('ZoomFunnel')
  .c({
    'height': height,
    'width': width,
  });

//Render the chart with data
chart.draw(data);