jermspeaks/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## 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>
	<!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>