USCartogram

US Cartogram with colored circles representing data and a legend

Configuration Options

chartName

Type: string
Default: "USCartogram"

Name of chart for Reporting.

colorTheme

Type: undefined
Default: {"name":"Orange","value":["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"]}

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.

labelTextSize

Type: number
Default: 12
Units: px

The max text size of the labels in the circles (if the text is too big for the circle, it will shrink to a minimum size of 10)

legendFontColor

Type: color
Default: "#999999"

Font color for the legend

legendLabelSpacing

Type: number
Default: 30
Units: px

Padding between the icons and text

legendRangeMax

Type: number
Default: 100

Maximum value for the legend

legendRangeMin

Type: number
Default: 0

Minimum value for the legend

legendRowHeight

Type: number
Default: 30

Height of the legend rows

legendWidth

Type: number
Default: 100
Units: px

Legend width, which will determine length of the dividing lines

maxRadius

Type: number
Default: 20
Units: px

The maximum radius size for the circle with the largest value

minRadius

Type: number
Default: 0
Units: px

The minimum radius size for the circle with the smallest value

numDistribution

Type: number
Default: 7

Number of colors used to distribute the data into ranges (i.g. if the data values range from 0 to 100 and there are four colors, color 1 represents the data values for 0-25, color 2 for 26-50, color 3 for 51-75, and color 4 for 76-100)

padding

Type: number
Default: 6
Units: px

Padding between each circle

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

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

undefined

updateSizeableConfigs

Type: boolean
Default: true

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

usingStateAbbr

Type: boolean
Default: {"name":"Full Form","value":false}

Set the expected data format for the states to be either written out or abbreviated (i.g. California vs CA)

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

Percent

Type: number

Default validate:

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

Default accessor:

function (line) { return line[2] === null ? null : Number(line[2]); }

State

Type: string

Default validate:

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

Default accessor:

function (line) { return line[0] === undefined ? undefined : 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

External Events

external:mouseover
external:mouseout

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  //state            value    percent
  ['Alaska',         375135,  0.82],
  ['Hawaii',         564268,  0.82],
  ['California',     999999,  0.10],
  ['Colorado',       215869,  0.89],
  ['Connecticut',    235208,  0.91],
  ['Delaware',       696908,  0.35],
  ['Florida',        161146,  0.10],
  ['Georgia',        416345,  0.13],
  ['Iowa',           583482,  0.44],
  ['Idaho',          273991,  0.13],
  ['Illinois',       142835,  0.68],
  ['Indiana',        160836,  0.67],
  ['Kansas',         761592,  0.63],
  ['Kentucky',       357259,  0.99],
  ['Louisiana',      499651,  0.28],
  ['Massachusetts',  770616,  0.51],
  ['Maryland',       319129,  0.94],
  ['Maine',          987348,  0.17],
  ['Michigan',       741533,  0.80],
  ['Minnesota',      82273,   0.80],
  ['Missouri',       354202,  0.84],
  ['Mississippi',    14454,   0.13],
  ['Montana',        632269,  0.80],
  ['North Carolina', 709175,  0.70],
  ['North Dakota',   463617,  0.50],
  ['Nebraska',       43521,   0.94],
  ['New Hampshire',  758294,  0.48],
  ['New Jersey',     899938,  0.81],
  ['New Mexico',     998101,  0.33],
  ['Nevada',         858081,  null],
  ['New York',       420986,  0.92],
  ['Ohio',           410490,  0.40],
  ['Oklahoma',       10446,   0.48],
  ['Oregon',         292265,  0.85],
  ['Pennsylvania',   298992,  0.15],
  ['Rhode Island',   702667,  0.50],
  ['South Carolina', 897403,  0.73],
  ['South Dakota',   313546,  0.93],
  ['Tennessee',      329780,  0.59],
  ['Texas',          892539,  0.24],
  ['Utah',           448973,  0.39],
  ['Virginia',       982638,  0.32],
  ['Vermont',        41539,   0.92],
  ['Washington',     136003,  0.27],
  ['Wisconsin',      120048,  0.21],
  ['West Virginia',  374730,  0.19],
  ['Wyoming',        330937,  0.16],
];

var data3 = [
  //state            value    percent

  // ['California',    null,  0.10],
  ['Nevada',        161146,  null],
  // ['New Mexico',    null,  null],

];

var data2 = [
  ['AL', 375135, 0.82],
  ['AK', 564268, 0.82],
  ['AZ', 999999, 0.10],
  ['AR', 215869, 0.89],
  ['CA', 235208, 0.91],
  ['CO', 696908, 0.35],
  ['CT', 161146, 0.10],
  ['DE', 416345, 0.13],
  ['FL', 583482, 0.44],
  ['GA', 273991, 0.13],
  ['HI', 142835, 0.68],
  ['ID', 160836, 0.67],
  ['IL', 761592, 0.63],
  ['IN', 357259, 0.99],
  ['IA', 499651, 0.28],
  ['KS', 770616, 0.51],
  ['KY', 319129, 0.94],
  ['LA', 987348, 0.17],
  ['ME', 741533, 0.80],
  ['MD', 82273,  0.80],
  ['MA', 354202, 0.84],
  ['MI', 14454,  0.13],
  ['MN', 632269, 0.80],
  ['MS', 709175, 0.70],
  ['MO', 463617, 0.50],
  ['MT', 43521,  0.94],
  ['NE', 758294, 0.48],
  ['NV', 899938, 0.81],
  ['NH', 998101, 0.33],
  ['NJ', 858081, 0.75],
  ['NM', 420986, 0.92],
  ['NY', 410490, 0.40],
  ['NC', 10446,  0.48],
  ['ND', 292265, 0.85],
  ['OH', 298992, 0.15],
  ['OK', 702667, 0.50],
  ['OR', 897403, 0.73],
  ['PA', 313546, 0.93],
  ['RI', 329780, 0.59],
  ['SC', 892539, 0.24],
  ['SD', 448973, 0.39],
  ['TN', 982638, 0.32],
  ['TX', 41539,  0.92],
  ['UT', 136003, 0.27],
  ['VT', 120048, 0.21],
  ['VA', 374730, 0.19],
  ['WA', 330937, 0.16],
  ['WV', 330937, 0.16],
  ['WI', 330937, 0.16],
  ['WY', 330937, 0.16],
]

var aWidth = 400;
var aHeight = 265;

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    width: 1000,
    height: 1000,
  })
  .append('g')
  .attr('transform', 'translate(0,115)')
  .chart('USCartogram')
  .c({
    width: aWidth,
    height: aHeight,
    // maxRadius: 30,
    // usingStateAbbr: true,
  });

//Render the chart with data
chart._notifier.showMessage(true);

chart.draw(data);
// chart.draw(data3);
// chart.draw(data2);