World Map

World Map using D3 inspired from http://bl.ocks.org/d3noob/5189184

Created by Admin User on Sun Jan 17 2016 14:28:29 GMT+0000 (UTC)
Last updated: Sat Feb 13 2016 03:31:06 GMT+0000 (UTC)

You can embed the project by including the followng script into your HTML page:

<div id='mainpart'></div>

<script src='https://quips.anbdata.com/project/prod/936ae4762ad3842eb2250280d0cc53023dfee606/script.js'></script>

You can view the deployed project on this test page

You can embed that page as a iframe directly as well by including the followng code into your HTML page:

<iframe src='https://quips.anbdata.com/project/prod/936ae4762ad3842eb2250280d0cc53023dfee606/page.html' onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"/>

Read more about integrations

Packages

Libraries and Stylesheets (CSS) which are loaded at start-up

Content

Jade, Javascript, Data and CSS files used in this app

Jade

Link to file

#map svg(width="960",height="500") g

Javascript

Link to file
Main function name

var projection = d3.geo.mercator() .center([20, 20 ]) .scale(150) var path = d3.geo.path() .projection(projection); var g = d3.select("#map svg g") g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path)

Cascading Style Sheet (CSS)

Link to file

path { stroke: white; stroke-width: 0.25px; fill: gray; }

Data on World Map

Variable name topology

Send to Javascript

Data file URL :

http://bl.ocks.org/d3noob/raw/5189184/1e263cb5ccbb0551819e420df31a35fd3d4188f3/world-110m2.json
URL/API

HTML Preview

Open in new window