Really stuck and need help!

1

Hi all … so im trying to draw a map with a topoJson file, but its not rendering :confused: … ive been stuck on this for a good 10 hours and i think im just oblivious to my mistake…

i thank you in advance for your help!

my html

<html>
	<head>
		<meta charset="utf-8">
		<title>My Coordinated Visualization</title>
	
		<!--main stylesheet-->
		<link rel="stylesheet" href="css/style.css" />
	</head>		
	<body>
		<!--libraries-->
	<script src="testing/interactive-multivariate-choropleth-map-d3/lib/d3.v3.js"></script>
	<script src="testing/interactive-multivariate-choropleth-map-d3/lib/topojson.v1.min.js"></script>
	<script src="testing/interactive-multivariate-choropleth-map-d3/lib/queue.js"></script>

			<!--link to main JavaScript file-->
		<script src="js/main.js"></script>
	</body>
</html>

my main.js (where the rendering is taking place)

//begin script when window loads window.onload = initialize(); 
//the first function called once the html is loaded
function initialize(){
	setMap();
}

//set choropleth map parameters
function setMap(){
    

	//map frame dimensions
	var width = 960;
	var height = 460;

	//create a new svg element with the above dimensions
	var map = d3.select("body")
		.append("svg")
		.attr("width", width)
		.attr("height", height);

	//create Europe Albers equal area conic projection, centered on France
	var projection = d3.geo.albers()
		.center([-8, 46.2])
		.rotate([-10, 0])
		.parallels([43, 62])
		.scale(2500)
		.translate([width / 2, height / 2]);
	
	//create svg path generator using the projection
	var path = d3.geo.path()
		.projection(projection);
	
	//use queue.js to parallelize asynchronous data loading
	queue()
		.defer(d3.csv, "data/FacebookPlaces_Albuquerque.csv") //load attributes from csv
		.defer(d3.json, "data/map.topojson") //load geometry
		
		.await(callback); //trigger callback function once data is loaded

	function callback(error, csvData, mapsl){
		//add Europe countries geometry to map			
		var countries = map.append("path") //create SVG path element
			.datum(topojson.feature(
				mapsl,mapsl.objects.collection))
			.attr("class", "countries") //class name for styling
			.attr("d", path); //project data as geometry in svg
	};
    }

you can view my whole project at cloud 9 here
https://ide.c9.io/alexaxel98/rs21_data_analysis

as well as access the files here

https://preview.c9users.io/alexaxel98/rs21_data_analysis (data folder contains map.topojson)

please help! i reallly want to know what im doing wrong !

Thanks !