map block by jermspeaks

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
//     [
//       "Bayview Hunters Point",
//       "Bernal Heights",
//       "Castro/Upper Market",
//       "Chinatown",
//       "Excelsior",
//       "Financial District/South Beach",
//       "Glen Park",
//       "Golden Gate Park",
//       "Haight Ashbury",
//       "Hayes Valley",
//       "Inner Richmond",
//       "Inner Sunset",
//       "Japantown",
//       "Lakeshore",
//       "Lincoln Park",
//       "Lone Mountain/USF",
//       "Marina",
//       "McLaren Park",
//       "Mission",
//       "Mission Bay",
//       "Nob Hill",
//       "Noe Valley",
//       "North Beach",
//       "Oceanview/Merced/Ingleside",
//       "Outer Mission",
//       "Outer Richmond",
//       "Pacific Heights",
//       "Portola",
//       "Potrero Hill",
//       "Presidio",
//       "Presidio Heights",
//       "Russian Hill",
//       "Seacliff",
//       "South of Market",
//       "Sunset/Parkside",
//       "Tenderloin",
//       "Treasure Island",
//       "Twin Peaks",
//       "Visitacion Valley",
//       "West of Twin Peaks",
//       "Western Addition"
//     ];
    // const svg = d3.select(DOM.svg(d.width, d.height))
    //     .style("width", "100%")
    //     .style("height", "auto");
    // let selected = null;

    const d = {width: 1000, height: 750};
    
		const svgContainer = d3.select('body')
                           .append('svg')
                           .style('height', `${d.height}px`)
                           .style('width', `${d.width}px`);
		const mapColor = "#ff00cc";
		let selected = null;
    fetch("https://gist.githubusercontent.com/jermspeaks/4aa2e579a33aa92481980881dc2e9211/raw/84e48187d6331076288c24a610b5c8381eb1445d/sf.geojson")
        .then((response)=> response.json())
        .then((responseJSON) => {
      			draw(responseJSON);
        }).catch(function(err) {
      		console.log('FETCH ERROR: ', err);
    		});

    function draw(response) {
      const sf = response;
      const projection = d3.geoMercator()    
	  		.fitExtent([[0, 0], [d.width, d.height]], sf);
      const path = d3.geoPath().projection(projection);

      svgContainer.append("g")
        .selectAll("path")
        .data(sf.features)
        .enter()
        .append("path")
      // .attr("fill", d => color(1))
        .style('fill', '#fff0') //?transparent
        .attr("stroke", mapColor)
        .attr("d", path)
        .style('stroke-width', '1px')
      	.on("mouseover", handleMouseOver)
        .on("mouseout", handleMouseOut)
	      .on("click", handleClick);
    }
    
    function handleMouseOver(d) {
			const selection = d3.select(this);
      if (selected && selection.attr("class") === "selected") {
        return false;
      }
      selection.style('stroke', 'grey') 
        .style('stroke-width', '2px')
        .style('stroke-opacity', 1)
        .style('fill', '#f0f') //?transparent
    }
    function handleMouseOut(d) {
      const selection = d3.select(this);
        if (selected && selection.attr("class") === "selected") {
          return false;
        }
        selection.style('stroke', mapColor) 
          .style('stroke-width', '1px')
          .style('stroke-opacity', 1)
          .style('fill', '#fff0') //?transparent
    }
    
    function handleClick(d) {
      console.log('neighborhood', d.properties.nhood);
      transitionNeighborhood(d.properties.nhood);

      // Phase out previously selected
        if (selected) {
          selected.style('stroke', mapColor) 
              .style('stroke-width', '1px')
              .style('stroke-opacity', 1)
              .style('fill', '#fff0')
              .classed("selected", false);
        }

        // Set newly selected
        selected = d3.select(this);
        selected.style('stroke', 'grey')
          .style('stroke-width', '2px')
          .style('stroke-opacity', 1)
          .style('fill', '#ccc')
          .classed("selected", true);
    }
    
    function transitionNeighborhood(nhood) {
      // Exit
      d3.selectAll('g.nhood-text').remove();
//       Enter
      var neighborhoodGroup = 
          svgContainer
            .append('g')
            .classed('nhood-text', true);
      
      var neighborhoodText = 
          neighborhoodGroup
            .append('text')
            .attr("x", 50)
            .attr("y",50)
            .text(nhood);
    // //       	.style('fill')
    }
    
  </script>
</body>