Built with blockbuilder.org
Last active
June 16, 2018 21:46
-
-
Save jermspeaks/e69369ad27db08e9870915b8c53a712b to your computer and use it in GitHub Desktop.
map block
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment