Untitled

100%

✓ Published0🌍 Public

Last edited Mar 29, 2021

Created on Mar 29, 2021

This interactive map displays three local businesses in Ithaca, New York, with custom icons and popups that appear on hover. Users can filter the displayed points by category—All, Cafes, or Others—using Bootstrap-styled buttons. The visualization is built with Leaflet for map rendering and GeoJSON data from `businesses.json`, with Font Awesome icons via Leaflet.awesome-markers to distinguish cafes from other business types.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This interactive choropleth map displays neighborhood-level economic and demographic data for a city, with a dropdown menu to select among over 40 metrics such as employment rates, business counts, and commercial property statistics. A checkbox toggles whether downtown neighborhoods are included in the visualization. Hovering over a neighborhood updates a tooltip showing the area’s name and its value for the selected metric. The map is rendered using D3.js with SVG paths from a GeoJSON file, and the dropdown dynamically updates the choropleth’s color scale using the viridis color palette.

KKelsey Xu

73% 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

71% match

Loading thumbnail…

Untitled

This interactive map displays a collection of settlement points across Europe and North Africa, rendered using Leaflet with tile layers from CartoDB. The visualization separates data into two categories: modern settlements and historical settlements, each represented by distinct markers using the Leaflet.AwesomeMarkers plugin with Font Awesome icons. Users can filter between categories using Bootstrap-styled buttons that toggle layer visibility through jQuery. The GeoJSON data is loaded via jQuery’s `$.getJSON` method, and the map automatically fits its bounds to all plotted locations.

Ccharliemok

71% match

Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok

69% match

Loading thumbnail…

Interactive Map

This interactive map displays a choropleth of neighborhood-level demographic and economic indicators. A dropdown menu allows selection of various metrics, such as employment rates, business counts, and property values. A checkbox toggles the inclusion of downtown. The map renders neighborhoods as SVG paths, colored with a viridis color scale, using D3.js. Hovering over an area reveals the neighborhood name and its value in a tooltip.

HHenrique Reichert

68% match

Loading thumbnail…

First Leaflet

This interactive map shows the coffee shops in New York City that the author has visited, with pop-ups displaying each shop’s name and a short personal review or anecdote. Built with Leaflet.js, the map uses OpenStreetMap tile layers and places eight markers at geographic coordinates obtained from the Mondeca Any-Place geocoding service. Each marker binds a popup containing HTML text, and the initial view centers on Manhattan at a zoom level of 12.

JJverma

68% match

Loading thumbnail…

Untitled

A dropdown menu selects a region, and a stacked bar chart animates to show the distribution of Furniture, Office Supplies, and Technology sales across cities. Each bar is segmented by category, with city names on the x-axis and total sales scaled on the y-axis. A checkbox toggles the sorting of bars by city name or by the derived segment total. The chart uses d3.csv to load the Superstore data, d3.stack for layering, d3.scaleBand and d3.scaleLinear for scales, and d3.transition to animate updates. SVG rendering with React centers the visualization.

SSarahKiyani

67% match

Loading thumbnail…

Untitled

An interactive choropleth map of Florianópolis, Brazil, displays neighborhood-level socioeconomic indicators. A dropdown menu allows users to switch between datasets, including employment rates, education levels, and business metrics. Hovering over a neighborhood reveals its name and the selected value in a tooltip. The visualization is built with React, using D3 for map projection and SVG rendering, with data loaded from a GeoJSON file.

HHenrique Reichert

67% match