M

Mbrownshoes

@Mbrownshoes·53 public vizzes

Loading thumbnail…

Gist 92ccda216d53db9f20a8f2b4c3a60b58

This mosaic visualization displays a high-resolution digital elevation model of Place Glacier, rendered as a tiled web map. It uses a custom `mosaicjson` specification to define tile sources from public S3-hosted GeoTIFF files, with a tile size of 256 pixels and a scale of 2. The map supports zoom levels from 0 to 24, and the code sets geographic bounds for the glacier area. The rendering relies on the mosaic JSON structure to assemble the image tiles, enabling interactive exploration of elevation data.

Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

Loading thumbnail…

Gist bea3b68601c5004145624bdb03eaa43e

This example maps oceanographic CTD (conductivity, temperature, depth) sampling locations along the British Columbia coast and offshore Pacific. A GeoJSON MultiPoint dataset feeds a D3 map using `d3.geoPath` with a TopoJSON basemap for landmasses. Points cluster tightly near the continental shelf and along a repeating offshore grid, while a supplementary CSV (`proflocations.csv`) suggests profile station coordinates. The visualization shows the spatial distribution of oceanographic measurements, highlighting dense nearshore sampling versus broader offshore transects, rendered as a static point-layer over geographic context.

Loading thumbnail…

Gist 35554bfea1e16fad6823260f8957d873

This visualization presents NHL player statistics from the 2018-2019 season, comparing performance metrics across different competition levels, alongside team standings throughout the season. The player view uses a radar chart to display various advanced stats, while the standings section shows points progression. The code leverages D3.js for data binding and SVG rendering, with JSON files providing the underlying data for both individual player analytics and team ranking trajectories.

Loading thumbnail…

Gist 2d7133b7a34afa5c0ddb698237987830

This example visualizes NHL team performance metrics from a JSON dataset of game statistics, plotting each team's goals for and against across multiple games. It uses D3.js to render a scatterplot with team abbreviations as labels, positioning points based on goalsFor and goalsAgainst values while encoding win/loss records through point color. The visualization leverages d3.scalePoint for axes, d3.forceSimulation for label collision avoidance, and Canvas rendering to display all team data points from the standings.json file.

Loading thumbnail…

embed test

This example demonstrates how to embed a complete Observable notebook within an external webpage. The visualization displays the content of a specific notebook module, rendering each of its exported variables inside its own container. The code uses the Observable runtime API to load the notebook and instantiate an `Inspector` for each variable, while fetching the notebook definition from a gist-hosted JavaScript file. The rendering approach relies on dynamically injecting HTML wrappers and then populating them through the runtime's loading mechanism.

Loading thumbnail…

The Visualization

This visualization explores the relationship between daily bike-sharing user counts and weather in Washington DC, using a focus and context idiom. The context chart displays total users over the full date range, while a brushed and zoomable focus chart shows casual and registered users alongside temperature. Users can pan and zoom via a one-dimensional brush, and a geometric zoom on the focus chart updates the context brush. Built with D3 v4, it uses `d3.brushX`, `d3.zoom`, and `d3.line` to render SVG line charts from the UCI Machine Learning Repository dataset.

Loading thumbnail…

choked_pass

A streamgraph visualizes global temperature anomaly data over time, depicting the relative temperature change across different latitude bands. The visualization renders a flowing, organic form that narrows and widens, with a distinct dark "choked" region suggesting a period of significant cooling or data discontinuity. The chart is built using the D3.js library, leveraging its `d3.forceSimulation` API for dynamic layout and `d3.geoPath` for rendering spatial elements. The underlying data originates from NCEP Global Best Track files, with the primary dataset loaded from a NetCDF file, while a separate metadata CSV informs the encoding choices.

Loading thumbnail…

Radial Stacked Bar

