my world map

fiddle public.

by asanche2

HTML

<script src="https://gist.githubusercontent.com/davelandry/9042807/raw/bbd3e21d294f67b56a6ac4f0cee56a874ab52db4/countries.json"></script>
<script src="https://www.d3plus.org/js/d3.js"></script>
<script src="https://www.d3plus.org/js/topojson.js"></script>
<script src="https://www.d3plus.org/js/d3plus.js"></script>
<!-- create container element for visualization -->

    <head>
        <meta charset="utf-8">
        <link href="/d3-geomap/css/d3.geomap.css" rel="stylesheet">
        <script src="/d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
        <script src="/d3-geomap/js/d3.geomap.min.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>

<div id="viz"></div>

JavaScript

// sample data array
  var sample_data = [
    {"value": 2315987123, "country": "nausa", "name": "United States"},
    {"value": 38157121349, "country": "aschn", "name": "China"},
    {"value": 21891735098, "country": "euesp", "name": "Spain"},
    {"value": 9807134982, "country": "sabra", "name": "Brazil"}
  ]
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")        // container DIV to hold the visualization
    .data(sample_data)        // data to use with the visualization
    .coords("countries.json") // pass topojson coordinates
    .type("geo_map")          // visualization type
    .id("country")            // key for which our data is unique on
    .text("name")             // key to use for display text
    .color("value")           // key for coloring countries
    .tooltip("value")         // keys to place in tooltip
    .draw()