Data Exploration Widgets

Specification

Each widget is specified as an entry in the widgets array in map-config.js.

const widgets = [
    {
        type: string,
        display: string,
        options: { ... },
        ...
    }
];

All widgets require the following fields:

Key

Type

Description

type

One of: histogram, scatter, scatter3d, line

The basic type of widget.

display

One of: pinned, tray, hidden

The starting position of the widget; widgets can be dragged by users.

options

Map

Additional options: see below. You must specify a value; to use default values, set to {}.

Widget Types

Histograms

Create visualizations for single variables with histograms. Histograms are also interactive and can be used to filter what's highlighted on the map.

Configuration

{
    type: "histogram",
    display: "pinned" | "tray" | "hidden",
    variable: string,
    options: {
        header: string,
        foregroundColor: color,
        xAxisLabel: string,
        yAxisLabel: string,
        thresholds: int
    }
}

Key

Type

Description

Default

variable

string

The name of the variable to display.

Required

options.header

string

The header/title of the widget.

null

options.foregroundColor

hex code

The color of the bars.

#000000

options.xAxisLabel

string

The label of the x-axis.

null

options.yAxisLabel

string

The label of the y-axis.

null

options.thresholds

int

This option will be passed to D3's binning function; the number of bins is not guaranteed to match this number.

40

2D Scatterplots

Configuration

{
    type: "scatter",
    display: "pinned" | "tray" | "hidden",
    xVariable: string,
    yVariable: string,
    options: {
        header: string,
        foregroundColor: color,
        pointSize: number,
        xAxisLabel: string,
        yAxisLabel: string,
        showBestFitLine: bool,
        removeZeroValues: bool
    }
}

Key

Type

Description

Default

xVariable

string

The name of the x-axis variable.

Required

yVariable

string

The name of the y-axis variable.

Required

options.header

string

The header/title of the widget.

null

options.foregroundColor

hex code

The color of the points.

#000000

options.pointSize

number

The radius of the scatter points.

0.1

options.xAxisLabel

string

The label of the x-axis.

null

options.yAxisLabel

string

The label of the y-axis.

null

options.showBestFitLine

bool

Set to true to calculate and display a best fit line using linear regression.

false

options.removeZeroValues

bool

Set to true to remove points with zero values.

false

LISA Scatterplots

LISA statistics can be generated and plotted in Scatterplot widgets. To plot spatial lag values, set your yVariable to LISA:

{
    type: "scatter",
    yVariable: "LISA"
    // ...
}

Best fit lines are not supported for LISA scatterplots.

Clustering

Scatterplot widgets can calculate clusters using k-means clustering and display them as colors.

{
    type: "scatter",
    options: {
        foregroundColor: "cluster",
        numClusters: int,
        clusterColors: color[]
        // ...
    }
    // ...
}

Additional configuration options for cluster charts

Key

Type

Description

Default

options.foregroundColor

string

Should be set to "cluster"

Required

options.numClusters

int

The number of clusters to generate.

2

options.clusterColors

array of hex codes

The colors to use for each cluster. Should be an array with length >= numClusters

Required

3D Scatterplots

Configuration

{
    type: "scatter3d",
    display: "pinned" | "tray" | "hidden",
    xVariable: string,
    yVariable: string,
    zVariable: string,
    options: {
        header: string,
        foregroundColor: color,
        pointSize: number,
        xAxisLabel: string,
        yAxisLabel: string,
        zAxisLabel: string,
        gridlinesInterval: [number, number, number]
    }
}

Key

Type

Description

Default

xVariable

string

The name of the x-axis variable.

Required

yVariable

string

The name of the y-axis variable.

Required

zVariable

string

The name of the z-axis variable.

Required

options.header

string

The header/title of the widget.

null

options.foregroundColor

hex code

The color of the points.

#000000

options.pointSize

number

The radius of the scatter points.

0.5

options.xAxisLabel

string

The label of the x-axis.

null

options.yAxisLabel

string

The label of the y-axis.

null

options.zAxisLabel

string

The label of the z-axis.

null

options.gridlinesInterval

number[3]

The intervals at which to draw gridlines and labels. Order: [x, y, z]. If omitted, no gridlines will be shown.

null

Line

Display one-dimensional variables over time as a 2D line chart.

Configuration

{
    type: "line",
    display: "pinned" | "tray" | "hidden",
    variable: string,
    options: {
        header: string,
        foregroundColor: color,
        pointSize: number,
        xAxisLabel: string,
        yAxisLabel: string,
        showBestFitLine: bool,
        removeZeroValues: bool
    }
}

Key

Type

Description

Default

variable

string

The name of the variable to display.

Required7

options.header

string

The header/title of the widget.

null

options.foregroundColor

hex code

The color of the line.

#000000

options.pointSize

number

The radius of the points on the line.

1

options.xAxisLabel

string

The label of the x-axis.

null

options.yAxisLabel

string

The label of the y-axis.

null

options.dateFormat

string

The format of the date labels. Specification on Day.js docs

"YYYY-MM-DD"

Last updated