Skip to main content
100%

Gist 90cdb323657752008da8614e378357d8

✓ Published0🌍 Public
Aalper
Last edited Nov 29, 2024
Created on Nov 29, 2024

This example shows a ranked list of coffee venues, sorted by their distance from the user’s current location. It uses the Dioxus framework with the `use_resource` hook to fetch venue data from the Cuppings JSON API, and the `init_geolocator` and `use_geolocation` functions to retrieve GPS coordinates. Venues are sorted with the `geoutils::Location` haversine distance calculation, while custom serde deserialization extracts formatted addresses from nested Google data.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8394756

This example maps the locations of bars and restaurants in Washington, D.C. using a GeoJSON file of point features. Each venue is plotted on a geographic map, with its name and address available from the data. The visualization likely uses Leaflet or a similar mapping library to render the GeoJSON layer, displaying bar symbols at each coordinate. The code relies on the geographic coordinates from the GeoJSON to position the markers, creating a simple point-based map of dining and drinking establishments across the city.

Aadkatrit
60% 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
59% match
Loading thumbnail…

Gist 8393718

This visualization displays the geographic distribution of shops across Germany, plotting each location as a point on a map using GeoJSON data. It employs Vue.js to manage the application state and rendering, while the map itself is drawn with D3.js, using `d3.geoPath` to project the geometry and likely `d3.forceSimulation` for any layout adjustments. The shop coordinates and attributes, such as street and city, are read directly from the included GeoJSON features. The rendering approach appears to be a static point map, with no interactive behavior visible in the provided code.

Aadkatrit
59% match
Loading thumbnail…

Gist ba91bcaa5136c47163bf2416f241e1f0

This visualization displays the geographic distribution of Subway restaurant locations across Alaska using a Vue.js framework. The map plots individual points based on longitude and latitude coordinates from the provided dataset, with each marker representing a specific Subway outlet. The data includes locations from various Alaskan cities such as Anchorage, Fairbanks, Bethel, Homer, and Juneau, along with details like addresses, restaurant numbers, and store identifiers. The visualization likely uses a scatter plot or point-based map to show the spatial clustering of Subway restaurants, with concentration visible in urban areas like Anchorage and Fairbanks, while remote locations appear isolated. The map effectively communicates the statewide distribution of Subway franchises, highlighting both dense urban clusters and sparse rural coverage. This example demonstrates how geospatial data from a CSV file can be visualized in a Vue.js application to reveal patterns in business distribution across a large, geographically diverse state.

WWill Carter
58% match
Loading thumbnail…

Gist 186528

This example shows a geospatial search for golf courses near a specific postcode in New South Wales, Australia. The visualization maps the query’s results by displaying course locations as points, with the postcode’s coordinates as a central reference. It uses the GeoKit Rails plugin, invoked via `Postcode.find_by_postcode` and `Course.find(:all, :origin => [postcode.lat, postcode.lng], :within => 20)`, to filter courses within a 20-mile radius. The data comes from a database of course records, each with latitude, longitude, and review metrics, rendered as a simple point-based map. The code does not use d3 or Three.js; it relies on ActiveRecord and GeoKit for spatial queries.

DDylanFM
58% match
Loading thumbnail…

Gist 8393666

This visualization plots bicycle shops in Glasgow using GeoJSON data from OpenStreetMap, with point and polygon features representing shop locations and building footprints. It shows the geographic distribution of bike retailers across the city, from central shops like Billy Bilsland to suburban outlets such as Clarkston Cycle Centre. The example uses D3.js with `d3.geoPath` to render the map shapes and likely employs a geographic projection to convert latitude-longitude coordinates into screen positions. The code processes the FeatureCollection to draw each shop as a distinct visual element, highlighting the spatial clustering of cycling-related businesses.

Aadkatrit
58% match
Loading thumbnail…

Gist 13ef2eb825b72036568cce3d413c0fab

This example shows the distribution of veterinary clinics in Anchorage, Alaska, with each clinic positioned by its geographic coordinates and labeled with its name. The visualization highlights a missing-longitude data issue by plotting points from the provided CSV, which includes clinic names, addresses, and phone numbers. The code uses D3’s `d3.forceSimulation` to adjust label collisions and `d3.geoPath` to render the map background, while the underlying data comes from a local CSV file parsed with `d3.csv`. The rendering approach relies on SVG elements, with circles for clinic locations and text labels, and the map projection is applied via D3’s geographic projection utilities.

WWill Carter
58% 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
58% match