Christine

@stinosaurr·12 public vizzes

Map Visualization of COVID-19 Cases in the U.S.

This map visualizes the number of confirmed COVID-19 cases per U.S. state as of late March 2020, using a choropleth where darker shades indicate higher case counts. Hovering reveals the state name, while clicking toggles the display of case numbers directly on each state. The visualization uses D3 v4 with a `geoAlbersUsa` projection and `d3.geoPath` to render SVG state boundaries, and a `scaleLinear` maps case data from CSV files to a color range. Data originates from state health agencies, hospitals, and the CDC via the New York Times.

Apr 1, 2020

Loading thumbnail…

Map Visualization of COVID-19 Cases in the U.S.

This map visualizes confirmed COVID-19 cases across U.S. states, using a color scale to indicate case counts. Hovering reveals a state's name, while clicking toggles the display of case numbers on the map. Built with D3 v4, the visualization uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries from GeoJSON data. Case data comes from state health agencies and the CDC, as aggregated by the New York Times, and loads via `d3.csv`.

Mar 28, 2020

Loading thumbnail…

Making a Scatter Plot

This example shows a scatter plot of the top ten most populous countries, with population on the x-axis and country names on the y-axis. It uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs to map the data from `data.csv` into SVG circles. The chart includes gridlines, axis labels, and a title, with population values formatted in billions using D3’s `format('.3s')`.

Mar 28, 2020

Loading thumbnail…

Create a Map with D3

This example shows a map of Boston neighborhoods rendered as gray SVG paths on a 700 by 580 canvas. It uses D3 v4’s `d3.geoAlbers` projection and `d3.geoPath` to convert GeoJSON features from an embedded `mapdata.js` file into visible shapes. The code binds the neighborhood polygons to `path` elements and applies a uniform fill color, demonstrating a basic choropleth-style layout without additional styling or interactivity.

Mar 24, 2020

Loading thumbnail…

Enter, Exit, Update (i.e Merge)

This example demonstrates D3’s enter, exit, and update pattern for binding data to SVG rectangles, showing how bars are added, resized, or removed as the dataset changes. The code uses `selection.enter()`, `.merge(selection)`, and `selection.exit().remove()` within a reusable `drawChart` function, and it calls that function twice with different data arrays to illustrate the transitions. It relies on the D3 v5 `select` and `merge` APIs, with SVG rendering in a fixed 960×500 viewport.

Mar 23, 2020

Loading thumbnail…

Bowl of Fruit: General Update Pattern

This example demonstrates the General Update Pattern for data joins in D3.js, showing a bowl of fruit that changes over time as apples are eaten and replaced with lemons. The visualization uses ordinal scales to map fruit types to colors and radii, with circles and text labels representing each fruit within SVG groups. The code explicitly handles enter, update, and exit selections using `selection.merge()` and `selection.exit()`, applying transitions to reposition elements as the data array changes at timed intervals.

Mar 20, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth from 1950 to 2015, using a smooth, filled curve to show the upward trend. The visualization is built with D3 v5, parsing CSV data and rendering to SVG. It uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisLeft`, `d3.axisBottom` for ticks, `d3.area` with a basis curve for the filled region, and grid lines via tick sizes.

Mar 20, 2020

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart plots temperature in degrees Celsius against time, using a smooth, curved area fill to emphasize the temperature trend. Built with D3 v5, the visualization renders as an SVG and utilizes D3's `scaleLinear`, `scaleTime`, `area`, and `curveBasis` APIs to construct the chart, with axes and labels styled via CSS.

Mar 19, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in San Francisco, with a smooth curve plotted against date and temperature axes. The SVG visualization uses D3 v5 functions including `scaleTime`, `scaleLinear`, `line`, and `curveBasis` to generate the path, while `axisBottom` and `axisLeft` create labeled axes with gridlines. Data is loaded from the Data Canvas - Sense Your City dataset via `csv`. Styling applies a teal stroke and sans-serif typography.

Mar 19, 2020

Loading thumbnail…

Making a Bar Chart and Customizing Axes

This example shows a horizontal bar chart of the population of the top 10 most populous countries, with a title, axis labels, and grid lines drawn using SVG rectangles. The D3 v5 code loads `data.csv` with the `csv` function, then uses `scaleLinear` for the population axis and `scaleBand` for the country categories. Axes are generated with `axisBottom` and `axisLeft`, and tick labels are formatted with a custom function that replaces 'G' with 'B'. The chart applies a margin convention and removes default domain lines to clean up the presentation.

Mar 19, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, with red semi-transparent points revealing overlapping data density. The visualization uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load and parse the data, scale the axes, and render the SVG. Grid lines extend from the ticks, and labeled axes with a title clarify the plotted variables.

Mar 19, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with D3.js demonstrates fundamental DOM manipulation as its eyebrows animate up and down. Using D3 v5 and SVG elements, the example builds the face from a circle, two eye circles, rectangular eyebrows, and an arc-based mouth via the `d3.arc()` generator. A chained `transition()` with `attr()` calls moves the eyebrow group sequentially over two-second durations, triggering the wiggle effect. Static geometry is appended through selections, while animation relies on D3's built-in transition API.

Mar 17, 2020