1
\$\begingroup\$

I would love if someone had any feedback on how to optimize my code, suggest better color schemes, and improve my table. I created python scrapers to get the data from the CDC and menuism to get the locations for each state. I would like someone to review my javascript code and overall design/implementation. If you like the project feel free to fork it or throw me some stars on the repo on github: https://github.com/benkraw/ChipotleMap

Demo: http://benkrawitz.com/chipotleMap/

<style>
body {
	background-color: white; 
	margin: 0 auto;
	width: 75%;
	font-family: Consolas, sans-serif;
	font-size: 1.5em;
	color: #454545;
	font-weight: bold;
	text-align: center;
}

footer {
  bottom: 0;
  margin-top:150px;
  text-align: center;
  font-size: 12px;
}

svg {
	stroke-width: 1.8px;
	stroke: #CFCFCF;
	fill: #F0F0F0;
	margin-left: 5%;
}

circle{
 fill: darkslateblue;
}

div.tooltip {
	color: white;
	background-color: black;
	padding: 0.5em;
	text-shadow: #F5F5F4 0 1px 0;
	border-radius: 7px;
	opacity: .9;
	font-size: 17px;
	position: absolute;
}

</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="http://benkrawitz.com/chipotleMap/layoutMap.js"></script>
	<script src="http://benkrawitz.com/chipotleMap/data.js"></script>
		<script src="http://benkrawitz.com/chipotleMap/dataCDC.js"></script>

<div id="table_container" class="csvTable"></div>
<script>

//Get all states from scraper data
var stateList = [];
for(var addr in coordinates){
		stateList.push(coordinates[addr].label.split(",")[1].split(" ")[1]);
}

//Get count of locations in each state
var resultsStatesNum = _.reduce(stateList,function(counts,key){ counts[key]++; return counts },
                  _.object( _.map( _.uniq(stateList), function(key) { return [key, 0] })))

Object.prototype.getKey = function(value){
  for(var key in this){
    if(this[key] == value){
      return key;
    }
  }
  return null;
};

/* D3 MAGIC */
	var width = 960,
	height = 500;

	var projection = d3.geo.albersUsa()
	.scale(1000)
	.translate([width/2, height/2]);

	var tooltip = d3.select('body').append('div')
	.attr('class', 'hidden tooltip');
	tooltip[0][0].style.display = "None" // need to hide on init

	var path = d3.geo.path().projection(projection);

	var d3_map = d3.select("body").append("svg:svg")
	.attr("width", width)
	.attr("height", height);

	var states = d3_map.append("svg:g")
	.attr("class", "states")
	.style("fill-opacity", "0.1")

	var locations = d3_map.append("svg:g")
	.attr("class", "locations");

	states.selectAll("path")
	.data(mapFeatures.features)
	.enter().append("path")
	.attr("d", path)
		.style("fill", function(d) {
			if(dataCDC[d.properties.name] != undefined){
				return "red"; // change fill color based on if there were any cases in state
			}
		})

	.on('mousemove', function(d) {
		var countLocs = resultsStatesNum[usStates.getKey(d.properties.name.toUpperCase())];
		if(countLocs === undefined){ //get count of locations
			countLocs = 0;
		}
		var countEcoli = dataCDC[d.properties.name];
		if(countEcoli == undefined){ //get count of ecoli cases
			countEcoli = 0;
		}
		tooltip[0][0].style.display = "block"
		var mouse = d3.mouse(locations.enter().append("svg:circle").node()).map(function(d) {
			return parseInt(d);
		});
		tooltip.classed('hidden', false)
		.attr('style', 'left:' + (mouse[0] + 15) +
			'px; top:' + (mouse[1]) + 'px')

		.html("<table><tr>" + d.properties.name + "</tr><br><hr><tr># of Resturants:" + countLocs
		 + "</tr><br><tr># of E.coli infections:" + countEcoli +"</tr></table>") // make tooltip hover
	})
	.on('mouseout', function() {
		tooltip[0][0].style.display = "none"
		tooltip.classed('hidden', true);
	});

	var locations = d3.select(".locations").selectAll('circle')
	.data(coordinates);

	locations.enter().append("svg:circle")
	.attr("cy", function(d) { return projection(d.coordinates)[1];})
	.attr("cx", function(d) { return projection(d.coordinates)[0];})
	.attr("id", function(d) { return d.label})
	.attr("r", 4.5)
	.attr('d', path)
	.on('mousemove', function(d) {
		tooltip[0][0].style.display = "block"
		var mouse = d3.mouse(locations.enter().append("svg:circle").node()).map(function(d) {
			return parseInt(d);
		});
		tooltip.classed('hidden', false)
		.attr('style', 'left:' + (mouse[0] + 15) +
			'px; top:' + (mouse[1]) + 'px')
		.html(d.label);
	})
	.on('mouseout', function() {
		tooltip[0][0].style.display = "none"
		tooltip.classed('hidden', true);
	});
	</script>


<script>
//make data table 
var table = $('<table/>').html('<tr><th>States</th><th># E.coli infections</th></tr>').appendTo('body'),    
tbody = table.append('<tbody/>');
table[0].style.marginTop = "-47%";
table[0].style.marginLeft = "-15%";
table[0].style.width = "35%";
var totalCount = 0;
$.each(dataCDC, function(key, value){
		if (key != "getKey"){
			totalCount += parseInt(value);
    tbody.append('<tr><td>'+key+'</td><td style="text-align:center;">'+value+'</td></tr>');
  }
});
tbody.append('<tr><td>Total </td><td style="text-align:center;">' + totalCount + '</td></tr><br><tr><td style="font-size:10px;">* Data collected from CDC</tr><br> <tr style="font-size:10px;"><td>Chipotle Restaurant Location Data: <a href="http://www.menuism.com/restaurant-locations/chipotle-mexican-grill-164322/us" target="_blank"> Menuism</a></td></tr>');

</script>

\$\endgroup\$
  • \$\begingroup\$ If you'd like us to suggest better color schemes and improve your table, then you need to include those in your question too. \$\endgroup\$ – 200_success Jan 8 '16 at 17:37
  • \$\begingroup\$ @200_success sorry just added the CSS, I attached the link to the demo too. If the question is too long I can try and shorten it to specific parts where I think the code can be improved. Thanks. \$\endgroup\$ – user2006018 Jan 8 '16 at 22:22
  • \$\begingroup\$ Thanks for adding the code. "Too long" is rarely a problem on Code Review. \$\endgroup\$ – 200_success Jan 8 '16 at 22:37
  • \$\begingroup\$ This might be a product of the SE code snippet mechanism, but the legend text on the left appears to be half above the top of the page. It seems that the original page you liked has this issue, so I'd venture a guess that this is a styling issue exacerbated by the larger font size you used. Briefly looking over your code I see some magic numbers for the margin top/left of the table. This is almost certainly a bad idea (if the data changes these numbers must). Instead, you're probably better off using position: absolute; top: 0; left: 0; (absolute positioning). \$\endgroup\$ – Bailey Parker Jan 11 '16 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.