CanadaFsaMap

Configuration Options

animationDuration

Type: number
Default: 250
Units: ms

undefined

chartName

Type: string
Default: "templateChart"

Name of chart for reporting

colorTheme

Type: select
Default: {"name":"Blue","value":["#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"]}

The color theme used by the elements

digitStrokeColor

Type: color
Default: "#585858"

Color for the border around groups of FSAs

digitStrokeWidth

Type: number
Default: 1
Units: px

Width of the border around groups of FSAs

districtStrokeColor

Type: color
Default: "#333333"

Color for the province border

districtStrokeWidth

Type: number
Default: 1
Units: px

Width of the province border

fsaLabelFontColor

Type: color
Default: "#333333"

Font color for the FSA labels

fsaLabelFontFamily

Type: font
Default: "Open Sans"

Font type for the FSA labels

fsaLabelFontSize

Type: number
Default: 13
Units: px

Font size for the FSA labels

height

Type: number
Default: 400
Units: px

Height of the widget

highlightStrokeColor

Type: color
Default: "#FDECAD"

Color for the border around hovered regions

highlightStrokeWidth

Type: number
Default: 2
Units: px

Width of the border around hovered regions

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.

noDataColor

Type: color
Default: "#D9D9D9"

Fill color that indicates something has no data

regionStrokeColor

Type: color
Default: "#585858"

Color for the border around individual FSAs

regionStrokeWidth

Type: number
Default: 0.5
Units: px

Width of the border around indivisual FSAs

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showFsaLabels

Type: select
Default: {"name":"Show","value":true}

Show or hide the labels on the FSAs

tooltipBackground

Type: color
Default: "#555555"

Background color for the tooltip

tooltipFontColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip text

tooltipFontFamily

Type: string
Default: "Open Sans"

Font type for the tooltip text

tooltipFontSize

Type: number
Default: 12
Units: px

Font size for the tooltip text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 700
Units: px

Width of the widget

Data Definition

FSA

Type: string

Default validate:

function validate(d) {
	          return this.accessor(d);
	        }

Default accessor:

function accessor(line) {
	          return line[0];
	        }

Value

Type: number

Default validate:

function validate(d) {
	          return this.accessor(d) || this.accessor(d) === 0;
	        }

Default accessor:

function accessor(line) {
	          return parseFloat(line[1]);
	        }

Events

Dispatch Events

External Events

Example

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

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

//Setup some fake data

