html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // This sample uses 3rd party proj4 component

  // that makes it possible to set coordinates

  // for the points and labels on the map and

  // required for custom projections and grid labels formatting.

  // See https://docs.anychart.com/Maps/Map_Projections

​

var map = anychart.map();

// data for the choropleth series

var data_obama = [

    {id: 'US.WA', name: "Washington", value: 12},

    {id: 'US.CA', name: "California", value: 55, "labelrank": 5},

    {id: 'US.NV', name: "Nevada", value: 6, "labelrank": 3},

    {id: 'US.OR', name: "Oregon", value: 7},

    {id: 'US.CO', name: "Colorado", value: 9},

    {id: 'US.NM', name: "New Mexico", value: 5},

    {id: 'US.WI', name: "Wisconsin", value: 10, "labelrank": 5},

    {id: 'US.IL', name: "Illinois", value: 20},

    {id: 'US.MN', name: "Minnesota", value: 10},

    {id: 'US.IA', name: "Iowa", value: 6},

    {id: 'US.MI', name: "Michigan", value: 16, "labelrank": 3},

    {id: 'US.OH', name: "Ohio", value: 18},

    {id: 'US.PA', name: "Pennsylvania", value: 20},

    {id: 'US.NY', name: "New York", value: 29},

    {id: 'US.CT', name: "Connecticut", value: 7},

    {id: 'US.MA', name: "Massachusetts", value: 11},

    {id: 'US.NH', name: "New Hampshire", value: 4},

    {id: 'US.RI', name: "Rhode Island", value: 4},

    {id: 'US.VT', name: "Vermont", value: 3},

    {id: 'US.ME', name: "Maine", value: 4},

    {id: 'US.VA', name: "Virginia", value: 13, "labelrank": 0},

    {id: 'US.FL', name: "Florida", value: 29},

    {id: 'US.DE', name: "Delaware", value: 3, "labelrank": 1},

    {id: 'US.DC', name: "District of Columbia", value: 3},

    {id: 'US.NJ', name: "New Jersey", value: 14},

    {id: 'US.HI', name: "Hawaii", value: 4},

    {id: 'US.MD', name: "Maryland", value: 10, "labelrank": 5},

];

​

var data_romney = [

  {id: 'US.MT', name: "Montana", value: 3},

  {id: 'US.ND', name: "North Dakota", value: 3},

  {id: 'US.ID', name: "Idaho", value: 4},

  {id: 'US.UT', name: "Utah", value: 6},

  {id: 'US.WY', name: "Wyoming", value: 3},

  {id: 'US.MO', name: "Missouri", value: 10},

  {id: 'US.NE', name: "Nebraska", value: 5},

  {id: 'US.SD', name: "South Dakota", value: 3},

  {id: 'US.KS', name: "Kansas", value: 6},

  {id: 'US.IN', name: "Indiana", value: 11},

  {id: 'US.AR', name: "Arkansas", value: 6},

  {id: 'US.LA', name: "Louisiana", value: 8},

  {id: 'US.TX', name: "Texas", value: 38},

  {id: 'US.AL', name: "Alabama", value: 9},

  {id: 'US.GA', name: "Georgia", value: 16},

  {id: 'US.MS', name: "Mississippi", value: 6},

  {id: 'US.SC', name: "South Carolina", value: 9},

  {id: 'US.NC', name: "North Carolina", value: 15},

  {id: 'US.TN', name: "Tennessee", value: 11},

  {id: 'US.KY', name: "Kentucky", value: 8},

  {id: 'US.WV', name: "West Virginia", value: 5},

  {id: 'US.AZ', name: "Arizona", value: 11},

  {id: 'US.OK', name: "Oklahoma", value: 7},

  {id: 'US.AK', name: "Alaska", value: 3}

];

​

map.geoData("anychart.maps.united_states_of_america");

​

// set the title and its preferences

map.title().useHtml(true).hAlign('center');

map.title('<span style="font-size:14px;">Presidental elections 2012</span><br><span style="font-size:10px;">Set labelranks for the series with restricted overlapping</span>');

​

// set the series

var series_obama = map.choropleth(data_obama);

series_obama.name("Obama");

​

var series_romney = map.choropleth(data_romney);

series_romney.name("Romney");

​

// enable labels

map.labels(true);

map.background().enabled(true);

map.background().fill("Gray 0.4");

​

map.labels().fontColor("white");

​

​

map.palette(["#232066 .9", "#E91D0E .9"]);

​

​

// set the overlapping mode for the map

map.overlapMode(false);

​

// enable overlapping for the series

series_obama.overlapMode("allow-overlap");

​

// set tooltips

map.tooltip().format("Most voted for {%seriesName}");

​

// set the container

map.container('container');

map.draw();

});