Distribution Map

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/H33URJ4E

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background-color: #fff;
    }

    .zc-grid {
      margin: 0 auto;
      padding: 1rem;
      width: 100%;
      max-width: 1400px;
      box-sizing: border-box;
      background: #fff;
    }

    .zc-chart {
      min-height: 500px;
    }

    .zc-ref {
      display: none;
    }

    /* TABLET: PORTRAIT+ */

    @media screen and (min-width:768px) {
      .zc-grid {
        display: grid;
        grid-template-columns: 500px 1fr;
        grid-column-gap: 2rem;
      }
    }
  </style>
</head>

<body class="zc-body">

  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/airports.js'></script>

  <div class="zc-grid">

    <div id="zcmap" class="zc-chart">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    <div id="zcline" class="zc-chart"></div>

  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    // INIT
    // -----------------------------
    // Define Module Location
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    // Load Maps
    zingchart.loadModules('maps, maps-fraL2', render);


    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location(s)
    var line = 'zcline';
    var map = 'zcmap';


    // VARS
    // -----------------------------
    var iMaxAltitude = 0,
      aValues = [],
      aDataInfo = [],
      aDataSize = [],
      i;


    // MAP CHART CONFIG
    // -----------------------------
    var gmap = {
      type: 'null',
      x: 10,
      y: 0,
      width: '100%',
      height: '100%',
      legend: {
        layout: '1x',
        margin: 'auto auto 10 10',
        'toggle-action': 'none',
        'border-width': 0,
        header: {
          text: 'Airports in France',
          align: 'left',
          'font-size': 11
        }
      },
      series: [{
          'legend-marker': {
            type: 'circle',
            size: 3,
            'background-color': '#467686'
          },
          text: 'Small Airport'
        },
        {
          'legend-marker': {
            type: 'circle',
            size: 5,
            'background-color': '#022733'
          },
          text: 'Medium Airport'
        },
        {
          'legend-marker': {
            type: 'circle',
            size: 8,
            'background-color': '#26596A'
          },
          text: 'Large Airport'
        }

      ],
      tooltip: {
        align: 'left',
        callout: true,
        'callout-width': 16,
        'callout-height': 8,
        'border-radius': 3,
        padding: '10 20',
        shadow: true,
        'shadow-color': '#333',
        'shadow-alpha': 0.7,
        'font-size': 13,
        'font-weight': 'bold',
        'shadow-distance': 2
      },
      shapes: [{
        type: 'zingchart.maps',
        options: {
          name: 'fraL2',
          scale: true,
          style: {
            'border-alpha': 0.1,
            'border-color': '#666',
            label: {
              visible: false
            },
            'hover-state': {
              'background-color': 'none',
              'shadow-alpha': 0.1,
              'shadow-distance': 0,
              shadow: true,
              'shadow-color': '#369'
            }
          }
        }
      }]
    };


    // CHART DATA
    // -----------------------------
    // Setup Airports
    for (var i = 0; i < AIRPORTS.length; i++) {
      // Some alt missing or negative
      if (typeof(AIRPORTS[i][6]) === 'undefined') {
        AIRPORTS[i][6] = 0;
      }
      AIRPORTS[i][6] = Math.max(0, AIRPORTS[i][6]);
    }
    // Sort
    AIRPORTS.sort(function(a, b) {
      return parseInt(a[6], 10) - parseInt(b[6], 10);
    });
    // Add data
    for (var i = 0; i < AIRPORTS.length; i++) {
      iMaxAltitude = Math.max(iMaxAltitude, Math.round(AIRPORTS[i][6] * 0.3048));
      var size = 2,
        color = '#467686';
      if (AIRPORTS[i][2] === 'medium_airport') {
        size = 5;
        color = '#022733';
      }
      if (AIRPORTS[i][2] === 'large_airport') {
        size = 8;
        color = '#26596A';
      }

      aValues.push(Math.max(0, Math.round(AIRPORTS[i][6] * 0.3048)));
      aDataInfo.push('<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3]);
      aDataSize.push(size);

      gmap.shapes.push({
        id: 'airport' + i,
        type: 'circle',
        size: size,
        'background-color': color,
        y: AIRPORTS[i][4] + 'lat',
        x: AIRPORTS[i][5] + 'lon',
        map: 'fraL2',
        'hover-state': {
          size: size + 4,
          'background-color': 'none',
          'border-width': 2,
          'border-color': color
        },
        tooltip: {
          text: '<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3]
        }
      });
    }


    // LINE CHART CONFIG
    // -----------------------------
    var gline = {
      x: 0,
      y: 0,
      width: '100%',
      height: '100%',
      type: 'line',
      plotarea: {
        margin: '10 20 25 40'
      },
      tooltip: {
        visible: false
      },
      title: {
        text: 'Airports sorted by altitude',
        padding: '15 10 10 45',
        align: 'left',
        'font-size': 11
      },
      'scale-x': {
        zooming: true,
        visible: false
      },
      'scroll-x': {},
      'scale-y': {
        'offset-start': 10,
        minValue: 0,
        maxValue: iMaxAltitude,
        short: true,
        format: '%vm',
        item: {
          'font-size': 10
        }
      },
      'crosshair-x': {
        'plot-label': {
          text: '%data-info<br>%node-value m',
          align: 'left',
          'border-radius': 3,
          padding: '10 20',
          'border-width': 1,
          shadow: true,
          'shadow-color': '#333',
          'shadow-alpha': 0.7,
          'font-size': 13,
          'font-weight': 'bold',
          'shadow-distance': 2
        }
      },
      series: [{
        'line-width': 1,
        'line-color': '#467686',
        'max-nodes': 99999,
        values: aValues,
        'data-info': aDataInfo,
        'data-size': aDataSize,
        marker: {
          'border-width': 0,
          type: 'circle',
          size: 2,
          'background-color': '#467686',
          rules: [{
              rule: '%data-size === 5',
              size: 5,
              'background-color': '#022733'
            },
            {
              rule: '%data-size === 8',
              size: 8,
              'background-color': '#26596A'
            }
          ]
        }
      }]
    };


    // ADD CHART INTERACTION
    // -----------------------------

    // Mouseout
    zingchart.bind(line, 'guide_mouseout', function(p) {
      zingchart.exec(map, 'removeobject', {
        type: 'shape',
        dynamic: true,
        id: 'marker'
      });
    });

    // Mousemove
    zingchart.bind(line, 'guide_mousemove', function(p) {
      var idx = p.items[0].nodeindex;
      var size = 2;
      if (AIRPORTS[idx][2] === 'medium_airport') {
        size = 5;
      }
      if (AIRPORTS[idx][2] === 'large_airport') {
        size = 8;
      }
      zingchart.exec(map, 'addobject', {
        type: 'shape',
        dynamic: true,
        data: {
          flat: true,
          id: 'marker',
          type: 'circle',
          'border-width': 2,
          'background-color': 'none',
          'border-color': '#900',
          size: size + 4,
          y: AIRPORTS[idx][4] + 'lat',
          x: AIRPORTS[idx][5] + 'lon',
          map: 'fraL2'
        }
      });
    });


    // RENDER CHARTS
    // -----------------------------
    zingchart.SYNTAX = 'dashed';
    zingchart.DEV.RESOURCES = false;

    // Render charts after the maps module has loaded
    // See `zingchart.loadModules()` above
    function render() {
      zingchart.render({
        id: map,
        width: '100%',
        height: '100%',
        output: 'svg',
        data: gmap
      });
      zingchart.render({
        id: line,
        width: '100%',
        height: '100%',
        output: 'svg',
        data: gline
      });
    }
  </script>
</body>

</html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">
  
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/airports.js'></script>

  <div class="zc-grid">
  
    <div id="zcmap" class="zc-chart">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    <div id="zcline" class="zc-chart"></div>

  </div>

</body>
</html>

// INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
// Load Maps
zingchart.loadModules('maps, maps-fraL2', render);


// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
var line = 'zcline';
var map = 'zcmap';


// VARS
// -----------------------------
var iMaxAltitude = 0, aValues = [], aDataInfo = [], aDataSize = [], i;


// MAP CHART CONFIG
// -----------------------------
var gmap = {
  type : 'null',
  x : 10,
  y : 0,
  width : '100%',
  height : '100%',
  legend : {
    layout : '1x',
    margin : 'auto auto 10 10',
    'toggle-action' : 'none',
    'border-width' : 0,
    header : {
      text : 'Airports in France',
      align : 'left',
      'font-size' : 11
    }
  },
  series : [
    {
      'legend-marker' : {
        type : 'circle',
        size : 3,
        'background-color' : '#467686'
      },
      text : 'Small Airport'
    },
    {
      'legend-marker' : {
        type : 'circle',
        size : 5,
        'background-color' : '#022733'
      },
      text : 'Medium Airport'
    },
    {
      'legend-marker' : {
        type : 'circle',
        size : 8,
        'background-color' : '#26596A'
      },
      text : 'Large Airport'
    }

  ],
  tooltip : {
    align : 'left',
    callout : true,
    'callout-width' : 16,
    'callout-height' : 8,
    'border-radius' : 3,
    padding : '10 20',
    shadow : true,
    'shadow-color' : '#333',
    'shadow-alpha' : 0.7,
    'font-size' : 13,
    'font-weight' : 'bold',
    'shadow-distance' : 2
  },
  shapes : [
    {
      type : 'zingchart.maps',
      options : {
        name : 'fraL2',
        scale : true,
        style : {
          'border-alpha' : 0.1,
          'border-color' : '#666',
          label : {
            visible : false
          },
          'hover-state' : {
            'background-color':'none',
            'shadow-alpha' : 0.1,
            'shadow-distance' : 0,
            shadow : true,
            'shadow-color' : '#369'
          }
        }
      }
    }
  ]
};


// CHART DATA
// -----------------------------
// Setup Airports
for (var i=0;i<AIRPORTS.length;i++) {
  // Some alt missing or negative
  if (typeof(AIRPORTS[i][6]) === 'undefined') {
    AIRPORTS[i][6] = 0;
  }
  AIRPORTS[i][6] = Math.max(0, AIRPORTS[i][6]);
}
// Sort
AIRPORTS.sort(function(a, b) {
  return parseInt(a[6], 10) - parseInt(b[6], 10);  
});
// Add data
for (var i=0;i<AIRPORTS.length;i++) {
  iMaxAltitude = Math.max(iMaxAltitude, Math.round(AIRPORTS[i][6]*0.3048));
  var size = 2, color = '#467686';
  if (AIRPORTS[i][2] === 'medium_airport') {
    size = 5;
    color = '#022733';
  }
  if (AIRPORTS[i][2] === 'large_airport') {
    size = 8;
    color = '#26596A';
  }

  aValues.push(Math.max(0, Math.round(AIRPORTS[i][6]*0.3048)));
  aDataInfo.push('<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3]);
  aDataSize.push(size);

  gmap.shapes.push({
    id : 'airport'+i,
    type : 'circle',
    size : size,
    'background-color' : color,
    y : AIRPORTS[i][4] + 'lat',
    x : AIRPORTS[i][5] + 'lon',
    map : 'fraL2',
    'hover-state' : {
      size : size + 4,
      'background-color' : 'none',
      'border-width' : 2,
      'border-color' : color
    },
    tooltip : {
      text : '<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3] 
    }
  });
}


// LINE CHART CONFIG
// -----------------------------
var gline = {
  x : 0,
  y : 0,
  width : '100%',
  height : '100%',
  type : 'line',
  plotarea : {
    margin : '10 20 25 40' 
  },
  tooltip : {
    visible : false
  },
  title : {
    text : 'Airports sorted by altitude',
    padding : '15 10 10 45',
    align : 'left',
    'font-size' : 11
  },
  'scale-x' : {
    zooming : true,
    visible : false	
  },
  'scroll-x' : {
  },
  'scale-y' : {
    'offset-start' : 10,
    minValue : 0,
    maxValue : iMaxAltitude,
    short : true,
    format : '%vm',
    item : {
      'font-size':10
    }
  },
  'crosshair-x' : {
    'plot-label' : {
      text : '%data-info<br>%node-value m',
      align : 'left',
      'border-radius' : 3,
      padding : '10 20',
      'border-width' : 1,
      shadow : true,
      'shadow-color' : '#333',
      'shadow-alpha' : 0.7,
      'font-size' : 13,
      'font-weight' : 'bold',
      'shadow-distance' : 2
    }
  },
  series : [
    {
      'line-width' : 1,
      'line-color' : '#467686',
      'max-nodes' : 99999,
      values : aValues,
      'data-info' : aDataInfo,
      'data-size' : aDataSize,
      marker : {
        'border-width' : 0,
        type : 'circle',
        size : 2,
        'background-color' : '#467686',
        rules : [
          {
            rule : '%data-size === 5',
            size : 5,
            'background-color' : '#022733'
          },
          {
            rule : '%data-size === 8',
            size : 8,
            'background-color' : '#26596A'
          }
        ]
      }
    }
  ]
};


// ADD CHART INTERACTION
// -----------------------------

// Mouseout
zingchart.bind(line, 'guide_mouseout', function(p) {
  zingchart.exec(map, 'removeobject', {
    type : 'shape',
    dynamic : true,
    id : 'marker'
  });
});

// Mousemove
zingchart.bind(line, 'guide_mousemove', function(p) {
  var idx = p.items[0].nodeindex;
  var size = 2;
  if (AIRPORTS[idx][2] === 'medium_airport') {
    size = 5;
  }
  if (AIRPORTS[idx][2] === 'large_airport') {
    size = 8;
  }	
  zingchart.exec(map, 'addobject', {
    type : 'shape',
    dynamic : true,
    data : {
      flat : true,
      id : 'marker',
      type : 'circle',
      'border-width' : 2,
      'background-color' : 'none',
      'border-color' : '#900',
      size : size + 4,
      y : AIRPORTS[idx][4] + 'lat',
      x : AIRPORTS[idx][5] + 'lon',
      map : 'fraL2'
    }
  });
});


// RENDER CHARTS
// -----------------------------
zingchart.SYNTAX = 'dashed';
zingchart.DEV.RESOURCES = false;

// Render charts after the maps module has loaded
// See `zingchart.loadModules()` above
function render() {
  zingchart.render({
    id : map,
    width : '100%',
    height : '100%',
    output : 'svg',
    data : gmap
  });
  zingchart.render({
    id : line,
    width : '100%',
    height : '100%',
    output : 'svg',
    data : gline
  });
}

.zc-body { background-color: #fff; }
.zc-grid { margin:0 auto; padding:1rem; width:100%; max-width:1400px; box-sizing:border-box; background:#fff; }
.zc-chart { min-height:500px; }
.zc-ref { display:none; }

/* TABLET: PORTRAIT+ */
@media screen and (min-width:768px) {
  .zc-grid { display:grid; grid-template-columns:500px 1fr; grid-column-gap:2rem; }
}

Custom Pie Chart - Student Debt in the US 38/269 Choropleth Map Electoral Report

Distribution Map

Related Documentation: