d3.chart.choropleth

A d3.chart based choropleth map with an easily modified domain and built-in color-brewer colors based on a quantize scale.

YlGnBu color brew:

OrRd color brew:

Sample Use

// YlGnBu color brew, custom domain
var chart_1 = d3.select('#map1')
  .append("svg")
  .attr("height", 500)
  .attr("width", 480)
  .chart("Choropleth")
  .domain([0, 15])
  .range('YlGnBu')
  .projection(d3.geo.albersUsa())
  .scale(500);

// OrRd color brew, wider domain
var chart_2 = d3.select('#map2')
  .append("svg")
  .attr("height", 500)
  .attr("width", 480)
  .chart("Choropleth")
  .domain([0, 25])
  .range('OrRd')
  .projection(d3.geo.albersUsa())
  .scale(500);

API

Sample API Documentation:

<instance>.height(newHeight)

Description:

When value provided sets the height of the map. If no value provided, defaults to 500 for bl.ocks integration.

Parameters:

• newHeight - Integer, optional, new height

Uses:

Example:

var map = d3.select("#map")
  .append("svg")
  .chart("Choropleth")
  .height(500);

<instance>.width(newWidth)

Description:

When value provided sets the width of the map. If no value provided, defaults to 960 for bl.ocks integration.

Parameters:

• newWidth - Integer, optional, new width

Uses:

Example:

var map = d3.select("#map")
  .append("svg")
  .chart("Choropleth")
  .width(900);

<instance>.range(newRange)

Description:

When value provided sets the color range for the map, based on the color brewer colors. Must pass one of the following:

• BuGn
• BuPu
• GnBu
• OrRd
• PuBu
• PuBuGn
• PuRd
• RdPu
• YlGn
• YlGnBu
• YlOrBr
• YlOrRd

Defaults to YlGnBu.

Parameters:

• newRange - String, optional, new color range

Uses:

Example:

var map = d3.select("#map")
  .append("svg")
  .chart("Choropleth")
  .range('RdPu');

<instance>.domain(newDomain)

Description:

When value provided sets the quantize scale domain for the map. Defaults to [0, data.max]

Parameters:

• newDomain - Array, optional, new quantize scale domain

Uses:

Example:

var map = d3.select("#map")
  .append("svg")
  .chart("Choropleth")
  .domain([10, 50]);

<instance>.projection(newProjection)

Description:

When value provided sets the map projection. Defaults to d3.geo.mercator. See the D3 projections page for additional projection options.

Parameters:

• newProjection - d3.geo projection, optional, new projection

Uses:

Example:

var map = d3.select("#map")
  .append("svg")
  .chart("Choropleth")
  .projection(d3.geo.stereographic());

<instance>.scale(newScale)

Description:

When value provided sets the map scale. Defaults to 1000.

Parameters:

• newScale - Integer, optional, new map scale

Uses:

Example:

var map = d3.select("#map")
  .append("svg")
  .chart("Choropleth")
  .scale(100)