JS Bin-neighborhood map

100%

JS Bin-neighborhood map

✓ Published0🌍 Public

Last edited Jul 18, 2017

Created on Jul 18, 2017

This interactive map shows the locations of six San Francisco restaurants, with corresponding list items below the map. The map is built using the Google Maps JavaScript API, while AngularJS and jQuery are included but not actively used. Users can filter the visible restaurants by typing in a search input, which hides non-matching list items and regenerates markers on the map. Clicking either a marker or a visible list item opens an info window displaying the restaurant’s name. Data is hard-coded as an array of coordinates and names.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 9ddca91496f8e79a0bb5f704f92cea71

This interactive data visualization presents the menu offerings of boba tea shops in San Francisco and San Jose, using a hierarchical JSON file as its data source. The code visualizes each shop’s menu structure—flavors, toppings, and sweetness levels—as an expandable tree or network diagram, with each option rendered as a node. Built with the JavaScript library D3.js, it likely employs `d3.forceSimulation` for layout and `d3.selectAll` for rendering nodes and links, enabling users to explore the distinct offerings and options across multiple shops. The visualization highlights the variety and customization available at each location.

115Dkatz

67% match

Loading thumbnail…

JS Bin

The example shows a two-column web layout with an interactive map on the left and a scrollable data panel on the right. The interface uses Bootstrap’s grid system for a responsive 50/50 split, with the map container filling the full viewport height. The JavaScript initializes a `metro` object and logs “hello world” to the console on document ready, though no map rendering or data visualization is yet implemented. The code relies on jQuery for document-ready handling and defines CSS for the map and data sections but does not demonstrate any actual charting or geographic rendering.

MMTClass

62% match

Loading thumbnail…

Gist c08c73a51bc142d88a5d39be7d007ab4

This visualization maps the locations of 16 McDonald’s restaurants in Anchorage, Alaska, using GeoJSON point data. It displays each restaurant as a marker on a map, with the geographic coordinates projected and rendered to show their distribution across the city. The visualization is built with Vue and uses d3.forceSimulation to position the points, while d3.geoPath handles the map projection and path rendering. The underlying GeoJSON source provides address, city, and phone metadata for each location, though the map itself focuses on the spatial arrangement of the restaurant points.

WWill Carter

61% match

Loading thumbnail…

One Minute Map

This example demonstrates a one-minute map centered on San Francisco, showing an interactive basemap with search and location-finding controls. Built with the Mapzen JavaScript library and Leaflet, the visualization uses the Mapzen Refill basemap style to render the geographic data. A geocoder search box in the top-right corner allows users to find places, while a locator button in the bottom-right identifies the user’s current position. A hash feature enables deep linking to the map’s coordinates and zoom level, making the map state shareable via URL.

GGeoWill

61% match

Loading thumbnail…

modified for voronoi

This example visualizes SFPD incidents by neighborhood in 2016, combining both a bar chart of average incidents and a line chart showing incident trends over time. Each neighborhood’s bar and corresponding line are linked, with mouseover highlighting the active district and click filtering to show only that district’s line. The code uses d3.nest() to aggregate data by district, d3.scaleBand for the bars, d3.scaleTime for the date axis, and d3 transitions for interactive animations. The data is loaded from the SF Open Data JSON API, and the visualization renders with SVG.

GGoomble

60% match

Loading thumbnail…

d3.js experiment - Donuts, Bars and Crime.

The visualization presents crime data across San Francisco neighborhoods for a selected year, combining donut charts for offense type distribution and bar charts for hourly incident patterns. Each donut chart displays the share of crimes by neighborhood, with the total count centered and interactive hover labels revealing specific neighborhood names and values. The bar charts beneath show the frequency of incidents across 24 hours per offense type. Built with CoffeeScript, it uses D3.js primitives including `d3.svg.arc`, `d3.layout.pie`, and `d3.scale.ordinal` for coloring, while the JSON data source is loaded via `d3.json` from the `top-neighborhoods-{year}.json` endpoint.

CCaged

60% match

Loading thumbnail…

Untitled

This interactive choropleth map displays a wide range of socioeconomic indicators for city neighborhoods, selectable via a dropdown menu. Built with React and D3.js, it renders neighborhood polygons as SVG paths, with colors encoding the chosen variable. A tooltip reveals the neighborhood name and its exact value on hover. A checkbox toggles the inclusion of the downtown area. The map data is visualized from a linked dataset, allowing for dynamic exploration of employment, education, and business statistics.

KKelsey Xu

59% match

Loading thumbnail…

Gist 6ce6b2a6ecda4579b64f

This visualization uses a Vue.js interface to display a list of city and state locations, likely from a dataset of place names. It shows a static, text-based table of these locations, with no visible map or chart. The code relies on standard DOM rendering through Vue’s template system, without additional data-viz libraries like D3 or Three.js. The rendering approach is a simple list, and the data source appears to be a CSV of location strings. No interactive or dynamic behavior is evident beyond the initial display.

CCaged

59% match