A radial stacked bar chart displays population distributions across U.S. states, segmented by seven age groups. The SVG rendering uses d3.stack for data transformation and d3.arc to draw annular segments, with d3.scaleBand for angular positioning and the custom d3-scale-radial.js library (scaleRadial) for radial distances. Data comes from a CSV file, and colors are assigned via d3.scaleOrdinal. The circular layout emphasizes cyclical patterns, though the code notes this form is gratuitous for this non-cyclical dataset.

Loading thumbnail…

Nutrients

This radial stacked bar chart displays the distribution of sample counts across seven age groups for four data quality categories. The visualization uses a circular layout with age groups placed around the circumference, while stacked segments radiate outward to represent proportional counts within each category. The code leverages d3.scaleBand for angular positioning, a custom d3.scaleRadial() for radial scaling, and d3.arc() to generate the annular segments. Data comes from a CSV file, and the rendering is done via SVG elements.

Loading thumbnail…

Grouped Radial Bar Chart

This grouped radial bar chart visualizes the population distribution across seven age brackets for six US states. Each state occupies a circular sector, divided into seven colored segments whose radial lengths represent population counts, with dashed circular gridlines and a legend for age categories. Built with D3 v3, it renders as SVG and animates each segment’s growth using `transition.attrTween` with an elastic easing. The code loads data from a JSON file, scales values with `d3.scale.linear`, and draws paths via `d3.svg.arc` and an axis using `d3.svg.axis`. State names appear as circular text along a path.

Loading thumbnail…

Gist 7e5f8625242bd7a92965c702ed9065d4

This interactive time-series visualization displays oceanographic and atmospheric measurements from the Hakai Institute’s Quadra Island station, fetched live via d3.json from an ERDDAP server. Users can explore multiple parameters—including pCO2, aragonite saturation, temperature, salinity, and pH—through a labeled custom variable list, with a brushable context chart for zooming. Built with d3.v4 and SVG, the visualization incorporates a bisector for date lookup, formatted time axes, and optional threshold lines, while Bootstrap and jQuery handle interface controls.

Loading thumbnail…

Gist 473f153bb8e97062f0f4696aebe7a22c

This example shows a time-series line chart of oceanographic measurements from the Hakai Quadra station, pulling data via a JSON request to ERDDAP. It plots a single variable against time using a date-parsed x-axis and linear y-axis. The code uses d3.json to load rows from the ERDDAP table, d3.utcParse for ISO timestamps, and d3.line with d3.scaleTime and d3.scaleLinear to render the path. Axes are drawn with d3.axisBottom and d3.axisLeft, with the line styled in steelblue.

Loading thumbnail…

Gist 1328c48d7adc70f7a23d190cdf877f7d

This visualization uses D3.js to render a dynamic network graph of interconnected nodes and links. The code employs `d3.forceSimulation` with forces such as charge, link, and centering to position the nodes, while links and nodes are drawn using SVG lines and circles. The simulation updates positions on each tick, and the graph responds to drag and zoom interactions. Node sizes and link thicknesses are determined by degree and connection counts, offering a clear view of the network’s structure and clustering.

Loading thumbnail…

Gist ab36cde16c7c27a24e9ab1027d573d67

This line chart displays time-series data of carbon dioxide and related oceanographic measurements, plotted by date against a y-axis labeled "Price ($)". Built using d3.line, d3.scaleTime, and d3.scaleLinear, the visualization renders a single steelblue path over an SVG canvas. Data is fetched as JSON from an ERDDAP server at org_hakai_quadra, with the x-axis formatted via d3.timeParse and axes generated by d3.axisBottom and d3.axisLeft. The chart plots values mapped to the "close" field, though the y-axis label suggests a financial context.

Loading thumbnail…

Gist 40ca15ac0d6b9529e05fcfa15e22928d

