L

Lauren

@LaurenStanley·35 public vizzes

Loading thumbnail…

Data Viz Final Project: Change in Global Tree Coverage

A choropleth map of global tree coverage change from 2000 to 2010. A dropdown menu filters the visualization by tree-coverage threshold (e.g., 30%), and each country is shaded with a red-yellow-green diverging scale indicating percentage of forest gain or loss. The map uses `d3.geoPath` with Natural Earth data loaded via `topojson-client`; a tooltip and color legend accompany the render. The underlying dataset is a CSV of county-level tree-cover loss, which is aggregated by country before mapping.

Loading thumbnail…

Project Momentum VI

This interactive choropleth map visualizes the percentage change in tree cover from 2000 to 2010 across countries. A dropdown menu filters the data by a minimum tree-coverage threshold, from 0% to 75%. The map uses a red-yellow-green diverging color scale to indicate losses and gains, with a mislabeled legend showing 'No Change' for a 50% gain. Built with d3.geoPath, d3.csvParse, and d3.flatRollup, it fetches GeoJSON from the Visionscarto World Atlas and county-level CSV data from a GitHub gist.

Loading thumbnail…

Project Momentum V

This map visualizes changes in forest cover from 2000 to 2010, with a menu allowing users to toggle the tree coverage threshold that defines forested area. Each country is colored according to its computed percentage gain or loss of tree cover using a red-yellow-green scale. The visualization loads country boundaries from a TopoJSON world atlas and processes tabular CSV data on tree cover extent by country and year. It uses `d3.geoPath` and `d3.geoNaturalEarth1` for map projection and rendering, `d3.csvParse` for data ingestion, and `d3.interpolateRdYlGn` for color encoding.

Loading thumbnail…

Project Momentum IV

This choropleth map visualizes changes in forest coverage between 2000 and 2010, with a dropdown menu letting users filter by varying tree-canopy density thresholds (from 0% to 75%). Each country is colored along a red-yellow-green diverging scale (via `interpolateRdYlGn`) to indicate whether that nation gained or lost forested area at the selected threshold. The map is rendered using `d3.geoPath` and `d3.geoNaturalEarth1` projections, with country shapes loaded from a TopoJSON world atlas and forest-loss data fetched from a CSV file.

Loading thumbnail…

Project Momentum III

This visualization maps changes in forest coverage from 2000 to 2010 across countries, with a dropdown menu to adjust the tree-coverage threshold (e.g., 30%) that defines what counts as forest. The map uses a red-yellow-green color scale to indicate the percentage change in forested area, tinting each country accordingly. Built with D3.js, it fetches topojson country outlines via `d3.geoPath` and a natural Earth projection, while parsing CSV data for the coverage deltas. The menu uses D3’s data join to update the threshold and redraw the map.

Loading thumbnail…

Spinning Globe

A dark globe rendered with an orthographic projection spins continuously, its country borders drawn in red against a black background. The animation updates the projection’s rotation each frame via `requestAnimationFrame`. Built with D3 v7, it uses `geoOrthographic`, `geoPath`, and `geoGraticule` to draw the sphere and graticule, while country outlines come from the `visionscarto-world-atlas` TopoJSON dataset processed with `topojson-client`.

Loading thumbnail…

Transforming Global Tree Cover Loss and Gain, by Country 2000-2021

This visualization transforms global tree cover data, filtering for a 30% canopy threshold to compare each country's forest extent in 2000 and 2010, both in hectares and as a percentage of total area. It then calculates the difference between these two timepoints, revealing net loss or gain. The D3.js code uses `flatRollup` to aggregate by country and outputs the processed table as JSON in a `<pre>` element, sourcing data from Global Forest Watch and Hansen et al. (2013).

Loading thumbnail…

Menu Example

A dropdown menu offers six color choices, while a scatter-like column of circles encodes two fixed numeric datasets. The circle positions and colors update only when the menu selection changes. Built with D3 v7, the example uses a `select` join to bind options, `interpolateRdYlGn` for the circle fill gradient, and custom `menu` and `treeCoder` modules to render the SVG elements.

Loading thumbnail…

Project Momentum II

