rgdonohue/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Example drawing multiple geometries from GeoJSON to a D3.js map.

  
## atlanta-urban.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              atlanta-urban.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## city-limits.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              city-limits.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Atlanta Urban Geographies</title>

  <style>
    body,
    #map {
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
      margin: 0;
      padding: 0;
      background: rgba(0, 0, 0, .6);
      font-family: sans-serif;
    }

    .tooltip {
      color: white;
      background: #295b97;
      border: 0;
      font-size: .8em;
    }

    .urban {
      fill: '#295b97';
    }

    .city-limits {
      fill: none;
      stroke: #040d18;
      stroke-width: 3;
    }

    .neighborhoods {
      fill: #e0ecf9;
      fill-opacity: .3;
      stroke: #151f2b;
      stroke-width: .7;
    }

    .subways {
      fill: none;
      stroke: #ff6e00;
      stroke-width: 2;
    }

    .buses {
      stroke: #f0f062;
      stroke-width: .2;
      fill: none;
    }

    .trams {
      fill: none;
      stroke: #ff6e00;
      stroke-width: 3;
    }

    .other {
      stroke: #ff6e00;
      fill: none;
    }

    div.tooltip {
      position: absolute;
      padding: 4px 8px;
      border-radius: 3px;
      pointer-events: none;
      color: white;
      background: #295b97;
      font-size: 1.3em;
    }
  </style>
</head>

<body>

  <div id="map"></div>

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    // select our div element
    var mapContainer = d3.select('#map')

    // derive the width and height
    var width = mapContainer.node().getBoundingClientRect().width,
      height = mapContainer.node().getBoundingClientRect().height

    // attach a new SVG element and enable pan/zooming
    var map = mapContainer.append('svg')
      .attr('width', width)
      .attr('height', height)
      .call(d3.zoom().on("zoom", function () {
        map.attr("transform", d3.event.transform)
      }))
      .on("dblclick.zoom", null)
      .append("g")

    // deferred requests for all the data files
    var urbanAreasJson = d3.json('atlanta-urban.json'),
      cityLimitsJson = d3.json('city-limits.json'),
      neighborhoodsJson = d3.json('neighborhoods.json'),
      transitRoutesJson = d3.json('transit-routes-simplified.json')


    // when they're all loaded and available, send data to drawMap function
    Promise.all([urbanAreasJson, cityLimitsJson, neighborhoodsJson, transitRoutesJson]).then(drawMap)

    function drawMap(data) {

      // transverse mercator projection for Atlanta
      var projection = d3.geoTransverseMercator()
        .rotate([83 + 10 / 60, -32])
        .fitSize([width, height], data[1]) // fit the extend to the urban area data

      // create a path generator
      var geoPath = d3.geoPath()
        .projection(projection)

      // append an empty div to the body with class tooltip
      var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0) // hide visibility

      // append a new group element
      // and draw paths for the urban footprint
      map.append('g')
        .selectAll('path')
        .data(data[0].features)
        .enter()
        .append('path')
        .attr('d', geoPath)
        .attr('class', 'urban')

      // add the city limits
      map.append('g')
        .selectAll('path')
        .data(data[1].features)
        .enter()
        .append('path')
        .attr('d', geoPath)
        .attr('class', 'city-limits')

      // add the neighborhoods
      map.append('g')
        .selectAll('path')
        .data(data[2].features)
        .enter()
        .append('path')
        .attr('d', geoPath)
        .attr('class', 'neighborhoods')
        .on('mouseover', function(d) {

          // provide visual affordance of target neighborhood
          d3.select(this).style('fill-opacity', 1)

          // populate the tooltip with info and position near the event
          div.html(d.properties.NAME)
             .style("left", (d3.event.pageX) + "px")
             .style("top", (d3.event.pageY - 28) + "px")

          // fade in the opacity
          div.transition().style("opacity", 1)
        })
        .on('mouseout', function() {

          // return opacity of SVG to original
          d3.select(this).style('fill-opacity', .3)

          // fade out the tooltip
          div.transition().style("opacity", 0)
        })

      // add the transit
      map.append('g')
        .selectAll('path')
        .data(data[3].features)
        .enter()
        .append('path')
        .attr('d', geoPath)
        .attr('class', function (d) {
          // apply a particular class name based on the type
          var type = d.properties.type

          return type === 'Bus' ? 'buses' :
            type === 'SUBWAY' ? 'subways' :
            type === 'TRAM' ? 'trams' : 'other'

        })

    }
  </script>
