metasyn/countries.json

## countries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              countries.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>
<meta charset="utf-8">

<!-- load D3js -->
<script src="http://www.d3plus.org/js/d3.js"></script>

<!-- load topojson library -->
<script src="http://www.d3plus.org/js/topojson.js"></script>

<!-- load D3plus after D3js -->
<script src="http://www.d3plus.org/js/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz"></div>

<script>

  // sample data array
  var sample_data = [
    {"time": 1970, "value": 1315987123, "country": "nausa", "name": "United States"},
    {"time": 1971, "value": 2315987123, "country": "nausa", "name": "United States"},
    {"time": 1972, "value": 3315987123, "country": "nausa", "name": "United States"},
    {"time": 1973, "value": 5315987123, "country": "nausa", "name": "United States"},
    {"time": 1974, "value": 1315987123, "country": "nausa", "name": "United States"},
    {"time": 1975, "value": 315987123, "country": "nausa", "name": "United States"},
    {"time": 1972, "value": 38157121349, "country": "aschn", "name": "China"},
    {"time": 1971, "value": 21891735098, "country": "euesp", "name": "Spain"},
    {"time": 1974, "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
    .time("time")             // key for date to add time slider
    .draw()                   // finally, draw the visualization!

</script>
	<!doctype html>
	<meta charset="utf-8">

	<!-- load D3js -->
	<script src="http://www.d3plus.org/js/d3.js"></script>

	<!-- load topojson library -->
	<script src="http://www.d3plus.org/js/topojson.js"></script>

	<!-- load D3plus after D3js -->
	<script src="http://www.d3plus.org/js/d3plus.js"></script>

	<!-- create container element for visualization -->
	<div id="viz"></div>

	<script>

	// sample data array
	var sample_data = [
	{"time": 1970, "value": 1315987123, "country": "nausa", "name": "United States"},
	{"time": 1971, "value": 2315987123, "country": "nausa", "name": "United States"},
	{"time": 1972, "value": 3315987123, "country": "nausa", "name": "United States"},
	{"time": 1973, "value": 5315987123, "country": "nausa", "name": "United States"},
	{"time": 1974, "value": 1315987123, "country": "nausa", "name": "United States"},
	{"time": 1975, "value": 315987123, "country": "nausa", "name": "United States"},
	{"time": 1972, "value": 38157121349, "country": "aschn", "name": "China"},
	{"time": 1971, "value": 21891735098, "country": "euesp", "name": "Spain"},
	{"time": 1974, "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
	.time("time") // key for date to add time slider
	.draw() // finally, draw the visualization!

	</script>