This interactive map of British Columbia’s regional districts shows municipal solid waste disposal rates in kilograms per capita for 2014, with districts colored by a threshold scale. Hovering over a district reveals its exact rate, while a bar chart displays historical disposal trends for the selected region. The visualization uses D3.js with `d3.geo.path` and TopoJSON to render the map, and it dynamically updates a bar chart and line graph from the CSV dataset. Tooltips provide contextual population and tonnage figures on demand.

Loading thumbnail…

Gist 062e2198aa30fcbc94657e1e50de22e5

This interactive line chart uses D3.js to show grade-to-grade transition rates for British Columbia school students, with dropdown menus to select a demographic group and a comparison group. An animated slider scrubs through school years, triggering a brush interaction that updates the chart display. The visualization relies on D3’s time scale, linear scale for the slider, and SVG axes, while Bootstrap and Bootstrap Select handle the interface styling. The data appears to be sourced from the BC Ministry of Education’s public dataset on grade transitions.

Loading thumbnail…

Fish_wholesale_bc

This example visualizes British Columbia fish landings and wholesale values over time using a streamgraph. Toggle buttons switch between the two variables, and hovering reveals species-specific details. Built with d3.v4, it uses `d3.nest` for data grouping, `d3.stack` with the `d3.stackOffsetWiggle` offset, and `d3.area` for rendering. Data is loaded via jQuery AJAX from the BC Data Catalogue API, and an SVG path is drawn for each species layer with tooltips.

Loading thumbnail…

Gist 69526c10c61369e9ebc7f2479ab96375

This example renders a choropleth map of British Columbia’s regional districts from a TopoJSON file, coloring each polygon by its `FEATURE_AREA_SQM` property. The visualization uses a custom `d3.geoPath` projection to draw district boundaries and a sequential color scale to encode area. Hover effects are implemented through a `transition.attrTween` that animates the fill color on selection, while a tooltip displays the district name and area. The map is composed using D3’s topology and geometry APIs, with the data sourced from the province’s legal boundary records.

Loading thumbnail…

Gist e6fd5e60c1a06a14607e7c8cecae680f

This example maps the geographic distribution of oil and gas activity in British Columbia, showing well locations and facility sites as points over a basemap of the province. The visualization uses R’s `httr` library with `GET()` and `set_cookies()` to fetch a CSV dataset from the BC Oil and Gas Commission’s reporting portal, then renders the spatial data as a static plot. While the code does not specify a particular plotting package, the structure suggests base R graphics or a simple map layer, with coordinates derived directly from the parsed CSV content. It emphasizes raw data retrieval and immediate plotting without interactive elements.

Loading thumbnail…

Gist 1debda22711f899486839341c67adf87

This visualization maps hockey shot and goal locations from the allGames.csv dataset, plotting each event as a point on an ice rink. It uses D3.js to position and render markers, with the x and y coordinates directly reflecting the recorded spatial data. The concrete libraries involved include D3 for SVG manipulation and data binding, allowing for interactive exploration of shot patterns by goalie and event type. This example demonstrates a straightforward scatterplot approach to sports analytics, making it easy to compare shooting tendencies across different players.

Loading thumbnail…

Gist b26af969008f2443c96d3f0f8d66cb14

This example shows a simple line chart plotting the three values from `stuff.csv` (1, 2, 3) as a continuous series. The visualization uses D3.js to load the CSV and bind the data to SVG circles and a path, with scales mapping the x- and y-positions. A hover interaction highlights the nearest data point by enlarging the circle, while the line itself is drawn using `d3.line`. The chart includes axis ticks and labels generated with `d3.axisBottom` and `d3.axisLeft`, providing a minimal but clear view of the data’s upward trend.

Loading thumbnail…

carey price's goals against

This visualization plots the location of shots and goals against goaltender Carey Price during the 2017/18 NHL season. Using D3.js v4 with the d3-hexbin plugin, the chart aggregates shot locations into hexagonal bins over a hockey rink diagram, coloring each bin by the proportion of goals scored from that area. The color scale ranges from steel blue to red, with redder areas indicating a higher goal rate. The rink background is drawn from the war-on-ice icerink library, and the data comes from a CSV file of individual shot events.

Loading thumbnail…

ForceMagnetic based Hierarchical Orbits

Three orbiting bodies—a sun, planet, and moon—trace fading trails as they revolve in a hierarchical system, with the moon completing many more loops around the planet than the planet does around the sun. The animation uses `d3.forceSimulation` with the `d3.forceMagnetic` plugin to model gravity via electrostatic attraction, assigning each link its own gravitational constant to exaggerate relative orbital speeds. The SVG canvas is dynamically sized to the window, with orbit trails rendered as circles that fade and remove over five seconds.

Loading thumbnail…

Gist 5e36771400038b0c861c6617c622c5f7

A map of Canada visualizes interprovincial migration flows for 2017 Q2 and Q3, using animated, arrow-headed routes and scaled circles to show the net movement of people between provinces and internationally. Provincial boundaries are rendered from a TopoJSON file via `d3.geoPath` with a conic conformal projection, while migration data from a CSV file drives the visualization. A dropdown menu lets users switch between time periods, and D3 v4 handles the SVG rendering and animations.

Loading thumbnail…

Gist 021802844523c89a6e3f2aa959bc8421

This visualization uses D3.js to simulate a force-directed network layout, drawing nodes as circles connected by curved links. The code employs `d3.forceSimulation` to compute positions and velocities, with link distances tuned by the `distance` accessor and repulsive forces via `forceCollide`. It renders onto an HTML canvas using the Canvas API, and the animation loop runs continuously via `requestAnimationFrame`. The data is hardcoded in a variable named `data`, containing node and link arrays, but no external dataset is loaded; the example focuses on demonstrating a custom force layout with adjustable parameters.

Loading thumbnail…

Gist 257543a98ae32a2d951e5f3cd5a06979

This interactive visualization simulates a dynamic network of nodes and edges, showing how force-directed layouts settle into a stable configuration. The scene renders a clustered graph where nodes repel and links constrain movement, with subtle visual feedback as positions update in real time. Built with D3.js, the example uses `d3.forceSimulation` and `d3.forceManyBody` to compute physics, while a canvas element draws the animated paths and circles. The code loads a Gist-sourced dataset via a JSON request, and the simulation updates each frame, demonstrating how forces like charge and link distance shape the final network structure.

Loading thumbnail…

One-Way Markers

This example animates a one-way directional marker along a continuously changing curve, demonstrating how SVG marker-mid can create an arrow flow. The marker’s orientation automatically follows the path direction. The code uses d3.svg.line with basis interpolation, and the path is resampled using getPointAtLength to uniformly place markers. The animation is driven by d3.timer, updating a parametric function that morphs the curve over time. Both the base path and marker path are rendered as SVG elements, with the marker path using marker-mid to draw arrowheads.

Loading thumbnail…

Gist 82ea3e2377106d1f70b9af62a29450ee

This map shows Vancouver Island’s college regions, highlighting Vancouver Island in yellow against other regions in grey and light blue, with red labels for regional names and community locations. The visualization uses R with `ggplot2` to render the choropleth, while `sf`, `sp`, and `rmapshaper` handle spatial data processing and simplification of the U.S. boundary and college region polygons. Data comes from shapefiles for Canadian communities, U.S. national boundaries, ocean polygons, and the 2012 college region file, all reprojected to BC Albers (EPSG:3005).

Loading thumbnail…

Gist 206fe25c8c762e30421c93a23e8a5d01

This visualization charts the share of income held by different income groups across British Columbia and Vancouver from 1982 onward, comparing measures like market, total, and after-tax income. The display uses d3.scaleOrdinal for color encoding and d3.axisLeft/axisBottom for scaling, rendering lines or paths with d3.line to trace trends across years. Income groups are distinguished by hue, while the y-axis shows percentage shares, making it easy to compare the relative earnings of top, bottom, and middle percentiles over time.

Loading thumbnail…

Stacked Area Chart

This stacked area chart visualizes the changing market share of web browsers over time, derived from Clicky Web Analytics data. It displays the proportions of the "Bottom 99 percent" and "Top 1 percent" income groups across the years, using a categorical color scheme. The visualization loads data from a CSV file with `d3.csv` and parses years via `d3.timeParse`. D3 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) and shapes (`d3.stack`, `d3.area`) compute the stacked layers, while `d3.axisBottom` and `d3.axisLeft` render the axes on an SVG canvas.

Loading thumbnail…

Foreign Born in Canada

A stacked area chart shows how the percentage distribution of foreign-born populations in Canada has shifted across 15 regions from 1871 to 2011, based on Statistics Canada census data. The chart uses d3.stack with a stackOffsetExpand scale to display proportions, d3.area with curveBasis for smooth shapes, and d3-area-label to place region names inside the areas. Hovering over a region highlights it by changing its fill to black, while a secondary axis marks intervals for easier temporal reading.

Loading thumbnail…

Chord Diagram

This chord diagram visualizes directed migration flows between Canadian provinces and territories, using a circular layout where arcs represent total outbound movement and connecting ribbons show the volume of migration from origin to destination. The matrix data is hard-coded in the script, drawn from the included `mig.csv` file. Built with d3.v4, the visualization uses `d3.chord` for layout, `d3.arc` for group segments, and `d3.ribbon` for the directed links, all rendered as SVG with ordinal color scaling and group tick labels formatted in thousands.

Loading thumbnail…

Gist 45a6ae045cfccdc8c2e66ea43963e225

This visualization shows shot differentials for NHL games in the 2017-2018 season, with each game displayed as a small sparkline-style chart. The interactive team selector filters games by team. The charts are generated with d3.v4, using `d3.scaleLinear` for axes, `d3.line` for the score lines, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data comes from CSV files containing play-by-play shots and goals, rendered as SVG with hover effects.

Loading thumbnail…

D3: Loading GeoJSON data and generating SVG paths

This example combines Canadian health data with geographic boundaries to create a choropleth map. It loads GeoJSON province outlines via `d3.json` and CSV health statistics via `d3.csv`, merging them by province name to color each region using a `d3.scale.quantize` color scale. The map uses a `d3.geo.conicConformal` projection and `d3.geo.path` for SVG rendering, with population circles from a third CSV overlaid using the same projection.

Loading thumbnail…

interactive svg + canvas plot

This interactive plot demonstrates the combination of SVG and Canvas rendering in a single D3 visualization, with blue circles drawn as SVG nodes and black circles drawn on a Canvas layer. A shared force-directed layout, created using `d3.layout.force`, moves all 200 nodes together, with collision detection handled through a quadtree (`d3.geom.quadtree`) to prevent overlap. The visualization supports pan and zoom via `d3.behavior.zoom`, which scales the linear projective x and y mappings and triggers a redraw of both the SVG and Canvas layers.

Loading thumbnail…

D3 Canvas color transition

A canvas element displays a solid color circle that cycles through a smooth gradient from red to purple and back. The animation uses D3’s `d3.interpolateLab` to compute intermediate colors in the Lab color space, and a repeating `d3.interval` timer increments a value from 0 to 1, updating the canvas at each tick. The `setColor` function clears the canvas and redraws an arc filled with the interpolated color, using the canvas 2D context (`context.clearRect`, `context.fill`, and `context.arc`). The example demonstrates a lightweight, timer-driven color transition without external data, relying solely on the Canvas API and D3’s interpolation and interval utilities.

Loading thumbnail…

D3 v4 X-Value Mouseover with Droplines

This example shows a line chart of daily closing prices, displaying a crosshair and a tooltip with the precise dollar value as the mouse moves over the plot. The visualization is built with D3 v4, using the `d3.line` generator to create the path and `d3.axisBottom` and `d3.axisLeft` for the axes. A transparent `rect` overlay captures mouse events, and a `d3.bisector` function finds the nearest data point to the cursor’s x-coordinate, triggering the droplines and value label. The data is loaded from a TSV file with a date and close price per row.

Loading thumbnail…

air quality

This interactive visualization displays real-time air quality measurements for a selected British Columbia monitoring station. It presents pollutant concentrations as a series of clickable buttons, showing the most recent value for each measure, with the currently selected pollutant highlighted. The interface is built with D3 v4, rendering SVG elements and animations, and loads data dynamically from a CSV file via the gov.bc.ca API. Users can switch between different air quality metrics, such as NO2, PM2.5, and SO2, to explore the station’s current conditions.

Loading thumbnail…

Animating Brant Geese Migration Data

An animated point map presents the migration paths of Brant Geese over a year, with each bird plotted as a colored circle on an orthographic globe. The visualization reveals individual movement patterns and the timing of migration against a graticule and land boundaries. Using D3.js v3, it loads TopoJSON data for both the world map and individual geese locations, applies an orthographic projection, and animates the circles with a time-scaled transition. The circle's radius and color encode the bird's ID, while a timestamp displays the corresponding date during playback. The dataset originates from Movebank tracking studies.

Loading thumbnail…

Follow the money

A hierarchical tree diagram visualizes British Columbia gaming grant distributions, aggregating payments by grant type, sector, and subsector. Built with D3.js, the interactive visualization uses a collapsible tree layout where nodes represent categorical rollups and leaf nodes correspond to individual organizations. Payment amounts are summed through D3's nest and rollup operations, with a tooltip displaying details. The SVG rendering animates transitions when expanding or collapsing nodes, allowing viewers to trace funding flows from broad categories down to specific community recipients.

Loading thumbnail…

map and bar charts

This visualization combines an interactive choropleth map of British Columbia’s regional districts with an animated bar chart. The map’s fill color encodes each district’s 2014 municipal solid waste disposal rate (kg per capita), using a threshold scale. Clicking a district updates the adjacent bar chart to display that region’s disposal rates and population trends over time. Built with D3.js, it uses `d3.geo.path` and TopoJSON for the map, while the chart is rendered with SVG bars and lines from CSV data.

Loading thumbnail…

Streamgraph

A streamgraph displays changes in wholesale values of fish species over time, using a layered area chart with a wiggle offset to show magnitude fluctuations. The visualization includes an interactive tooltip that appears on mouseover, revealing the species name, and a button that toggles the display between landings tonnage and wholesale values datasets. Built with D3 v4, the code uses `d3.stack`, `d3.stackOffsetWiggle`, `d3.area`, and `d3.scaleTime` to construct the animated SVG paths, fetching data from the BC Data Catalogue API via jQuery’s AJAX.

Loading thumbnail…

Stacked-to-Grouped d3 v4

This interactive chart visualizes foreign investment data from the Government of British Columbia’s data catalogue, displaying the number of transactions across three categories over time. Users can toggle between stacked and grouped bar chart layouts via radio buttons, with each bar segment representing a different investment column. The visualization uses d3.v4’s scaleBand, scaleLinear, and stack functions for positioning and aggregation, while the data is fetched asynchronously via ajax from the catalogue’s API. SVG rectangles animate their height and y-position when switching modes, and a tooltip, built with d3.select, shows the precise value on mouseover.

Loading thumbnail…

stacked bar

A stacked bar chart displays records published by month in 2015, broken into four categories: Geographic, Dataset, Application, and WebService. The chart uses D3.js (v3.5.5) to load the CSV data from `views.csv`, compute cumulative y-values for each segment, and render colored rectangles per category. An ordinal x-scale maps months, a linear y-scale encodes total counts, and a legend identifies the color-coded categories. The SVG rendering includes axes formatted with the `.2s` tick format and uses `d3.svg.axis` for the bottom and left axes.