Project Momentum II visualizes country-level tree cover loss between 2000 and 2010 on a natural Earth projection, coloring each country on a red-yellow-green scale based on computed delta values. It loads geographic data from the visionscarto world atlas and tree cover CSV data, then uses d3.geoPath and d3.geoNaturalEarth1 to render country outlines, with color mapping via d3.interpolateRdYlGn.

Loading thumbnail…

Project Momentum

This visualization shows a choropleth map of global tree cover loss between 2000 and 2010, using a natural Earth projection. Country boundaries are rendered as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, with each country filled by an `interpolateRdYlGn` color scale based on the percentage change in forest extent per country area. The data comes from a CSV of County Tree Cover Loss, fetched and parsed with `d3.csvParse`, while country geometries are loaded from a TopoJSON world atlas and converted with `topojson-client`. Hover styling and interaction are not implemented.

Loading thumbnail…

Menu

This example demonstrates a simple interactive menu for selecting a color from a predefined palette. It uses D3 v7’s `select` and `join` methods to render an HTML `<select>` element with options for six colors, updating the displayed selection as the user changes the value. The code separates the menu logic into a reusable function and leverages a state management pattern to track the current choice. The visualization itself is minimal, showing only the dropdown on a grey background, with no further graphical output beyond the menu.

Loading thumbnail…

Pseudo Visualization

This pseudo visualization demonstrates the foundational marks and channels needed to map global tree cover change, using a parabola to show how GPS-derived x and y coordinates will position data. A series of circles, distributed via d3’s `selectAll` and `join`, are placed using computed `cx` and `cy` attributes, while their fill colors apply `interpolateRdYlGn` to encode values from 0 to 2500. The example uses d3 v7 APIs, including `symbol` and `symbolsFill` for alternate shapes, and renders directly into an SVG canvas sized to the browser window.

Loading thumbnail…

Color Changing Mouse Follower

A circle follows the mouse cursor across the canvas, and a click randomly changes its fill color. The visualization demonstrates a unidirectional data flow pattern using D3 v7, where mouse events update a state object which then triggers a re-render of the SVG. It uses D3's `select` and `.join` operations to efficiently create and update the circle element, while the rendering logic resides in a separate `viz.js` module. The circle's position and color are driven entirely by the state managed through a custom `setState` function.

Loading thumbnail…

Final Project Momentum

This visualization maps global tree cover loss by country, using a chloropleth color scale from green to red to indicate the percentage change between 2000 and 2010. The code fetches geographic boundaries from the VisionCarto World Atlas and joins them with CSV data on tree cover extent, applying a D3 Mercator projection and `geoPath` for rendering. Country colors are computed with `interpolateRdYlGn` based on the calculated land-area delta, with stroke outlines for boundaries.

Loading thumbnail…

Simple World

A black world map renders graticule and country outlines in red against a dark background. The visualization fetches tree cover loss data from a GitHub-hosted CSV and the 110m World Atlas TopoJSON, though the choropleth fill logic is currently commented out, leaving countries uniformly gray. Built with D3.js, it uses `geoNaturalEarth1` and `geoPath` for projection, `csvParse` and `flatRollup` for data processing, and `interpolateRdYlGn` for color scaling.

Loading thumbnail…

Fork of Data Viz Project

This choropleth map visualizes estimated population by country, with color encoding from light blue to dark blue based on population magnitude. It uses D3 v7's `geoMercator` projection and `geoPath` to render world country boundaries from TopoJSON data in World Atlas. Population values come from the accompanying TSV file, which maps ISO country codes to their `pop_est` estimates, and a `scaleLinear` determines the fill color per nation.

Loading thumbnail…

Fork of Data Viz Project

This choropleth map visualizes global population distribution using a dark blue color gradient. The map renders world country boundaries with D3’s `geoMercator` projection and `geoPath`, coloring each nation by its population estimate from the world-atlas dataset. Though the code fetches a CSV of tree-cover loss data, the map currently displays population data, not tree cover, as the primary variable. The visualization updates on window resize and includes hover highlighting for countries.

Loading thumbnail…

Scatterplot with Labels

