Skip to main content
Log in
A

Anne Kerr

@Annetkerr·8 public vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive visualization displays UN population estimates and projections by global region from 1950 to 2100 as a multi-line chart, with color-coded lines sorted by final population. A vertical line marks the currently selected year, which updates as the user moves the mouse across the chart, triggering a re-render that highlights the selected position. The implementation uses d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by region, and d3.line with curveBasis for smooth paths. A custom colorLegend component renders the categorical d3.schemeCategory10 scale, while the mouse interceptor uses d3.mouse to detect cursor position and update the selection.

Jul 13, 2019
Loading thumbnail…

Tips Scatter Plot

A scatter plot visualizes the relationship between total bill amounts and tip values from the Tips dataset, with each point colored by the customer's sex (blue for male, magenta for female). The chart uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with grid lines, while `csv` loads the data from VizHub. Circle elements are appended to an SVG container, with radii fixed at 10 pixels and opacity set for readability. The visualization clearly distinguishes categorical groupings while revealing the positive correlation between spending and tipping.

Jul 4, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with a smooth curve connecting hourly readings across time. The visualization uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line with curveBasis to generate the path. Axes are rendered via d3.axisBottom and d3.axisLeft, with grid lines created by negative tick sizes. Data is loaded from a CSV using d3.csv, and the SVG output includes styled axis labels and a title.

Jul 4, 2019
Loading thumbnail…

Starter Vis

The Starter Vis example displays a simple text message, “Hello Anne!”, rendered in large red type against a dark blue background. It demonstrates the basic structure of a VizHub project, importing the `select` function from D3 v5 and a local ES6 module to set the text content. The styling uses Google Fonts’ Ubuntu typeface via CSS, and the page loads D3 from a CDN. This serves as a minimal template for initializing a visualization environment without complex data or rendering logic.

Jun 10, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates, with populations shown in millions. It demonstrates how to customize D3 axes by removing default domain lines, adding custom tick formatting that converts billions to millions, and applying custom styles to tick labels and grid lines. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` for scales, along with `axisLeft` and `axisBottom` for the axes, rendered as SVG within an HTML page.

Jun 9, 2019
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, letting users compare any two numeric car attributes (like horsepower, weight, or acceleration) by selecting columns via dropdown menus. Implemented with D3 v5, the visualization uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to build axes, while dropdown menus are created with a custom `dropdownMenu` function that appends `<select>` and `<option>` elements. Points animate into position with a 2-second transition, and the SVG rendering includes red semi-transparent circles.

Jun 9, 2019
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects 2017. The visualization is built with D3 v5, using `scaleLinear` for the population axis and `scaleBand` for the categorical country axis, rendered as SVG rectangles. Axis ticks and labels are added via `axisLeft` and `axisBottom`, with data loaded from a CSV file and population values multiplied by 1000 to reflect actual counts.

Jun 9, 2019
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, letting users compare any two numeric car attributes (like horsepower, weight, or acceleration) by selecting columns via dropdown menus. Implemented with D3 v5, the visualization uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to build axes, while dropdown menus are created with a custom `dropdownMenu` function that appends `<select>` and `<option>` elements. Points animate into position with a 2-second transition, and the SVG rendering includes red semi-transparent circles.

Jun 9, 2019