Skip to content

Instantly share code, notes, and snippets.

@mapsam

mapsam/README.md

Last active June 18, 2023 20:20
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save mapsam/6090056 to your computer and use it in GitHub Desktop.
Save mapsam/6090056 to your computer and use it in GitHub Desktop.
Download ZIP
D3: Queue.js
Raw
README.md

A look at Queue.js and how you can load multiple files before running the rest of the code. Simple visualization of populated places in the USA. Files loaded:

  • US States - topojson
  • Populated Places - geojson
Display the source blob
Display the rendered blob
Raw
cities.json
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id": 0, "properties": { "OBJECTID_1": 1, "OBJECTID": 10, "NAME": "Phoenix", "PLACE_KEY": "0401355000", "CAPITAL": "Y", "POPULATION": 1159014, "PCLASS": "8", "STATE": "AZ", "STATE_KEY": "04" }, "geometry": { "type": "Point", "coordinates": [ -112.073795102267638, 33.448183151118144 ] } }
,
{ "type": "Feature", "id": 1, "properties": { "OBJECTID_1": 2, "OBJECTID": 6, "NAME": "San Francisco", "PLACE_KEY": "0607567000", "CAPITAL": "N", "POPULATION": 735315, "PCLASS": "7", "STATE": "CA", "STATE_KEY": "06" }, "geometry": { "type": "Point", "coordinates": [ -122.41920893472286, 37.775206338009582 ] } }
,
{ "type": "Feature", "id": 2, "properties": { "OBJECTID_1": 3, "OBJECTID": 7, "NAME": "Los Angeles", "PLACE_KEY": "0603744000", "CAPITAL": "N", "POPULATION": 3553638, "PCLASS": "8", "STATE": "CA", "STATE_KEY": "06" }, "geometry": { "type": "Point", "coordinates": [ -118.243343585681657, 34.052238218717378 ] } }
,
{ "type": "Feature", "id": 3, "properties": { "OBJECTID_1": 4, "OBJECTID": 8, "NAME": "San Diego", "PLACE_KEY": "0607366000", "CAPITAL": "N", "POPULATION": 1171121, "PCLASS": "8", "STATE": "CA", "STATE_KEY": "06" }, "geometry": { "type": "Point", "coordinates": [ -117.163872251616112, 32.718813808553989 ] } }
,
{ "type": "Feature", "id": 4, "properties": { "OBJECTID_1": 5, "OBJECTID": 9, "NAME": "Las Vegas", "PLACE_KEY": "3200340000", "CAPITAL": "N", "POPULATION": 376906, "PCLASS": "7", "STATE": "NV", "STATE_KEY": "32" }, "geometry": { "type": "Point", "coordinates": [ -115.242295910898349, 36.233025670250925 ] } }
,
{ "type": "Feature", "id": 5, "properties": { "OBJECTID_1": 6, "OBJECTID": 4, "NAME": "Portland", "PLACE_KEY": "4105159000", "CAPITAL": "N", "POPULATION": 478795, "PCLASS": "7", "STATE": "OR", "STATE_KEY": "41" }, "geometry": { "type": "Point", "coordinates": [ -122.670358102992509, 45.523866170473809 ] } }
,
{ "type": "Feature", "id": 6, "properties": { "OBJECTID_1": 7, "OBJECTID": 5, "NAME": "Seattle", "PLACE_KEY": "5303363000", "CAPITAL": "N", "POPULATION": 524704, "PCLASS": "7", "STATE": "WA", "STATE_KEY": "53" }, "geometry": { "type": "Point", "coordinates": [ -122.347305961528264, 47.621014172327421 ] } }
,
{ "type": "Feature", "id": 7, "properties": { "OBJECTID_1": 8, "OBJECTID": 18, "NAME": "Denver", "PLACE_KEY": "0803120000", "CAPITAL": "Y", "POPULATION": 497840, "PCLASS": "7", "STATE": "CO", "STATE_KEY": "08" }, "geometry": { "type": "Point", "coordinates": [ -104.988105121756064, 39.755088691076878 ] } }
,
{ "type": "Feature", "id": 8, "properties": { "OBJECTID_1": 9, "OBJECTID": 20, "NAME": "Minneapolis", "PLACE_KEY": "2705343000", "CAPITAL": "N", "POPULATION": 358785, "PCLASS": "7", "STATE": "MN", "STATE_KEY": "27" }, "geometry": { "type": "Point", "coordinates": [ -93.264345967834004, 44.977478926026834 ] } }
,
{ "type": "Feature", "id": 9, "properties": { "OBJECTID_1": 10, "OBJECTID": 2, "NAME": "Des Moines", "PLACE_KEY": "1915321000", "CAPITAL": "Y", "POPULATION": 193422, "PCLASS": "5", "STATE": "IA", "STATE_KEY": "19" }, "geometry": { "type": "Point", "coordinates": [ -93.620311, 41.588820000000226 ] } }
,
{ "type": "Feature", "id": 10, "properties": { "OBJECTID_1": 11, "OBJECTID": 13, "NAME": "Kansas City", "PLACE_KEY": "2909538000", "CAPITAL": "N", "POPULATION": 340343, "PCLASS": "7", "STATE": "MO", "STATE_KEY": "29" }, "geometry": { "type": "Point", "coordinates": [ -94.583644121896327, 39.090430796864268 ] } }
,
{ "type": "Feature", "id": 11, "properties": { "OBJECTID_1": 12, "OBJECTID": 14, "NAME": "St. Louis", "PLACE_KEY": "2951065000", "CAPITAL": "N", "POPULATION": 351565, "PCLASS": "7", "STATE": "MO", "STATE_KEY": "29" }, "geometry": { "type": "Point", "coordinates": [ -90.198392301603803, 38.627484310195939 ] } }
,
{ "type": "Feature", "id": 12, "properties": { "OBJECTID_1": 13, "OBJECTID": 16, "NAME": "Dallas", "PLACE_KEY": "4811319000", "CAPITAL": "N", "POPULATION": 1009014, "PCLASS": "8", "STATE": "TX", "STATE_KEY": "48" }, "geometry": { "type": "Point", "coordinates": [ -96.797110919649583, 32.7810783647368 ] } }
,
{ "type": "Feature", "id": 13, "properties": { "OBJECTID_1": 14, "OBJECTID": 17, "NAME": "Houston", "PLACE_KEY": "4820135000", "CAPITAL": "N", "POPULATION": 1707391, "PCLASS": "8", "STATE": "TX", "STATE_KEY": "48" }, "geometry": { "type": "Point", "coordinates": [ -95.362486170001546, 29.759925640097947 ] } }
,
{ "type": "Feature", "id": 14, "properties": { "OBJECTID_1": 15, "OBJECTID": 11, "NAME": "Oklahoma City", "PLACE_KEY": "4010955000", "CAPITAL": "Y", "POPULATION": 406139, "PCLASS": "7", "STATE": "OK", "STATE_KEY": "40" }, "geometry": { "type": "Point", "coordinates": [ -97.459143261252166, 35.493094734701003 ] } }
,
{ "type": "Feature", "id": 15, "properties": { "OBJECTID_1": 16, "OBJECTID": 12, "NAME": "New Orleans", "PLACE_KEY": "2207155000", "CAPITAL": "N", "POPULATION": 476625, "PCLASS": "7", "STATE": "LA", "STATE_KEY": "22" }, "geometry": { "type": "Point", "coordinates": [ -90.069007047782009, 29.953282045779986 ] } }
,
{ "type": "Feature", "id": 16, "properties": { "OBJECTID_1": 17, "OBJECTID": 1, "NAME": "Orlando", "PLACE_KEY": "1209553000", "CAPITAL": "N", "POPULATION": 173902, "PCLASS": "5", "STATE": "FL", "STATE_KEY": "12" }, "geometry": { "type": "Point", "coordinates": [ -81.36443, 28.553157000000112 ] } }
,
{ "type": "Feature", "id": 17, "properties": { "OBJECTID_1": 18, "OBJECTID": 29, "NAME": "Miami", "PLACE_KEY": "1208645000", "CAPITAL": "N", "POPULATION": 365127, "PCLASS": "7", "STATE": "FL", "STATE_KEY": "12" }, "geometry": { "type": "Point", "coordinates": [ -80.190261702751968, 25.774251631527079 ] } }
,
{ "type": "Feature", "id": 18, "properties": { "OBJECTID_1": 19, "OBJECTID": 15, "NAME": "Memphis", "PLACE_KEY": "4715748000", "CAPITAL": "N", "POPULATION": 596725, "PCLASS": "7", "STATE": "TN", "STATE_KEY": "47" }, "geometry": { "type": "Point", "coordinates": [ -90.052349582595696, 35.142851655330787 ] } }
,
{ "type": "Feature", "id": 19, "properties": { "OBJECTID_1": 20, "OBJECTID": 31, "NAME": "Charlotte", "PLACE_KEY": "3711912000", "CAPITAL": "N", "POPULATION": 441297, "PCLASS": "7", "STATE": "NC", "STATE_KEY": "37" }, "geometry": { "type": "Point", "coordinates": [ -80.845841437890329, 35.231402117426342 ] } }
,
{ "type": "Feature", "id": 20, "properties": { "OBJECTID_1": 21, "OBJECTID": 30, "NAME": "Atlanta", "PLACE_KEY": "1312104000", "CAPITAL": "Y", "POPULATION": 367285, "PCLASS": "7", "STATE": "GA", "STATE_KEY": "13" }, "geometry": { "type": "Point", "coordinates": [ -84.389623370262143, 33.754504336994046 ] } }
,
{ "type": "Feature", "id": 21, "properties": { "OBJECTID_1": 22, "OBJECTID": 21, "NAME": "Chicago", "PLACE_KEY": "1703114000", "CAPITAL": "N", "POPULATION": 2721547, "PCLASS": "8", "STATE": "IL", "STATE_KEY": "17" }, "geometry": { "type": "Point", "coordinates": [ -87.624332733821802, 41.879534891213325 ] } }
,
{ "type": "Feature", "id": 22, "properties": { "OBJECTID_1": 23, "OBJECTID": 19, "NAME": "Indianapolis", "PLACE_KEY": "1809736000", "CAPITAL": "Y", "POPULATION": 746737, "PCLASS": "7", "STATE": "IN", "STATE_KEY": "18" }, "geometry": { "type": "Point", "coordinates": [ -86.156271735148835, 39.76700691825306 ] } }
,
{ "type": "Feature", "id": 23, "properties": { "OBJECTID_1": 24, "OBJECTID": 3, "NAME": "Louisville", "PLACE_KEY": "2111148000", "CAPITAL": "N", "POPULATION": 260689, "PCLASS": "5", "STATE": "KY", "STATE_KEY": "21" }, "geometry": { "type": "Point", "coordinates": [ -85.75157, 38.256075000000237 ] } }
,
{ "type": "Feature", "id": 24, "properties": { "OBJECTID_1": 25, "OBJECTID": 23, "NAME": "Detroit", "PLACE_KEY": "2616322000", "CAPITAL": "N", "POPULATION": 1000272, "PCLASS": "8", "STATE": "MI", "STATE_KEY": "26" }, "geometry": { "type": "Point", "coordinates": [ -83.045891912912111, 42.330155117184177 ] } }
,
{ "type": "Feature", "id": 25, "properties": { "OBJECTID_1": 26, "OBJECTID": 22, "NAME": "Cleveland", "PLACE_KEY": "3903516000", "CAPITAL": "N", "POPULATION": 498246, "PCLASS": "7", "STATE": "OH", "STATE_KEY": "39" }, "geometry": { "type": "Point", "coordinates": [ -81.693711792157558, 41.499688177014832 ] } }
,
{ "type": "Feature", "id": 26, "properties": { "OBJECTID_1": 27, "OBJECTID": 28, "NAME": "Washington", "PLACE_KEY": "1100150000", "CAPITAL": "Y", "POPULATION": 543213, "PCLASS": "7", "STATE": "DC", "STATE_KEY": "11" }, "geometry": { "type": "Point", "coordinates": [ -77.023976998585567, 38.892056731005482 ] } }
,
{ "type": "Feature", "id": 27, "properties": { "OBJECTID_1": 28, "OBJECTID": 24, "NAME": "Baltimore", "PLACE_KEY": "2451004000", "CAPITAL": "N", "POPULATION": 675401, "PCLASS": "7", "STATE": "MD", "STATE_KEY": "24" }, "geometry": { "type": "Point", "coordinates": [ -76.614275155487974, 39.294287310672019 ] } }
,
{ "type": "Feature", "id": 28, "properties": { "OBJECTID_1": 29, "OBJECTID": 26, "NAME": "Philadelphia", "PLACE_KEY": "4210160000", "CAPITAL": "N", "POPULATION": 1478002, "PCLASS": "8", "STATE": "PA", "STATE_KEY": "42" }, "geometry": { "type": "Point", "coordinates": [ -75.163904730820946, 39.951610239936826 ] } }
,
{ "type": "Feature", "id": 29, "properties": { "OBJECTID_1": 30, "OBJECTID": 25, "NAME": "New York", "PLACE_KEY": "3606151000", "CAPITAL": "N", "POPULATION": 1533774, "PCLASS": "8", "STATE": "NY", "STATE_KEY": "36" }, "geometry": { "type": "Point", "coordinates": [ -73.986950891738672, 40.75605400737436 ] } }
,
{ "type": "Feature", "id": 30, "properties": { "OBJECTID_1": 31, "OBJECTID": 27, "NAME": "Boston", "PLACE_KEY": "2502507000", "CAPITAL": "Y", "POPULATION": 558394, "PCLASS": "7", "STATE": "MA", "STATE_KEY": "25" }, "geometry": { "type": "Point", "coordinates": [ -71.057756783011428, 42.358847171748607 ] } }
]
}
Raw
index.html
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.states {
fill: #e5e5e5;
stroke: #fff;
stroke-width:1px;
}
.cities {
fill: red;
opacity:0.7;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
queue()
.defer(d3.json, 'states.json')
.defer(d3.json, 'cities.json')
.await(makeMyMap);
function makeMyMap(error, states, cities) {
svg.append('path')
.datum(topojson.feature(states, states.objects.usStates))
.attr('d', path)
.attr('class', 'states');
svg.selectAll('.cities')
.data(cities.features)
.enter()
.append('path')
.attr('d', path.pointRadius(5))
.attr('class', 'cities');
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment