Audree

@Audree·6 public vizzes

Bikes

Two time series lines compare daily bike counts on Montreal’s Berri and Parc streets throughout 2013, revealing seasonal patterns and distinct traffic volumes. The visualization loads two CSV files and merges their data to determine shared scale domains. Using D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis`, it renders steelblue and red SVG paths with hover highlighting. Data originates from Montréal’s open data portal.

Apr 24, 2015

Loading thumbnail…

Binding Data

Animated dot plot shows the relationship between species maximum longevity and gestation period, with circles transitioning from off-screen to their positions based on the AnAge dataset. Built with D3 v3, the visualization uses `d3.scale.linear` for both axes, `d3.svg.axis` for tick marks, and a 2-second `transition` to animate circle placement. Points display a tooltip containing the species’ common name and associated values.

Apr 18, 2015

Loading thumbnail…

Binding Data

A horizontal bar chart displays the maximum longevity of species from the AnAge database, with each species represented by a bar. The visualization uses D3.js version 3, binding CSV data to SVG rectangles. Bars are sorted in descending order of longevity, with a tooltip showing the species name and longevity value on hover. The code utilizes d3.csv, d3.scale.linear, d3.scale.ordinal, and d3.svg.axis for rendering.

Apr 11, 2015

Loading thumbnail…

Binding Data

This example shows the maximum longevity of various animal species as horizontal bars, sorted from highest to lowest, with each bar’s length proportional to longevity in years. Hovering over a bar reveals a tooltip with the common name and exact value. The visualization uses D3 v3’s `d3.csv` to load the data, then binds it to SVG `rect` elements via `data()`, `enter()`, and `append()`. Bar width is set with `attr("width", ...)` based on the `MaximumLongevity` field, and sorting is done with `d3.descending`.

Apr 2, 2015

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates how to load a CSV file with D3. The code uses the `d3.csv` function to asynchronously fetch and parse `anage-data-txt-clean.csv`, converting its tabular rows into an array of JavaScript objects. The resulting data is logged to the browser console for inspection. A static SVG scene with violet circles is rendered in the background, serving as a simple visual placeholder, while the primary focus is on the data-loading process. The example uses D3 v3 and renders output as SVG.

Mar 27, 2015

Loading thumbnail…

AnAge Species Longevity & Female/Male Maturity Data

This chart compares female and male maturity times (in days) against maximum longevity (in years) for a dataset of animal species. Each point represents a species, plotted by its maturity values, with an identity line to show where male and female maturation are equal. The visualization uses D3.js with a scatterplot, color-coded points for animal classes, and a tooltip on hover to reveal species details. It reads the CSV file from a Gist via the `d3.csv` method and scales the axes using a logarithmic transformation to handle the wide range of values.

Mar 24, 2015