> For the complete documentation index, see [llms.txt](https://nswamy14.gitbook.io/i2djs-v5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nswamy14.gitbook.io/i2djs-v5/tutorial-point/canvas-geoworld-map-with-d3-modules.md).

# Canvas: GeoWorld Map with D3 modules

<div align="center"><img src="https://content.gitbook.com/content/j4uz3UmYRheI1Pe6xix8/blobs/AQbeHRzqakE6nCsqKK1E/Screenshot%202020-03-14%20at%205.58.46%20PM.png" alt=""></div>

```
var width = 960;
var height = 500;

var renderer = i2d.canvasLayer('#myCanvas', {}, {});

var projection = d3.geoMercator()
				   .translate([width/2, height/2])
				   .center([-80, 60]);
        
var path = d3.geoPath()
		  	 .projection(projection);

var worldmap = d3.json("./../data/world.geo.json");

Promise.all([worldmap]).then(function(values) {
	let path_ = renderer.createEl({
		el: 'path',
		attr: {
			d: path(values[0])
		},
		style: {
			shadowOffsetX: 3,
			shadowOffsetY: 3,
			shadowColor: '#333333',
			fillStyle: 'rgba(255, 130, 130, 1)'
		}
	})
	.on('mouseover', function() {
		this.setStyle('fillStyle', 'rgba(250, 60, 60, 1)');
	}).on('mouseout', function() {
		this.setStyle('fillStyle', 'rgba(255, 130, 130, 1)');
	});
});
```