Loading thumbnail…

My bike route to UofT.

This visualization animates a bike route to the University of Toronto on a Leaflet map with a dark CartoDB basemap. A moving marker travels along the path, which is drawn from a series of GeoJSON points containing timestamps. The code uses d3.json to load the GeoJSON and d3.geo.path with a custom Leaflet projection to convert coordinates into SVG paths, while d3.svg.line connects the points into a single route. A transition animates the marker along the line, with the path and waypoints also rendered in SVG.

Loading thumbnail…

BC Data Catalogue Content

This interactive dashboard visualizes the content of the BC Data Catalogue's published public records in a searchable, filterable table. It connects to the catalogue's live API to retrieve and display dataset titles, descriptions, publication dates, and licenses, with each title linking to its catalogue page. Built with Bootstrap Table, jQuery, and a loading spinner library, the table uses data attributes for client-side pagination and search functionality, enabling users to explore the available datasets directly from the API.

Loading thumbnail…

Gist 50b557fa316c129ca06f

This bar chart shows monthly download counts from August 2015 through January 2016, with steelblue bars representing each month’s total. The visualization uses D3.js (version 3.5.5) with ordinal and linear scales, SVG axes, and a custom tooltip that appears on mouseover to display the exact download number. Data is loaded from a local CSV file (`downloads.csv`) containing month and download columns, and the y-axis uses SI-prefix formatting via `d3.format(".2s")`.

Loading thumbnail…

Tofino, B.C. Tsunami Map

This map shows the area around Tofino, British Columbia that would be inundated by a 15-meter tsunami, with the inundation zone highlighted in light blue. The visualization uses d3.geo.tile to load OpenStreetMap vector tiles for the basemap, d3.geo.path with a Mercator projection to render the coastline from a TopoJSON outline, and TopoJSON contour bands derived from a digital elevation model to depict the affected areas.

Loading thumbnail…

Gist 19433185a6aa63896a0e

This visualization presents a horizontal bar chart that ranks items by value, with bars extending from a central baseline. The chart is built using the D3.js library, specifically leveraging `d3.select` and `d3.scale` for data binding and scaling. The bar lengths are computed from a simple array of numeric values, and the chart includes value labels positioned at the end of each bar. The rendering relies on SVG primitives created through D3’s DOM manipulation, with a clean, minimal aesthetic that focuses on the rank order of the data points.

Loading thumbnail…

Gist 7f84369bd0c0b467d6b0

This visualization uses a force-directed graph layout implemented with D3’s `d3.forceSimulation` to position nodes connected by links, representing a network of relationships from an underlying dataset. The scene renders on an HTML5 Canvas, with the simulation’s tick events redrawing the nodes as colored circles and the edges as lines. A zoom interaction is added via `d3.zoom`, applying a transform to the canvas context to allow panning and scaling of the graph. The example demonstrates a typical static network diagram without additional interactivity beyond zoom and drag, relying on the force simulation to settle the layout.

Loading thumbnail…

Nanaimo: if the sea level rose by 4 meters

A map of Nanaimo, British Columbia, shows elevation contour lines, with lines below five meters highlighted in steel blue to indicate areas that would flood under a four-meter sea level rise. The visualization combines D3.js with the Leaflet mapping library to overlay an SVG of contour data, sourced from the city's LIDAR survey, onto an OpenStreetMap base layer. D3's geo projection and path functions render the TopoJSON contours, with color interpolation based on elevation values.

Loading thumbnail…

Flow Visualization - Tapered, Curved

Interactive nodes show aggregate flows between six circles, with link thickness and green color mapped from randomly assigned strength values. Dragging any circle interactively updates its connected paths, which are drawn as tapered, curved lines using `d3.svg.line` with a basis interpolation and offset calculations. The SVG visualization uses D3 v2, jQuery for node targeting, and includes drop-shadow filters and a background image.