Skip to main content
Log in
M

margaretgoode

@margaretgoode·13 public vizzes

Loading thumbnail…

Pokemon Plot

This scatter plot displays the relationship between base experience and weight for Pokemon species, using a logarithmic y-axis to accommodate the wide range of weights. The visualization encodes each Pokemon as a semi-transparent red circle, with axes labeled and a title indicating the dataset. The code uses D3 v5 functions such as `scaleLinear`, `scaleLog`, `axisBottom`, and `axisLeft` to construct the chart, and loads data from a CSV file hosted on VizHub.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository’s Auto MPG data set. Red, semi-transparent circles represent individual vehicles, with axis labels and a title clarifying the variables. The code uses D3 v5’s `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions to load data, scale values, and render SVG axes and circles. Gridlines are drawn using tick sizes that span the plot’s inner dimensions.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. A red semi-transparent circle represents each car, plotted using d3.scaleLinear for both axes, with axis labels and a title rendered via SVG text elements. The code loads CSV data with d3.csv, parses numeric fields, and uses d3.axisLeft and d3.axisBottom to draw gridlines and ticks. The visualization emphasizes correlation patterns, with styling applied through external CSS.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository’s Auto MPG data set. Red, semi-transparent circles represent individual vehicles, with axis labels and a title clarifying the variables. The code uses D3 v5’s `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions to load data, scale values, and render SVG axes and circles. Gridlines are drawn using tick sizes that span the plot’s inner dimensions.

May 14, 2019
Loading thumbnail…

10 largest cities in the world

This bar chart displays the populations of the ten largest cities in the world in 2018, using data from World Atlas. The bars are sorted by country name, with population values formatted in billions using d3.format. Built with D3 v5, the visualization uses scaleLinear and scaleBand for axes, axisLeft and axisBottom for ticks, and SVG rendering. A horizontal gridline pattern is created via tickSize on the x-axis, while the chart’s title and axis label are added as SVG text elements.

May 14, 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 population values formatted in billions. It demonstrates customization of D3 axes, including a formatted x-axis tick label that replaces 'G' with 'B', removal of domain lines, and styled tick lines. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft for axes, rendered as SVG.

May 13, 2019
Loading thumbnail…

Top 3 Largest Cities

A horizontal bar chart displays the population of the top three largest cities—Shanghai, Mumbai, and Sao Paulo—based on 2018 data from the United Nations World Population Prospects. The visualization renders as SVG, using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population counts to bar widths and country names to vertical bands. Data is loaded from a CSV file via `d3.csv`, with values parsed as numbers. Green rectangles encode each city’s population, and axes are labeled with default text formatting.

May 13, 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 population values formatted in billions. It demonstrates customization of D3 axes, including a formatted x-axis tick label that replaces 'G' with 'B', removal of domain lines, and styled tick lines. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft for axes, rendered as SVG.

May 13, 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 population values formatted in billions. It demonstrates customization of D3 axes, including a formatted x-axis tick label that replaces 'G' with 'B', removal of domain lines, and styled tick lines. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft for axes, rendered as SVG.

May 13, 2019
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of lion populations in various African countries, with the y-axis listing country names and the x-axis representing population. The chart uses custom tick formatting via `d3.format` with a `.3s` specifier, and the `d3.axisBottom` and `d3.axisLeft` functions for axis generation. Rendered as SVG, it loads data from a local CSV file, and styling is applied through CSS classes like `.tick text` and `.axis-label`, demonstrating how to customize axes with D3 v5.

May 13, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position bars. The code implements axes with `axisLeft` and `axisBottom`, and loads data from a CSV file via `d3.csv`. Rectangles are appended to an SVG group using a margin convention, with populations converted from thousands to absolute numbers.

May 13, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position bars. The code implements axes with `axisLeft` and `axisBottom`, and loads data from a CSV file via `d3.csv`. Rectangles are appended to an SVG group using a margin convention, with populations converted from thousands to absolute numbers.

May 7, 2019
Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart of the populations of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to load a CSV file with `d3.csv`, then scales the data with `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Axes are generated with `axisLeft` and `axisBottom`, while bars are appended as SVG `rect` elements. Population values are multiplied by 1,000 before rendering.

May 7, 2019