Skip to main content
100%

Vis with great circle lines and leaflet q-cluster plugin

✓ Published0🌍 Public
Aandrewbt
Last edited Jun 1, 2015
Created on Jun 1, 2015

This example maps loan data from Tuscaloosa, Alabama, and Meridian, Mississippi, using great circle lines to connect points on a geographic map. Built with d3.v3 and CartoDB's Leaflet q-cluster plugin, it visualizes loan balances by plotting each record as a point, with arcs drawn between locations to highlight spatial relationships. The clustered markers use the q-cluster plugin to group nearby points, while the curved lines emphasize geographic connections. Data includes loan amounts, payoff dates, and loan types from the provided JSON.

AI-generated description

Similar vizzes

Loading thumbnail…

Vis w/ great circles and leaflet q-cluster

This visualization displays a map of loan locations in the United States, overlaid with clustered markers that encode the consumer versus commercial status of each loan. The example uses a Leaflet map with CartoDB basemaps and tiles, while the q-cluster library’s `QCluster.PointClusterer` aggregates points into donut-style clusters. Loan data is loaded from a JSON file via an AJAX request, and the map is initialized with a dark CartoDB tile layer, centered on Mississippi. D3.js is not directly used for rendering; instead, the clustering and map interaction rely on Leaflet and the q-cluster plugin.

Aandrewbt
89% match
Loading thumbnail…

CartoDB Point Clustering

This example displays point clustering on an interactive map centered on New Orleans, using CartoDB and Leaflet. It shows a sublayer of Twain dataset points filtered by city name, rendered as large blue markers. Clicking a marker queries overlapping points via CartoDB’s SQL API, revealing their count and source values in a side panel. The map uses Stamen toner tiles, while hover interactions change the cursor through CartoDB’s `featureOver` and `featureOut` events.

Aandrewxhill
68% match
Loading thumbnail…

Gist fdfc88707da3d0b9b203

This example shows the clustering and connection of points on a map based on their geographic proximity and shared attributes. It uses a force-directed layout via `d3.forceSimulation` to position nodes while links are drawn as curved paths, with a base projection provided by `d3.geoPath` and `d3.geoMercator`. The data is loaded from an external CSV file, and the visualization updates dynamically as the simulation runs, highlighting node neighborhoods and their interconnections.

MMSCAU
66% match
Loading thumbnail…

CartoDB Point Clustering

This example demonstrates point clustering on a map using CartoDB, showing how thousands of tornado records can be aggregated into hierarchical groups of different sizes. The visualization uses an SQL query with ST_SnapToGrid to cluster points at multiple scales, dynamically adjusting the cluster radius based on zoom level and a slider control. CartoCSS styles differentiate the cluster sizes, and clicking a point reveals the individual records it contains. The map is embedded with Google Maps and uses CartoDB.js, with an interactive side panel for cluster-size adjustments.

Aandrewxhill
65% match
Loading thumbnail…

Gist 7dcb0a7f9fae27f177013a8778db59bb

This interactive map clusters geographic points across multiple zoom levels, showing marker density from state and county summaries down to individual locations. It uses the Supercluster library for hierarchical point clustering and Tilebelt for tile calculations, with PostGIS spatial queries fetching points within tile bounding boxes. Clusters are cached per tile and zoom level, and D3’s max function determines cluster size scaling, while marker data comes from a geocoded node database.

Aakre54
65% match
Loading thumbnail…

Multi line chart

This multi-panel dashboard visualizes loan data trends using D3.js (v7) with SVG rendering. The first panel displays a multi-series line chart comparing normalized applicant income, coapplicant income, and loan amounts across records. The second panel combines bars showing average loan amounts by property area with a line depicting the percentage of credit history equal to 1. The code fetches CSV data via a GitHub Gist URL, parses it with `d3.csvParse`, and dynamically generates both charts using D3's SVG API, including axes, grid lines, and legends.

SSreedevi Itta
65% match
Loading thumbnail…

leaflet example

This example shows multiple datasets overlaid as circles on an interactive Leaflet map, with each dataset visualized using a different scale type. It uses the Leaflet library for map tiles and layers, while D3 v5 parses CSV data embedded in `<aside>` elements and binds it to SVG circle markers. The code assigns numerical or categorical attributes to color scales (threshold, quantize, or ordinal) and renders a legend for each group. Map layers for streets, satellite, and grayscale are togglable, and tooltips display an optional address attribute from the data.

EEE2dev
64% match
Loading thumbnail…

CartoDB Point Clustering

This example demonstrates point clustering on a map using CartoDB.js, Google Maps, and a custom SQL template. It visualizes tornado data, grouping nearby points into hexagonal clusters of varying sizes based on a user-adjustable "cluster size" slider. The clustering algorithm runs through a SQL query that creates three levels of hexagon grids (large, medium, small) to aggregate points, with each cluster's size and opacity reflecting the number of points it contains. Clicking a cluster reveals details about the original points it represents. The side panel includes a range input to dynamically adjust the cluster radius, which updates the visualization via CartoDB's SQL and CartoCSS templating.

Aandrewxhill
64% match