JenniferFernald

@JenniferFernald·9 public vizzes

Scatter Plot with Menus

This interactive scatter plot displays automobile characteristics from the UCI Auto MPG dataset. Dropdown menus allow users to select which numerical columns (e.g., horsepower, weight, acceleration) map to the X and Y axes. The chart uses D3 v5's `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration(2000).delay()` to animate points when axes change, rendering as SVG with circles and axis labels.

May 21, 2019

Loading thumbnail…

Scatter Plot with Menus

May 21, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between Height and Weight for Pokémon, with each circle representing an individual Pokémon. The data comes from a CSV file loaded via `d3.csv`. The code uses `d3.scaleLinear` with `d3.extent` to map the data to SVG coordinates, and renders circles with a fixed radius. Axes are drawn using `d3.axisBottom` and `d3.axisLeft` with grid lines, and custom labels and a title are added via SVG text elements in a `d3` selection chain.

May 14, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between the height and weight of Pokémon, with each red semi-transparent circle representing an individual specimen. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the axes, while the data is loaded from a CSV file using the `csv` function. The plot includes labeled axes, a title, and grid lines, with the SVG output rendered within a 960×500 pixel canvas.

May 14, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between Pokémon height and weight, with each purple circle representing an individual Pokémon. The code uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map the data to SVG coordinates, while `csv` loads the dataset from the VizHub-hosted Pokémon CSV. The chart includes labeled axes, a title, and semi-transparent circles to reveal overlapping points, following the same pattern as the original Auto MPG dataset example.

May 14, 2019

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The visualization uses d3.csv to load the data and d3.scaleLinear with d3.extent to map the variables to pixel coordinates, while d3.axisLeft and d3.axisBottom generate the labeled axes with grid lines. The chart renders as an SVG with semi-transparent red circles, and the code includes a title and rotated axis labels.

May 14, 2019

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg dataset, showing the relationship between horsepower and weight, with each car represented as a red, semi-transparent circle. The chart displays axes with gridlines and labels for both variables, plus a title. Built with D3 v5, it uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` to generate ticks, and SVG circles appended to the DOM. The data is loaded via `csv` and parsed, with margins defining the plot area and text elements styled through external CSS.

May 14, 2019

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart ranks the ten most populous countries, with populations derived from the 2018 United Nations World Population Prospects estimate. The chart uses an SVG rendering with d3.scaleLinear for the quantitative x-axis and d3.scaleBand for the categorical y-axis, populated via d3.csv. Axes are generated with d3.axisLeft and d3.axisBottom, while d3.max computes the domain. The data file is loaded asynchronously, with population values converted from thousands to full numbers before rendering.

May 14, 2019

Loading thumbnail…

Customizing Axes

This bar chart visualizes lion populations across seven African countries, with population values from a CSV file and a title indicating the dataset's scope. It demonstrates custom axis styling: the y-axis removes its domain and tick lines, while the x-axis applies a tick format that abbreviates large numbers, using d3.axisBottom, d3.axisLeft, d3.scaleLinear, and d3.scaleBand. The SVG rendering includes a custom axis label and title, with tick text and lines styled via CSS.

May 7, 2019