fresh block

100%

✓ Published0🌍 Public

Last edited Jul 24, 2017

Created on Jul 24, 2017

A map of San Francisco Bay Area airports shows the percentage of time each month that a nearby weather station reports fog, with each station labeled by its three-letter code. The visualization embeds D3-selected SVG circles and text labels within a Google Maps overlay, positioning each marker using the map's projection. Airport data is loaded from a local JSON file, and the map itself is rendered with the Google Maps JavaScript API.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This visualization compares San Francisco dispatch call data across five neighborhoods using a series of radar charts. Each chart isolates a single region, plotting the count of calls by type—such as Alarm, Fire, and Non-life-threatening—on axes radiating from the center, with larger shapes indicating higher frequencies. The charts are rendered as SVG using the D3.js v3 library’s radar-chart module, with custom styling applied via CSS. The static charts are generated from hardcoded CSV data, with each neighborhood assigned a distinct color to aid comparison.

CCatherine-Yu

73% match

Loading thumbnail…

fresh block

This visualization compares SFPD incidents across San Francisco neighborhoods in 2016 using two synchronized SVG charts: a bar chart sorted by average incidents and a line chart showing daily trends. Hovering over a bar highlights the corresponding line, while clicking filters the line chart to that neighborhood. The code uses nested data aggregation via `d3.nest()`, and transitions with `d3.transition()` to animate highlights. Both charts share the same dataset, sourced from SF Open Data's SFPD Incidents 2016 Daily, with scales set using `d3.scaleLinear()` and `d3.scaleBand()`.

GGoomble

69% match

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock

69% match

Loading thumbnail…

AREA GRAPH BABYYYYYY

This area graph shows daily temperature variations in San Francisco over time, with the filled region rendered in maroon against a light grid. The visualization loads CSV data from a remote dataset, converts timestamps to JavaScript Date objects, and uses d3.scaleTime and d3.scaleLinear to map dates and temperatures to SVG coordinates. A d3.area generator creates the filled path, while d3.axisLeft and d3.axisBottom produce labeled axes with tick marks. The animation-capable SVG uses transitions that are included in the bundle but not explicitly triggered in this rendering.

Mmoowaffles

69% match

Loading thumbnail…

fresh block

This visualization displays monthly values as a line chart with circular markers, showing a basic time series of twelve data points from January through December 2016. The SVG rendering uses d3.svg.line with an ordinal x-scale and linear y-scale to map the data. Hovering over a grey circle highlights it in red, reveals the corresponding value as text above the point, and draws a dashed vertical line from the marker down to the chart baseline. The code relies on d3.json for data loading and d3.time.format for date parsing.

MMarineRu

69% match

Loading thumbnail…

fresh block

A map of London shows a cluster of dots animating from radius one to radius six, each positioned by latitude and longitude from a CSV file. The visualization uses Leaflet with a Mapbox tile layer, and D3.js to render SVG circles that are projected to pixel coordinates and repositioned as the map pans or zooms, overlaid on the map’s overlay pane.

CChmits

68% match

Loading thumbnail…

fresh block

This visualization displays the daily market share of web browsers over a three-month period using a stacked area chart. The chart encodes each browser as a colored layer, with the y-axis showing percentage of total usage and the x-axis showing time. Built with D3 v4, it uses `d3.stack()` to stack the data series, `d3.area()` to construct the path geometries, and `d3.scaleTime()` and `d3.scaleLinear()` for the axes. The data is loaded from a TSV file, and category labels are positioned at the right edge of the chart for the larger share layers.

AAsilve00

68% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

68% match