Demo plotly

100%

✓ Published0🌍 Public

Last edited Mar 15, 2022

Created on Mar 15, 2022

This map displays global precipitation values from the 2015_06_30_precipitation dataset, plotting each point as a fuchsia marker on an OpenStreetMap base layer. Built with Plotly.js and D3.js, the script uses `d3.csv` to load the remote data, then `Plotly.newPlot` to render a scattermapbox chart with zoom and drag interactions. The layout initializes the map centered on latitude 38, longitude -90 at zoom level 3, while CSS sizing fills the viewport.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Hharichandanamone21@gmail.com

66% match

Loading thumbnail…

C4gt demo 2

This interactive scatter plot displays district-level data across Indian states, allowing users to compare monthly rainfall values against yearly averages. Built with React and D3 v5, the visualization renders SVG circles through reusable AxisBottom, AxisLeft, and Marks components, with x and y scales created using scaleLinear. Users select attributes via react-dropdown menus, while D3’s csv loader fetches data from a GitHub gist, converting string values to numbers. Hovering reveals formatted values through SVG title elements, with a Polypoins-styled interface and compact number formatting for axis labels.

Aarunkumarv1530@gmail.com

65% match

Loading thumbnail…

A2 - Dot Plot

This dot plot visualizes total precipitation in Ecuador from 1995 to 2005, with each blue circle representing a year’s rainfall on a Cartesian grid. The p5.js sketch loads CSV data from a GitHub gist via `loadTable` in `preload()`, then draws the chart in `setup()` using functions like `circle`, `line`, and `text`. Gridlines mark 500-mm intervals, axes are labeled, and the data range is derived from the `total_precipitation` and `Year` columns.

Kkmduncan2@dons.usfca.edu

64% match

Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry

64% match

Loading thumbnail…

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

JJn1532

64% match

Loading thumbnail…

Gist e5accfd5c404e44ded12

This example maps the locations of parks from a CSV of city park attributes, encoding facility types with colored dots overlaid on a blank canvas. The visualization reads latitude/longitude coordinates from the data and uses a custom projection to plot each park, with legend markers indicating amenities like playgrounds or beaches. It relies on the D3 library for CSV parsing and SVG element creation, while the rendering itself is driven by plain JavaScript loops rather than a dedicated geographic mapping API.

11pixelzz

64% match

Loading thumbnail…

A2 - Heat Map

This heat map visualizes total precipitation across seven cities from 1995 to 2005, using color intensity to represent rainfall amounts. The p5.js sketch loads CSV data from a GitHub gist via `loadTable`, then plots color-coded rectangles for each city-year combination. Countries appear on the y-axis, years on the x-axis, with a legend showing the precipitation scale. Colors range from light green for low rainfall to dark teal for higher totals.

Kkmduncan2@dons.usfca.edu

64% match

Loading thumbnail…

Dope Map problem legend

This example maps weekly influenza case counts across French regions for 2014, visualizing the data as a choropleth with a pink-to-red linear color scale. It builds the map with `d3.geoConicConformal` and renders region boundaries using `d3.geoPath`, while tooltips reveal region names on mouseover. The CSV data is joined to GeoJSON features by region name, and the map fills areas based on summed case values from December 2014.

AAurelienVirello

63% match