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);