- Jeremy took our code and added a graph! (Hint: right-click the page and click "view source" to see his code!)
Last active
December 14, 2015 03:28
-
-
Save yesezra/5021169 to your computer and use it in GitHub Desktop.
A baseline webpage used at Code Across NYC (http://www.meetup.com/openny/events/103151862/) to introduce people to programming through Javascript and open data. This is not the best example of good HTML (or Javascript), but we used it as a platform for exploration.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
</head> | |
<body> | |
<input type="submit" id="submit"></input><br> | |
<script> | |
$(function(){ | |
$("#submit").click(function(){ | |
console.log("button clicked!"); | |
// https://data.cityofnewyork.us/Environmental-Sustainability/Electric-Consumption-by-ZIP-Code-2010/74cu-ncm4 | |
$.ajax({ | |
url: 'http://data.cityofnewyork.us/resource/74cu-ncm4.json?building_type_service_class_=Commercial', | |
dataType: 'jsonp', | |
jsonp: '$jsonp' | |
}).success(function(buildingElectricityUse){ | |
var totalElectricity = 0; | |
$.each(buildingElectricityUse, function(index, value) { | |
// for each building, | |
// find its consumption in kwh | |
var buildingElectricity = buildingElectricityUse[index]["consumption_kwh_"]; | |
totalElectricity = totalElectricity + parseInt(buildingElectricity); | |
// add a new item to the list | |
$("#dataList").append("<li>" + buildingElectricity + "</li>"); | |
}); | |
$("#total").append(totalElectricity); | |
}); | |
}); | |
}); | |
</script> | |
Total Electricity (kWh): <span id="total"></span><br> | |
My Data List:<br> | |
<ul id="dataList"> | |
</ul> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
</head> | |
<body> | |
<input type="submit" id="submit"></input> | |
<script> | |
$(function(){ | |
$("#submit").click(function(){ | |
console.log("button clicked!"); | |
// https://data.cityofnewyork.us/Environmental-Sustainability/Electric-Consumption-by-ZIP-Code-2010/74cu-ncm4 | |
$.ajax({ | |
url: 'http://data.cityofnewyork.us/resource/74cu-ncm4.json', | |
dataType: 'jsonp', | |
jsonp: '$jsonp' | |
}).success(function(data){ | |
}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment