Week #3 Exercise

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Week #3 Exercise</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
			}

svg {
				background-color: white;
			}
			rect:hover{
				fill: orange;
			}

</style>
	</head>
	<body>

var w = 800;
			var h = 350;

var svg = d3.select("body")
						.append("svg")
						.attr("class", "chart")
						.attr("width", w)
						.attr("height", h);

d3.csv("Parisian Associations_2.csv", function(error, data) {
				if (error) {
					console.log(error);
				} else {

//data.sort(function(a, b) {
						//return d3.ascending(a.parisPostalCode, b.Members);

//If your numeric values aren't sorting properly,
						//try commenting out the line above, and instead using:
						//
						//return d3.descending(b.parisPostalCode);
						//
						//Data coming in from the CSV is saved as strings (text),
						//so the + signs here force JavaScript to treat those
						//strings instead as numeric values, thereby fixing the
						//sort order (hopefully!).
					//});

console.log(data);

var rects = svg.selectAll("rect")
								   .data(data)
								   .enter()
								   .append("svg:rect");

rects.attr("x", 0)
						 .attr("y", function(d, i) {
						 	return i * 17;
						 })
						 .attr("width", function(d) {
						 	return d.Members / 4000;
						 })
						 .attr("height", 15)
						 .attr("fill", "green")

// Title
						 .append("title")
						 .text(function(d) {
						 	return "Paris - " + d.parisPostalCode + " > " + d.Members + " Members";
						 });

// svg.selectAll("text")
					//    .data(data)
					//    .enter()
					//    .append("text")
					//    .text(function(d){
					//    	 	return "Paris - " + d.parisPostalCode + " > " + d.Members + " Members";
					//    	 })
					//    .attr("x", function(d, i){
					//    		return (d.Members / 4000) + 10;
					//    })
					//    .attr("y", function(d, i) {
					// 	 	return i * 17 + 10;
					//    })
					//    .attr({
					//  	 "font-family": "sans-serif",
					//      "font-size": "11px",
					//      "fill": "grey",
					//      "font-weight": "bold"
					//    });

//    rects.selectAll("line")
					//         .data(x.ticks(10))
					//         .enter().append("svg:line")
					//         .attr("x1", 0)
					//         .attr("x2", 10)
					//         .attr("y1", 0)
					//         .attr("y2", 120)
					//         .attr("stroke", "#ccc");
					     
				}
			});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js