This scatterplot shows the relationship between each country’s total area (on the x-axis) and the percentage change in tree cover (on the y-axis), using data from a CSV of tree-cover loss. Each circle’s color redundantly encodes the y-value via the `interpolateRdYlGn` color scale, with a title summarizing the chart. The visualization is built with D3 v7, using `scaleLinear` for axes, `axisLeft` and `axisBottom` from the `d3` module for ticks and labels, and a `flatRollup` operation in `viz.js` to aggregate the raw data by area and delta.

Loading thumbnail…

Data Viz Project

This example shows a choropleth world map colored by estimated population, sourced from World Atlas data loaded via `d3.json` and `d3.tsv`. A linear color scale maps population values from blue to dark blue, while hovering highlights individual countries. The map is rendered with `d3.geoMercator` and `d3.geoPath`, using TopoJSON features converted with the `feature` function, and the visualization updates responsively to the window size.

Loading thumbnail…

Line Chart

This line chart displays the annual tree cover loss in hectares for Afghanistan from 2001 to 2021, showing a decline from early peaks to near-zero in the mid-2010s followed by small fluctuations. The visualization uses d3.line and d3.scaleLinear to generate the path and scales, with d3.axisLeft and d3.axisBottom providing labeled axes. Data is loaded from a CSV file and parsed with d3.csvParse before being passed to the chart. The chart is rendered into an SVG with dimensions matching the browser window.

Loading thumbnail…

Line Chart

This example positions simple geometric shapes to represent the physical locations of trees over time. An array of odd numbers indexes fifty points, while two parallel arrays drive the x and y positions. D3’s `interpolateRdYlGn` color scale maps data values to a green-to-red gradient, and the visualization uses the SVG `path` and `circle` marks. Global tree cover in the code is a parabola, not real geographic data. Referencing the D3 v7 library, the visualization demonstrates fundamental positioning and color-mapping channels for future GPS-coordinate data.

Loading thumbnail…

First Visual

This visualization displays the relationship between each country's total area and its percentage change in tree cover since 2000, using a scatter plot loaded from a CSV dataset. Each circle's color redundantly encodes the tree cover change value through the `interpolateRdYlGn` color scale. The plot is rendered with D3 v7, using `scaleLinear` for both axes and `axisLeft`/`axisBottom` from the custom `axes.js` module. The data is processed with `csvParse` and `flatRollup` to aggregate area and delta values.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and petal length for 150 flowers across three species. The visualization uses D3 v7 to render circles on an SVG canvas, with axes created using the imported axis functions. The code employs d3.scaleLinear for both x and y axes, and d3.extent to determine the data domains. Data is loaded asynchronously via fetch and parsed with d3.csvParse, converting string values to numbers for accurate positioning.

Loading thumbnail…

Fork of Historical Space Launches on a map

This visualization displays historical space launch sites as red bubbles on an equal-earth projection map, with bubble size encoding the number of launches at each site. A time-series histogram beneath the map shows the monthly launch count, with a brushable selection that filters the map’s bubbles to the chosen date range. The code uses D3 v7’s `geoEqualEarth`, `geoPath`, `geoGraticule`, `scaleSqrt`, `bin`, and `brushX` APIs, rendered as SVG within a React framework. Geographic data comes from the world-atlas TopoJSON file, while launch records are loaded from a CSV file.

Loading thumbnail…

Fork of Globe Zoom - Animate

This visualization displays global nuclear explosion locations as points on a Mercator-projected world map, with landmasses, graticules, and country borders rendered as SVG paths. The code uses `d3.geoMercator`, `d3.geoPath`, and `d3.geoGraticule` to project and draw geographic features, while circles mark each nuclear event with coordinates and names loaded from a CSV file. Built with React and D3 v3, it incorporates a zoom-and-pan interaction for exploring the interactive globe.

Loading thumbnail…

Scatter Plot Simple

This scatter plot visualizes the Iris Dataset by mapping sepal length to the x-axis and petal length to the y-axis, with each flower sample represented as a large circle. The visualization deliberately omits axes, focusing purely on the distribution of points across three species. Built with D3 v7, the code uses `scaleLinear` and `extent` to compute scales from the data, then binds circles via `selectAll`, `data`, and `join`. The plot fills the browser window, with data loaded from a CSV file and parsed using `csvParse`.

Loading thumbnail…

Marks and Channels

