Skip to content

Instantly share code, notes, and snippets.

@diggetybo

diggetybo/index.html

Created November 25, 2017 08:54
Show Gist options
  • Save diggetybo/bb7687f7dbec39ad9eb3f686ba393f12 to your computer and use it in GitHub Desktop.
Save diggetybo/bb7687f7dbec39ad9eb3f686ba393f12 to your computer and use it in GitHub Desktop.
Download ZIP
US Map
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
/* On mouse hover, lighten state color */
path:hover {
fill-opacity: .7;
}
circle:hover {
fill-opacity: .7;
}
body {
font-family: Play;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height of map
var width = 960;
var height = 600;
var margins = { left: 0, top: 100, right: 0, bottom: 0 };
// D3 Projection
var projection = d3.geo.albersUsa()
.translate([width/2, height/2.5]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
// Define linear scale for output
var color = d3.scale.linear()
.range(["#c3e2ff","#15198e"]);
//Create SVG element and append map to the SVG
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height+margins.top);
var parseTime = d3.time.format("%m/%d/%Y").parse;
var formatDate = d3.time.format("%m/%d/%Y");
var url = "my_data.csv";
d3.csv(url, function(error, rawData) {
var data = rawData.map(function(d)
{
return {
File: d.File,
Latitude: +d.Latitude,
Longitude: +d.Longitude,
Place: d.Location,
Due: parseTime(d.Due),
//Notif: parseTime(d.Notification)
};
}).filter(d => projection([d.Longitude,d.Latitude]));
d3.json("us-states.json", function(json) {
console.log(data)
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.style("stroke", "gray")
.style("stroke-linejoin","round")
.style("stroke-width", "1.5")
.style("fill", "#fff");
svg.selectAll('circle')
.data(data)
.enter()
.append("circle")
.attr({
cx: function (d) { return projection([d.Longitude, d.Latitude])[0]; },
cy: function (d) { return projection([d.Longitude, d.Latitude])[1]; },
r: 5,
fill: 'none',
stroke: 'steelblue'
})
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr("stroke-width", "1.5");
});
});
</script>
</body>
</html>
Raw
my_data.csv
File Location Latitude Longitude Due Notification
5819954 102 Cellular Tower Road (Birmingham) (9BH0169A), Glencoe 33.933 -85.903 3/28/2012 3/28/2011
5819954 607 Moonshine Drive, Attalla 34.131 -85.993 3/28/2012 3/28/2011
5260736 23972 Perdido Beach Blvd., Orange Beach 30.264 -87.615 10/13/2010 11/30/2009
6717732 29900 WAYSIDE DR., SPANISH FORT 30.659 -87.893 4/8/2016 4/20/2015
6717732 555 S SECTION ST., FAIRHOPE 30.508 -87.901 4/8/2016 4/20/2015
5110528 Monte Sand Blvd. @ Burritt Museum, Huntsville 34.718 -86.539 6/19/2013 6/15/2012
5110528 Top of Drake Mountain, Huntsville 34.797 -86.64 6/19/2013 6/15/2012
5110528 Atop Rainbow Mountain, Huntsville 34.734 -86.729 6/19/2013 6/15/2012
5110528 793 Range Road, Gurley 34.665 -86.393 6/19/2013 6/15/2012
5110528 1124-A Lewis Mountain Rd., New Market 34.857 -86.428 6/19/2013 6/15/2012
5147034 23100 Mcauliffe Drive, Robertsdale 30.562 -87.729 7/10/2013 7/24/2012
5702822 Brock Mountain, Oxford 33.571 -85.846 10/2/2013 8/14/2013
5897946 US 31 at Mill St., Decatur 34.523 -86.968 9/10/2014 4/8/2014
5897946 287 Telephone Tower Road, Laceys Spring 34.491 -86.631 9/10/2014 4/8/2014
5897946 Trinity Mountain, Trinity 34.58 -87.089 9/10/2014 4/8/2014
6589670 123 COTTONWOOD LANE, PALKVILLE 34.405 -87.801 1/27/2016 1/27/2015
6173929 200 Block Peacock Street, Ozark 31.464 -85.636 4/7/2015 9/21/2014
6478112 LAKE LURLEEN ROAD, COKER 33.294 -87.672 12/22/2015 9/30/2015
6478112 3721 26TH AVENUE, NORTHPORT 33.243 -87.58 12/22/2015 9/30/2015
6483116 6001 12TH AVE. EAST, TUSCALOOSA 33.151 -87.522 12/30/2015 7/15/2015
6483116 990 CAMPUS DRIVE EAST, TUSCALOOSA 33.217 -87.524 12/30/2015 7/15/2015
6641155 31ST AVENUE, PHENIX CITY 32.462 -85.038 3/24/2016 12/29/2015
6641155 MATHIS ROAD, SEALE 32.33 -85.165 3/24/2016 12/29/2015
6840943 OLD TYLER ROAD, BIRMINGHAM 33.418 -86.832 7/8/2016 3/3/2016
6899117 2.1 MI SW US HWY 31, EVERGREEN 31.376 -87.037 8/26/2016 8/12/2016
6899117 BELLEVILLE FIRE TOWER 2 MI N OF BELLEVILLE 31.457 -87.107 8/26/2016 8/12/2016
6899117 SEPULGA FIRE TOWER ROAD, EVERGREEN 31.598 -87.991 8/26/2016 8/12/2016
6899117 BROOKS FIRE TOWER 3.5 MI SSW, BROOKS 31.442 -86.714 8/26/2016 8/12/2016
6941978 Adjacent to Ben Stewarts Rd., Rabun 30.994 -87.758 10/14/2016 10/18/2015
6941978 5811 JACKS SPRINGS RD., ATMORE 31.109 -87.491 10/14/2016 10/18/2015
7318306 1966 COUNTY ROAD 14, PIEDMONT 34.036 -85.654 6/30/2017 6/30/2016
6112495 Mile .75 Clarks Road, Anchorage 61.089 -149.739 8/28/2015 6/12/2015
6112495 3820 E Tudor Rd., Anchorage 61.177 -149.809 8/28/2015 6/12/2015
6112495 Diamond Blvd & Judhpur, Anchorage 61.143 -150.019 8/28/2015 6/12/2015
6112495 Brownie Drive & Lynx Way, Eagle River 61.313 -149.464 8/28/2015 6/12/2015
6112498 17130 Old Glenn Hwy., Chugiak 61.375 -149.505 8/28/2015 6/12/2015
6112498 Cruiser Drive, Wasilla 61.517 -149.607 8/28/2015 6/12/2015
6112498 15500 E Eagle River Loop Road, Eagle River 61.296 -149.595 8/28/2015 6/12/2015
6112498 In the SW 1/4 of the SW 1/4 of Section 7, Anchorage 61.227 -149.714 8/28/2015 6/12/2015
6449734 GOOSE CREEK CORRECTIONAL CENTER - ADMINISTRATION BUILDING WASILLA 61.358 -150.006 9/10/2015 9/15/2014
5092475 Approximately 280th Ave & the Sun Valley Parkway, Buckeye 33.659 -112.659 12/28/2013 6/25/2012
5092475 Lower Buckeye Road, .5 M W of Hwy 85 (Buckeye #8397), Buckeye, AZ 33.423 -112.635 12/28/2013 6/25/2012
5092475 11461 S 171st Ave., Goodyear 33.346 -112.422 6/11/2013 6/25/2012
5092475 16699 S Rainbow Valley, Goodyear 33.295 -112.449 6/11/2013 6/25/2012
5889710 1342 E University, Tempe 33.423 -111.916 12/9/2009 12/16/2008
5889710 Bell Butte/Intersection of Broadway and I-10 Freeway, Tempe 33.407 -111.967 12/9/2009 12/16/2008
5889710 245 E Marigold (Adjacent to Water Tank), Tempe 33.445 -111.939 12/9/2009 12/16/2008
5889710 12717 S Central, Phoenix, AZ 33.335 -112.06 12/9/2009 12/16/2008
5889710 8201 S Hardy Dr., Tempe 33.341 -111.953 12/9/2009 12/16/2008
6523413 Calle Serena cul-de-sac and West of Calle Miramonte 33.691 -111.817 1/24/2014 7/26/2012
6523413 DOVE VALLEY 33003 N 52ND ST, PHOENIX 33.786 -111.969 11/18/2014 12/1/2014
4084911 701 W Carefree Hwy., Phoenix 33.792 -112.086 2/12/2011 12/16/2010
4084912 10600 N 7th St., Phoenix 33.586 -112.072 2/12/2011 1/7/2011
4084914 White Tanks East Peak, Litchfield Park 33.567 -112.558 2/12/2011 5/24/2010
4579913 12717 S Central, Phoenix, AZ 33.335 -112.06 2/12/2011 1/18/2011
4184356 Tower Mtn 5 MI NW of Crown King 34.234 -112.368 9/30/2011 9/9/2011
4184357 38.5 M S of Phoenix, Sacaton 33.002 -112.674 4/27/2011 2/1/2011
4090921 1342 E University, Tempe 33.423 -111.916 12/9/2009 12/16/2008
4726685 McDowell Mountain Park, Scottsdale, AZ 33.644 -111.812 8/29/2012 6/25/2012
5262196 45525 W Farrel Rd., Maricopa 33.029 -112.06 9/24/2013 10/6/2012
5928743 Shaw Butte 33.594 -112.087 9/13/2013 8/12/2013
5893045 1342 E University, Tempe 33.423 -111.916 9/19/2014 7/7/2014
5893045 911 S Hamilton 33.293 -111.832 9/19/2014 5/13/2014
5893045 12717 S Central, Site #13 Phoenix, AZ 33.333 -112.067 9/19/2014 6/24/2014
5893045 8201 S Hardy Dr., Tempe 33.341 -111.953 9/19/2014 8/11/2014
5893045 3550 S Dobson, Chandler 33.253 -111.888 9/19/2014 7/15/2014
7146215 300 East Sky Harbor Blvd., Phoenix 33.435 -112.01 1/30/2015 1/23/2015
5895472 701 W Carefree Hwy., Phoenix 33.792 -112.086 8/31/2016 4/13/2016
5895473 33003 N 52nd St., Phoenix 33.786 -111.969 8/31/2016 4/13/2016
5895475 23060 N 27th Ave., Phoenix 33.695 -112.119 8/31/2016 4/13/2016
Display the source blob
Display the rendered blob
Raw
us-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