var data = [["R0G",0],["R0H",44],["R0J",1],["R0M",28],["R2G",1],["R2J",77],["R2K",64],["R2M",44],["R2P",76],["R2W",34],["R2X",9],["R2Y",74],["R3A",21],["R3B",92],["R3K",51],["R3P",98],["R3T",80],["R3X",75],["R3Y",42],["R4A",23],["R4H",10],["R4K",85],["R5A",11],["R6W",16],["R7B",37],["R7C",49],["R8N",13],["S0A",34],["S0G",18],["S0J",33],["S0K",55],["S0M",54],["S0N",87],["S2V",91],["S4H",65],["S4S",77],["S4T",7],["S4V",35],["S4X",92],["S4Y",2],["S6J",31],["S6K",58],["S6V",18],["S6W",25],["S6X",88],["S7H",79],["S7J",81],["S7K",1],["S7M",90],["S7N",43],["S7T",43],["S7V",38],["S9A",38],["S9H",65],["S9X",73],["T0A",27],["T0B",50],["T0E",37],["T0G",53],["T0H",3],["T0K",10],["T0M",40],["T0P",36],["T0V",72],["T1J",27],["T1K",59],["T1L",31],["T1M",16],["T1P",26],["T1V",92],["T1Y",28],["T2A",21],["T2E",79],["T2J",68],["T2K",79],["T2L",97],["T2P",61],["T2T",72],["T2W",34],["T2Y",84],["T2Z",13],["T3A",59],["T3C",3],["T3G",68],["T3H",100],["T3M",33],["T3N",61],["T3Z",68],["T4A",33],["T4B",53],["T4C",68],["T4E",31],["T4H",58],["T4J",71],["T4L",92],["T4N",88],["T4P",14],["T4T",33],["T5A",28],["T5B",44],["T5E",59],["T5H",30],["T5L",54],["T5S",8],["T5T",74],["T5W",7],["T5X",60],["T5Y",95],["T6B",13],["T6E",62],["T6G",43],["T6K",25],["T6L",56],["T6M",8],["T6P",58],["T7A",92],["T7E",17],["T7N",36],["T7P",16],["T7X",11],["T7Z",75],["T8C",97],["T8E",20],["T8H",92],["T8L",18],["T8N",45],["T8S",90],["T8T",36],["T8V",89],["T8W",32],["T9A",74],["T9K",79],["T9M",98],["T9N",73],["T9S",87],["T9X",71],["V0A",45],["V0B",67],["V0C",23],["V0G",25],["V0J",27],["V0K",47],["V0L",3],["V0M",93],["V0N",71],["V0R",42],["V0S",96],["V0V",93],["V1A",64],["V1E",37],["V1G",62],["V1K",76],["V1M",28],["V1N",23],["V1R",22],["V1T",91],["V1W",69],["V1Z",2],["V2A",7],["V2C",8],["V2E",86],["V2G",56],["V2K",49],["V2M",90],["V2N",84],["V2P",53],["V2R",61],["V2V",83],["V2W",41],["V2X",98],["V3B",61],["V3E",47],["V3G",5],["V3J",15],["V3K",93],["V3M",46],["V3R",98],["V3V",97],["V3X",59],["V4B",56],["V4E",25],["V4K",76],["V4M",39],["V4R",14],["V4T",5],["V4V",56],["V4W",95],["V4X",54],["V4Z",39],["V5A",60],["V5G",69],["V5H",42],["V5M",19],["V5P",30],["V5X",88],["V6A",46],["V6B",49],["V6C",14],["V6G",31],["V6H",47],["V6J",7],["V6K",81],["V6L",26],["V6N",56],["V6P",23],["V6S",22],["V6V",22],["V6X",10],["V6Y",67],["V6Z",51],["V7B",81],["V7C",73],["V7E",6],["V7G",91],["V7M",70],["V7N",65],["V7P",26],["V7V",32],["V7Y",32],["V8B",41],["V8G",20],["V8J",74],["V8L",84],["V8N",19],["V8P",40],["V8R",30],["V8T",63],["V8V",44],["V8W",50],["V8Y",65],["V8Z",78],["V9C",71],["V9E",11],["V9H",85],["V9J",97],["V9P",18],["V9R",96],["V9S",73],["V9T",81],["V9V",59],["V9X",5],["V9Y",19],["X0G",30],["A0A",23],["A0E",15],["A0G",5],["A0J",5],["A0M",8],["A0N",37],["A0P",44],["A0R",54],["A1B",7],["A1C",5],["A1E",81],["A1G",45],["A1K",2],["A1N",47],["A1S",29],["A1Y",17],["A2A",13],["A2H",60],["A2N",37],["A2V",26],["A8A",77],["B0C",44],["B0E",23],["B0H",2],["B0M",10],["B0N",15],["B0S",40],["B0T",55],["B0V",37],["B1E",97],["B1L",56],["B1N",38],["B1S",2],["B1W",78],["B1X",79],["B1Y",32],["B2C",89],["B2G",90],["B2H",88],["B2R",97],["B2S",25],["B2V",86],["B2W",96],["B2Z",58],["B3A",47],["B3B",36],["B3G",23],["B3J",76],["B3K",57],["B3M",49],["B3P",74],["B3S",30],["B3T",0],["B3Z",55],["B4C",25],["B4E",55],["B4N",96],["B4R",31],["B5A",11],["B9A",56],["C0A",94],["C1B",28],["C1C",16],["C1N",71],["E1A",18],["E1B",86],["E1C",92],["E1G",56],["E1H",0],["E1X",84],["E2A",20],["E2E",79],["E2H",78],["E2J",86],["E2L",54],["E2N",38],["E2S",76],["E3B",90],["E3C",6],["E3E",44],["E3N",59],["E3V",66],["E3Y",74],["E3Z",9],["E4A",63],["E4C",62],["E4E",79],["E4K",19],["E4M",77],["E4N",49],["E4P",99],["E4T",42],["E4V",16],["E4Y",51],["E4Z",92],["E5A",41],["E5E",78],["E5L",53],["E5N",64],["E5S",87],["E5T",94],["E6B",74],["E6C",29],["E6G",35],["E6J",21],["E6K",76],["E7A",47],["E7C",67],["E7H",94],["E7J",53],["E7K",6],["E7N",52],["E7P",60],["E8G",35],["E8J",70],["E8K",50],["E9E",29],["E9G",72],["E9H",32],["G0J",96],["G0K",77],["G0M",85],["G0P",99],["G0T",45],["G1C",70],["G1H",17],["G1J",97],["G1L",22],["G1M",38],["G1R",83],["G1T",70],["G1V",68],["G1W",40],["G2K",60],["G2M",4],["G3A",2],["G3C",69],["G3G",46],["G3H",22],["G3J",70],["G3K",32],["G3M",11],["G3N",32],["G3Z",97],["G4R",17],["G4S",32],["G4T",22],["G4W",99],["G4X",76],["G5B",26],["G5C",80],["G5H",99],["G5L",89],["G5M",46],["G5R",55],["G5X",96],["G5Y",78],["G6B",0],["G6G",15],["G6J",13],["G6L",25],["G6R",12],["G6T",5],["G6V",1],["G6W",16],["G6Z",88],["G7B",77],["G7H",87],["G7N",75],["G7T",35],["G7X",5],["G7Z",9],["G8B",37],["G8J",40],["G8L",20],["G8M",56],["G8N",83],["G8P",37],["G8W",17],["G8Z",31],["G9A",64],["G9C",41],["G9N",79],["H1H",26],["H1K",76],["H1L",11],["H1N",34],["H1S",2],["H1T",33],["H1V",24],["H1W",21],["H1X",57],["H1Y",36],["H2A",21],["H2B",72],["H2C",86],["H2E",42],["H2G",85],["H2H",20],["H2L",50],["H2P",1],["H2W",74],["H2X",96],["H2Z",17],["H3A",43],["H3C",29],["H3K",15],["H3N",55],["H3R",56],["H3V",39],["H3W",29],["H4C",34],["H4E",27],["H4G",18],["H4J",2],["H4K",90],["H4L",46],["H4N",60],["H4P",44],["H4S",43],["H4Z",70],["H7A",71],["H7C",85],["H7G",85],["H7J",94],["H7L",9],["H7M",12],["H7S",32],["H7X",90],["H7Y",53],["H8N",41],["H8P",50],["H8R",39],["H8S",2],["H8T",9],["H8Y",13],["H9A",52],["H9B",87],["H9C",8],["H9H",84],["H9J",60],["H9P",28],["H9R",98],["H9W",36],["H9X",35],["J0C",88],["J0E",44],["J0H",37],["J0J",1],["J0K",99],["J0L",84],["J0M",60],["J0P",42],["J0S",43],["J0Y",20],["J1A",32],["J1C",4],["J1E",59],["J1J",28],["J1K",30],["J1M",39],["J1N",9],["J1R",10],["J2B",18],["J2H",59],["J2L",40],["J2M",5],["J2N",23],["J2W",74],["J2X",4],["J3G",7],["J3L",57],["J3R",50],["J3T",70],["J4G",25],["J4J",11],["J4K",46],["J4L",40],["J4M",80],["J4N",13],["J4P",77],["J4R",46],["J4S",65],["J4Y",28],["J5A",29],["J5B",20],["J5J",60],["J5K",64],["J5L",70],["J5R",17],["J5T",74],["J5V",12],["J6J",57],["J6K",73],["J6S",26],["J6T",12],["J6V",23],["J6W",33],["J7C",11],["J7G",2],["J7K",65],["J7L",82],["J7P",26],["J7R",60],["J7T",34],["J7W",46],["J7X",42],["J8A",36],["J8B",36],["J8C",41],["J8M",76],["J8R",53],["J8V",20],["J9A",33],["J9P",17],["J9T",20],["J9X",53],["J9Y",12],["J9Z",91],["K0B",89],["K0C",15],["K1B",71],["K1C",52],["K1J",65],["K1K",73],["K1L",77],["K1S",41],["K1V",60],["K1W",22],["K1X",10],["K2A",12],["K2G",10],["K2K",89],["K2L",60],["K2P",85],["K2R",21],["K2S",44],["K2T",61],["K2W",44],["K4A",25],["K4B",33],["K4C",40],["K4P",30],["K4R",92],["K6A",27],["K6H",52],["K6K",97],["K6T",10],["K7A",6],["K7M",7],["K7N",31],["K7P",22],["K7R",86],["K7V",28],["K8A",47],["K8N",62],["K8R",97],["K9H",82],["L0A",56],["L0E",53],["L0G",36],["L0K",24],["L0L",11],["L0N",33],["L0P",13],["L1B",97],["L1C",20],["L1E",82],["L1G",9],["L1H",84],["L1M",7],["L1N",19],["L1P",29],["L1R",35],["L1S",66],["L1V",55],["L1W",56],["L1X",22],["L1Y",16],["L1Z",88],["L2A",30],["L2H",88],["L2M",4],["L2N",83],["L2P",27],["L2T",18],["L3B",78],["L3K",44],["L3P",78],["L3R",82],["L3V",16],["L4C",4],["L4G",8],["L4K",84],["L4L",14],["L4M",33],["L4P",49],["L4R",50],["L4T",30],["L4W",93],["L4Z",42],["L5E",31],["L5K",25],["L5T",76],["L5V",81],["L5W",46],["L6B",77],["L6E",81],["L6H",40],["L6J",44],["L6L",16],["L6M",80],["L6R",63],["L6T",66],["L6X",6],["L6Y",37],["L7B",15],["L7E",9],["L7J",5],["L7M",71],["L7R",40],["L7T",67],["L8E",96],["L8G",94],["L8H",69],["L8J",67],["L8K",68],["L8L",61],["L8N",97],["L8P",47],["L8R",60],["L8T",44],["L9B",2],["L9G",3],["L9H",12],["L9J",99],["L9P",59],["L9V",9],["L9W",72],["L9Y",31],["L9Z",20],["M1B",6],["M1C",31],["M1N",72],["M1S",58],["M1W",69],["M2H",49],["M2J",15],["M2K",44],["M2N",90],["M2R",38],["M3A",12],["M3B",35],["M3C",46],["M3H",46],["M3J",53],["M3N",87],["M4A",27],["M4E",20],["M4H",34],["M4K",100],["M4L",58],["M4M",90],["M4N",93],["M4R",84],["M4T",60],["M4V",25],["M4W",38],["M4X",41],["M4Y",8],["M5B",19],["M5C",20],["M5N",34],["M5P",55],["M5S",42],["M5T",84],["M5V",35],["M6A",32],["M6C",27],["M6E",59],["M6G",66],["M6L",76],["M6N",56],["M6P",92],["M6R",56],["M6S",37],["M8V",44],["M8Y",98],["M9A",59],["M9B",81],["M9M",30],["M9V",36],["M9W",40],["N0C",58],["N0E",10],["N0G",79],["N0M",54],["N0N",47],["N1A",40],["N1C",20],["N1E",24],["N1H",28],["N1L",41],["N1P",97],["N1T",97],["N2A",60],["N2H",16],["N2J",58],["N2P",6],["N2T",46],["N2V",67],["N2Z",53],["N3A",16],["N3C",22],["N3E",29],["N3H",10],["N3S",91],["N3Y",60],["N4G",57],["N4L",6],["N4S",29],["N4V",45],["N4Z",5],["N5A",8],["N5L",67],["N5P",7],["N5V",99],["N5Y",93],["N5Z",82],["N6B",95],["N6C",83],["N6E",84],["N6J",9],["N6K",7],["N7G",50],["N8A",83],["N8H",78],["N8R",29],["N8T",62],["N8X",20],["N9A",49],["N9B",1],["N9E",5],["N9J",67],["N9K",21],["N9Y",70],["P0A",57],["P0C",79],["P0E",49],["P0H",34],["P0N",89],["P0S",9],["P0W",17],["P0X",8],["P1B",3],["P1L",77],["P2A",94],["P2B",33],["P3C",16],["P3E",85],["P3N",1],["P3P",4],["P4N",62],["P4P",20],["P5A",6],["P5E",6],["P6A",54],["P6B",87],["P7J",29],["P7K",45],["P7L",7],["P9N",25],["R0A",94],["R0E",63],["R1A",0],["X0B",87],["X0C",17],["X0E",66],["Y0B",19],["X0A",24]];

