Health Tech Accelerators

100%

Health Tech Accelerators

✓ Published0🌍 Public

Last edited Nov 11, 2015

Created on Nov 11, 2015

This interactive map-based story uses a scrolling interface to guide viewers through the locations of health tech accelerators. The visualization pairs a CartoDB-powered basemap with an Odyssey.js scroll-driven narrative, where map bounds and sublayer SQL queries update as the user progresses. It shows a sequence of geographic focuses, with text overlays providing context, while the map re-centers and re-filters data for each section. The code leverages the Leaflet and CartoDB libraries, with a custom scroll trigger managing the transitions between stops.

AI-generated description

Similar vizzes

Loading thumbnail…

Health Tech Accelerators

This visualization presents a map-based story about health tech accelerators, showing their geographic distribution across a world map. Using CartoDB and Leaflet, the page layers geographic points onto a base tile layer, with scroll-driven navigation controlling the narrative. The code employs Odyssey.js to bind story events to scrolling, adjusting the map’s view and filtering data through SQL queries on CartoDB’s visualization layer. The visualization relies on CartoDB’s tile and data services, with the map centered initially on [0,0] and zooming to fit accelerator locations. The title and author credits appear in a footer, sourced from a gist by BenHeubl.

BBenHeubl

94% match

Loading thumbnail…

Mapbox Storytelling

This interactive map tells a scrollytelling story about Philadelphia’s bicycle infrastructure. Using the Mapbox GL JS API, a fixed map is paired with scroll-driven chapters that reveal and hide separate layers—such as bike lanes, Indego bike-share stations, and trail networks—by adjusting their paint property opacities. The Scrollama library and Intersection Observer handle the chapter activation, while a JavaScript config file defines the narrative content and camera positions.

TThandolwethu Shakes Dlamini

66% match

Loading thumbnail…

A scoll application with a map several data sets to load in

This interactive scrollytelling visualization presents “The Cash Race,” a data-driven story that loads multiple datasets into a single scrolling application. It combines a choropleth map of U.S. counties, a bar chart, and a line chart to explore economic and donation-related trends. Built with D3.js, it uses SVG for rendering and animation, employing scales like `d3.time.scale` and `d3.scale.linear`, plus `d3.geo.albersUsa` for the map projection. The data, sourced from a gist by BenHeubl, is parsed and updated as users scroll, with transitions controlling element opacity and position.

BBenHeubl

66% match

Loading thumbnail…

CipherHealth "Our Hospitals" Map

This interactive map plots CipherHealth’s hospital and health-system accounts across the United States, with each location rendered as a circle whose size reflects an associated score and color encoding the account type. The visualization uses D3.js with a `d3.geo.albersUsa` projection and TopoJSON data for state boundaries, while animated transitions drop the markers into place on load. Hovering reveals tooltips powered by `d3-tip`, and a custom legend maps the categorical color scale to facility categories.

JJustinChill

63% match

Loading thumbnail…

Position Helper

Built with Mapbox GL JS v1.5.0 and the Mapbox Geocoder plugin, this interactive map acts as a position helper for scrollytelling projects. A fixed crosshair target sits at the screen center, while a side panel continuously displays the map’s current center coordinates, zoom level, pitch, and bearing. The tool updates these parameters on every map move, and also adds a 3D building extrusion layer from the Mapbox composite source. This provides a practical way to copy camera settings for storytelling sequences, as demonstrated in the linked Mapbox blog example.

HHirosaji

62% match

Loading thumbnail…

Untitled

This interactive scrollytelling visualization tells the story of a 2017 San Diego Data Visualization meetup, summarizing attendance, device types, and age ranges. As the user scrolls, animated SVG grids and bar charts transition with elastic easing, using D3.js v3 for data joins and transitions, while Waypoints triggers each scene. The data is generated with `d3.range` and random age values, rendered as colored rectangles and text labels.

TThandolwethu Shakes Dlamini

62% match

Loading thumbnail…

Scrollytelling Template

This scrollytelling template uses Mapbox GL JS and Scrollama to guide viewers through a narrative about crime statistics in Tokyo, overlaying data on a map of the city. It shows the geographic distribution of crimes, Olympic venue locations, and popular residential rankings, with map layers and camera positions changing as the viewer scrolls. The code uses Mapbox GL JS’s `setPaintProperty` to adjust layer opacity and the IntersectionObserver API to trigger chapter transitions. Data is sourced from the Tokyo Metropolitan Police and SUUMO rankings.

HHirosaji

62% match

Loading thumbnail…

Untitled

A dashboard of linked COVID-19 visualizations shows global cases via a Leaflet map, interactive line charts of pandemic metrics, and scatter plots. Users can select countries on the map to filter data, while brushable axes and k-means clustering reveal relationships like GDP per capita versus case rates. Built with d3.v7 and SVG animations, the dashboard loads data from a CSV and GeoJSON files.

Bbhargav83

61% match