</body>

</html>

## neighborhoods.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              neighborhoods.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## transit-routes-simplified.json

      
    Raw
  

              transit-routes-simplified.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!doctype html>

	<html lang="en">

	<head>
	<meta charset="utf-8">

	<title>Atlanta Urban Geographies</title>

	<style>
	body,
	#map {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	background: rgba(0, 0, 0, .6);
	font-family: sans-serif;
	}

	.tooltip {
	color: white;
	background: #295b97;
	border: 0;
	font-size: .8em;
	}

	.urban {
	fill: '#295b97';
	}

	.city-limits {
	fill: none;
	stroke: #040d18;
	stroke-width: 3;
	}

	.neighborhoods {
	fill: #e0ecf9;
	fill-opacity: .3;
	stroke: #151f2b;
	stroke-width: .7;
	}

	.subways {
	fill: none;
	stroke: #ff6e00;
	stroke-width: 2;
	}

	.buses {
	stroke: #f0f062;
	stroke-width: .2;
	fill: none;
	}

	.trams {
	fill: none;
	stroke: #ff6e00;
	stroke-width: 3;
	}

	.other {
	stroke: #ff6e00;
	fill: none;
	}

	div.tooltip {
	position: absolute;
	padding: 4px 8px;
	border-radius: 3px;
	pointer-events: none;
	color: white;
	background: #295b97;
	font-size: 1.3em;
	}
	</style>
	</head>

	<body>

	<div id="map"></div>

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
	// select our div element
	var mapContainer = d3.select('#map')

	// derive the width and height
	var width = mapContainer.node().getBoundingClientRect().width,
	height = mapContainer.node().getBoundingClientRect().height

	// attach a new SVG element and enable pan/zooming
	var map = mapContainer.append('svg')
	.attr('width', width)
	.attr('height', height)
	.call(d3.zoom().on("zoom", function () {
	map.attr("transform", d3.event.transform)
	}))
	.on("dblclick.zoom", null)
	.append("g")

	// deferred requests for all the data files
	var urbanAreasJson = d3.json('atlanta-urban.json'),
	cityLimitsJson = d3.json('city-limits.json'),
	neighborhoodsJson = d3.json('neighborhoods.json'),
	transitRoutesJson = d3.json('transit-routes-simplified.json')


	// when they're all loaded and available, send data to drawMap function
	Promise.all([urbanAreasJson, cityLimitsJson, neighborhoodsJson, transitRoutesJson]).then(drawMap)

	function drawMap(data) {

	// transverse mercator projection for Atlanta
	var projection = d3.geoTransverseMercator()
	.rotate([83 + 10 / 60, -32])
	.fitSize([width, height], data[1]) // fit the extend to the urban area data

	// create a path generator
	var geoPath = d3.geoPath()
	.projection(projection)

	// append an empty div to the body with class tooltip
	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0) // hide visibility

	// append a new group element
	// and draw paths for the urban footprint
	map.append('g')
	.selectAll('path')
	.data(data[0].features)
	.enter()
	.append('path')
	.attr('d', geoPath)
	.attr('class', 'urban')

	// add the city limits
	map.append('g')
	.selectAll('path')
	.data(data[1].features)
	.enter()
	.append('path')
	.attr('d', geoPath)
	.attr('class', 'city-limits')

	// add the neighborhoods
	map.append('g')
	.selectAll('path')
	.data(data[2].features)
	.enter()
	.append('path')
	.attr('d', geoPath)
	.attr('class', 'neighborhoods')
	.on('mouseover', function(d) {

	// provide visual affordance of target neighborhood
	d3.select(this).style('fill-opacity', 1)

	// populate the tooltip with info and position near the event
	div.html(d.properties.NAME)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px")

	// fade in the opacity
	div.transition().style("opacity", 1)
	})
	.on('mouseout', function() {

	// return opacity of SVG to original
	d3.select(this).style('fill-opacity', .3)

	// fade out the tooltip
	div.transition().style("opacity", 0)
	})

	// add the transit
	map.append('g')
	.selectAll('path')
	.data(data[3].features)
	.enter()
	.append('path')
	.attr('d', geoPath)
	.attr('class', function (d) {
	// apply a particular class name based on the type
	var type = d.properties.type

	return type === 'Bus' ? 'buses' :
	type === 'SUBWAY' ? 'subways' :
	type === 'TRAM' ? 'trams' : 'other'

	})

	}
	</script>
	</body>

	</html>