var width = 500;
var height = 500;

//Initialze the widget
var chartGroup = d3.select('#vis');

var chart = new CanadaFsaMap(chartGroup)
  .c({
    width: width,
    height: height,
    // districtStrokeWidth: 1,
    // digitStrokeWidth: 1,
    // regionStrokeWidth: 3,
  });

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

// mediaGen
// setTimeout(function() {
//   var district = chart.base.select('.districts > :nth-last-child(2)').node();
//
//   // PhantomJS does not support MouseEvent contructors
//   // fall back to initMouseEvent method;
//   var e;
//   e = document.createEvent('MouseEvent');
//   e.initMouseEvent('mousedown', true);
//   district.dispatchEvent(e);
//
//   e = document.createEvent('MouseEvent');
//   e.initMouseEvent('mouseup', true);
//   district.dispatchEvent(e);
//
//   e = document.createEvent('MouseEvent');
//   e.initMouseEvent('click', true);
//   district.dispatchEvent(e);
//
//   setTimeout(function() {
//     var background = chart.base.select('.background').node();
//
//     e = document.createEvent('MouseEvent');
//     e.initMouseEvent('mousedown', true);
//     background.dispatchEvent(e);
//
//     e = document.createEvent('MouseEvent');
//     e.initMouseEvent('mouseup', true);
//     background.dispatchEvent(e);
//
//     e = document.createEvent('MouseEvent');
//     e.initMouseEvent('click', true);
//     background.dispatchEvent(e);
//
//     chart.resetZoom(true);
//   }, 17000);
//
// }, 0);