@domoinc/us-map

    3.0.2 • Public • Published

    USMap

    An interactive US Map with shaded states displaying data

    Configuration Options

    chartName

    Type: string
    Default: "USMap"

    Name of chart for reporting

    dataIsUsingStateAbbreviations

    Type: boolean
    Default: false

    Set to true if using state abbreviations, false if using full state name

    generalWashoutColor

    Type: color
    Default: "#E4E5E5"

    Color used to indicate elements that are not being highlighted

    height

    Type: number
    Default: 250
    Units: px

    hoverEnabled

    Type: boolean
    Default: false

    Toggle hover on/off

    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.

    mapBorderColor

    Type: color
    Default: "#FFFFFF"

    Color for the borders around each section of the map

    mapBorderWeight

    Type: number
    Default: 1
    Units: px

    Stroke width for each land divider

    mapNoDataColor

    Type: color
    Default: "#D8D8D9"

    Color for an element that has no data on the map

    mapRangeColors

    Type: colorArray
    Default: ["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"]

    Range of colors for the map

    mapRangeColorsTheme

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

    shouldValidate

    Type: boolean
    Default: true

    Flag for turning off data validation

    textFontFamily

    Type: string
    Default: "Open Sans"

    tooltipBackgroundColor

    Type: color
    Default: "#555555"

    Background color of the tooltip

    tooltipTextColor

    Type: color
    Default: "#FFFFFF"

    Color of the tooltip text

    updateSizeableConfigs

    Type: boolean
    Default: true

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

    width

    Type: number
    Default: 250
    Units: px

    zoomEnabled

    Type: boolean
    Default: true

    Toggle ability to zoom

    Data Definition

    State

    Type: string

    Default validate:

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

    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

    var data = [["Alaska", 82], ["Hawaii", 82], ["Puerto Rico", 19], ["California", 91], ["Colorado", 89], ["Connecticut", 91], ["Delaware", 35], ["Florida", 10], ["Georgia", 13], ["Iowa", 44], ["Idaho", 13], ["Illinois", 68], ["Indiana", 67], ["Kansas", 63], ["Kentucky", 99], ["Louisiana", 28], ["Massachusetts", 51], ["Maryland", 94], ["Maine", 17], ["Michigan", 8], ["Minnesota", 80], ["Missouri", 84], ["Mississippi", 13], ["Montana", 8], ["North Carolina", 70], ["North Dakota", 50], ["Nebraska", 94], ["New Hampshire", 48], ["New Jersey", 81], ["New Mexico", 33], ["Nevada", 75], ["New York", 92], ["Ohio", 40], ["Oklahoma", 48], ["Oregon", 85], ["Pennsylvania", 15], ["Rhode Island", 50], ["South Carolina", 73], ["South Dakota", 93], ["Tennessee", 59], ["Texas", 24], ["Utah", 39], ["Virginia", 32], ["Vermont", 92], ["Washington", 27], ["Wisconsin", 21], ["West Virginia", 19], ["Wyoming", 16]];
     
    var i = 1;
    var aHeight = 502 * i;
    var aWidth = 500 * i;
     
    //Initialze the widget
    var svg = d3.select("#vis")
      .append("svg")
      .attr("width", aWidth + 'px')
      .attr("height", aHeight + 'px')
      .append('g');
     
     
    var chart = svg.chart("USMap")
      .c('width', aWidth)
      .c('height', aHeight)
      .c('dataIsUsingStateAbbreviations', false);
     
     
    //Render the chart with data
    chart.draw(data);
     
     
    //svg.insert("rect", ":first-child")
    //  .attr("height", aHeight)
    //  .attr("width", aWidth)
    //  .attr("stroke", "black")
    //  .style("fill-opacity", 0);
     
     
    /*----------------------------------------------------------------------------------
    Text change in range colors
    ----------------------------------------------------------------------------------*/
    setTimeout(function() {
         chart.c('mapRangeColorsTheme', chart._config.mapRangeColorsTheme.options[1]).draw(data);
    }, 3000);
     
     
    /*----------------------------------------------------------------------------------
    Test External hover events
    ----------------------------------------------------------------------------------*/
    //var ii = -1;
    //setInterval(function () {
    //  chart.trigger('external:mouseover', {series: ii, name: ii, d:null});
    //  ii = (++ii) === 5 ? -1 : ii;
    //}, 1000);
     
    //setTimeout(function () {
    //    chart.trigger('external:mouseover', {series: 3, name: 3, d:null});
    //}, 1000);
    //setTimeout(function () {
    //    chart.trigger('external:mouseout');
    //}, 3000);
     

    Keywords

    Install

    npm i @domoinc/us-map

    DownloadsWeekly Downloads

    2

    Version

    3.0.2

    License

    SEE LICENSE IN LICENSE

    Last publish

    Collaborators

    • jmnemelka
    • jasonleehodges
    • jonathon.meng
    • th3uiguy
    • mountain01
    • statianzo
    • diazd2
    • congrieb
    • cameronnokes
    • ttingey
    • morganjohn12
    • jeff.smith