USMapWithMergedStates

US map with states merged into regions

Configuration Options

chartName

Type: string
Default: "MergedStates"

Name of chart for Reporting.

chartPrimarySeriesColors

Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]

Primary colors used to represent series data

generalWashoutColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is not highlighted

height

Type: number
Default: 500
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.

mapScale

Type: number
Default: 1000

undefined

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color for the tooltip

tooltipFontFamily

Type: string
Default: "Open Sans"

Font family for the tooltip

tooltipTextColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip text

tooltipTextSize

Type: number
Default: 12
Units: px

Font size for the tooltip text

transitionTime

Type: number
Default: 500

undefined

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 500
Units: px

Width of the widget

Data Definition

Region

Type: string

Default validate:

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

Default accessor:

function (line) { return line[0] === undefined ? undefined : String(line[0]); }

State

Type: string

Default validate:

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

Default accessor:

function (line) { return line[0] === undefined ? undefined : String(line[0]); }

Events

Dispatch Events

External Events

Example

var data = [
    ['ALABAMA', 'Digital Region'],
    ['ALASKA', 'Digital Region'],
    ['ARIZONA', 'Digital Region'],
    ['ARKANSAS', 'South'],
    ['CALIFORNIA', 'CALIFORNIA'],
    ['COLORADO', 'Digital Region'],
    ['CONNECTICUT', 'Digital Region'],
    ['DELAWARE', 'Digital Region'],
    ['FLORIDA', 'South'],
    ['GEORGIA', 'South'],
    ['HAWAII', 'No Region'],
    ['INDIANA', 'Digital Region'],
    ['IOWA', 'Digital Region'],
    ['KANSAS', 'Digital Region'],
    ['KENTUCKY', 'Digital Region'],
    ['LOUISIANA', 'South'],
    ['MAINE', 'Digital Region'],
    ['MARYLAND', 'Digital Region'],
    ['MASSACHUSETTS', 'Digital Region'],
    ['MICHIGAN', 'Digital Region'],
    ['MINNESOTA', 'Digital Region'],
    ['MISSISSIPPI', 'South'],
    ['MISSOURI', 'Digital Region'],
    ['MONTANA', 'Midwest'],
    ['NEBRASKA', 'Midwest'],
    ['NEVADA', 'Digital Region'],
    ['NEW HAMPSHIRE', 'Digital Region'],
    ['NEW JERSEY', 'Digital Region'],
    ['NEW MEXICO', 'Midwest'],
    ['NEW YORK', 'Digital Region'],
    ['NORTH CAROLINA', 'South'],
    ['NORTH DAKOTA', 'Midwest'],
    ['OHIO', 'Digital Region'],
    ['OKLAHOMA', 'Midwest'],
    ['OREGON', 'Digital Region'],
    ['PENNSYLVANIA', 'Digital Region'],
    ['RHODE ISLAND', 'Digital Region'],
    ['SOUTH CAROLINA', 'South'],
    ['SOUTH DAKOTA', 'Digital Region'],
    ['TENNESSEE', 'South'],
    ['TEXAS', 'South'],
    ['UTAH', 'Digital Region'],
    ['VERMONT', 'Digital Region'],
    ['VIRGINIA', 'Digital Region'],
    ['WASHINGTON', 'Digital Region'],
    ['WEST VIRGINIA', 'Digital Region'],
    ['WISCONSIN', 'Digital Region'],
    ['WYOMING', 'Midwest']
];

var i  = 1;
var aHeight = 500 * i;
var aWidth  = 500 * i;

var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: aHeight,
    width: aWidth
  })
  .append('g')
  .attr('transform', 'translate(45,131)')
  .chart('USMapWithMergedStates')
  .c({
    'width': 410.9,
    'height': 239
  });

//d3.select('svg')
//    .insert('rect', ':first-child')
//    .attr('height', aHeight)
//    .attr('width', aWidth)
//    .attr('stroke', 'black')
//    .style('fill-opacity', 0);

chart.draw(data);