Six small multiples demonstrate how different visual channels encode the same five-point dataset. Each panel maps a value to a different mark property: x-position, y-position, rect length, circle area, symbol shape, and categorical color via `schemeCategory10`. Panels are rendered as separate SVGs using `select` and `join` from the v7 D3 API, with each channel defined in its own module (`xPosition.js`, `length.js`, `hue.js`, etc.) and composed in `viz.js`.

Loading thumbnail…

Global Tree Cover Loss and Gain, by Country 2000-2021

This visualization explores global tree cover change between 2000 and 2010 by country, using a 30% canopy cover threshold. It compares forest extent in hectares and as a percentage of total country area, then calculates the difference between the two time periods. The application fetches CSV data from a GitHub gist and processes it using D3's `csvParse` and `flatRollup` functions, outputting the transformed data as JSON within a `<pre>` element. The underlying data originates from satellite imagery by Hansen et al. (2013) via Global Forest Watch.

Loading thumbnail…

Transforming Data

This example demonstrates unidirectional data flow in D3 v7 by loading the Iris flower dataset and transforming it through a series of data-processing APIs. The visualization initially renders the raw CSV data as JSON text, then uses `csvParse` to convert the spreadsheet into typed objects, converting numeric columns with unary plus operators. It showcases `group`, `flatGroup`, `rollup`, `flatRollup` for aggregations by species, `sum` for computing average sepal lengths, and `bin` for histogram-like frequency distributions of sepal lengths. The state management pattern uses explicit `setState` calls to trigger re-renders, contrasting with typical D3 data joins.

Loading thumbnail…

Blue Whale DNA Samples and Locations

This visualization displays the raw contents of a CSV file containing genetic and location data for blue whale samples, including microsatellite markers, haplotypes, and coordinates. It uses d3.csvParse to load the data from a remote GitHub source and renders the parsed dataset as a JSON-formatted text preview within a `<pre>` element. The code demonstrates a simple state management pattern with d3-selection, where the visualization updates whenever new data is fetched and parsed.

Loading thumbnail…

Seattle Mariners Game Record 2022

A scatterplot of the 2022 Seattle Mariners season visualizes each game as a point, with sepal length and width mapped to the axes and species used to categorize the outcomes. The code loads a CSV from a GitHub gist using `fetch` and `d3.csvParse`, then renders the data as a JSON-formatted text dump within a `<pre>` element. It uses d3.v7 for selection and data parsing, though no actual chart is drawn in the provided implementation.

Loading thumbnail…

Loading Data

This example demonstrates asynchronous data loading by fetching a CSV file of Iris flower measurements and displaying the parsed data as a text preview in the browser. The page initially shows “LOADING” until `fetch` retrieves the file, then `csvParse` converts the raw text into an array of objects. Numeric fields are explicitly converted from strings to numbers with the unary plus operator, and the resulting dataset is rendered inside a `pre` element. The visualization uses a minimal state management pattern with a `setState` function to trigger re-rendering once the data arrives.

Loading thumbnail…

Arrow Mouse Follower

An arrow follows the mouse cursor across the full viewport, rendered as an SVG path with a red marker arrowhead and thick stroke. The example demonstrates unidirectional data flow: a mousemove event triggers a state update that redraws the path. It uses D3 v7’s selection joins and `setState`/`render` pattern to update the SVG, with the path positioned relative to the cursor’s x and y coordinates.

Loading thumbnail…

Arrow with Delay

A red arrow with a marker follows the mouse pointer, leaving a thin white trail behind it as the user moves across the screen. The visualization demonstrates unidirectional data flow: a `mousemove` event updates the state, which triggers a re-render of an SVG path using D3 v7. The path is drawn with a quadratic Bézier curve (`T` command) between offset coordinates, with its endpoint styled by an SVG marker definition. The code updates the `d` attribute on each render to reflect the latest cursor position.

Loading thumbnail…

Fork of Mouse Follower

A red arrow with a white fill follows the mouse cursor across a full-window SVG canvas. The arrowhead is defined in a marker with a custom path, and the arrow's curved path is calculated from the cursor's x- and y-coordinates. The example demonstrates unidirectional data flow using the d3.select and .join methods, where mousemove events trigger setState to update the state, and a new path attribute is rendered each time. It uses d3.v7 from unpkg and renders exclusively as SVG.