Skip to main content
Log in
S

sppcmccoy

@sppcmccoy·11 public vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a sample of cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a car, with its x-position mapped to horsepower and its y-position to weight. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes within an SVG canvas, while the `csv` function loads and parses the tabular data. The chart includes labeled axes and a title, with styling applied via the accompanying CSS file.

May 14, 2019
Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the ten most populous countries in 2018, with data sourced from the United Nations World Population Prospects. It illustrates how to customize D3 axes by removing domain lines, styling tick marks and labels, and adding axis titles. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, including a custom tick format that abbreviates large numbers into billions.

May 14, 2019
Loading thumbnail…

Pokeman

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting species ID against height. Each red circle represents a car, with axes labeled and gridlines drawn using SVG. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data, scale scales, and render axes. Styling for circles, ticks, and labels is set via CSS.

May 14, 2019
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. Red semi-transparent circles represent individual vehicles, with axes labeled accordingly and gridlines drawn from tick marks. The visualization uses D3 v5 APIs including `d3.csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select`. Data is loaded from an external CSV, parsed into numeric values, and rendered as SVG circles within configured margins and scales.

May 14, 2019
Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the ten most populous countries in 2018, with data sourced from the United Nations World Population Prospects. It illustrates how to customize D3 axes by removing domain lines, styling tick marks and labels, and adding axis titles. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, including a custom tick format that abbreviates large numbers into billions.

May 14, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the 2018 populations of the ten most populous countries, with data from the United Nations World Population Prospects 2017. It demonstrates customizing D3 axes: the y-axis removes domain lines and tick marks, while the x-axis uses custom number formatting to abbreviate large values (e.g., converting "G" to "B"), adds grid lines, and labels the axis with a styled text element. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, rendering as SVG.

May 7, 2019
Loading thumbnail…

Customizing Axes

This bar chart shows the top 10 highest income tax states, using population values as a proxy for tax-percent of income, with data from the 2018 United Nations World Population Prospects estimate. The visualization emphasizes customization of D3 axes: a linear x-axis formats tick labels using `format('.3s')` to abbreviate numbers like billions, and the y-axis removes its domain and tick lines for a cleaner look. The code uses `d3.scaleLinear`, `d3.scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendered via D3 v5, pulling data from a local CSV file.

May 7, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the 2018 populations of the ten most populous countries, with data from the United Nations World Population Prospects 2017. It demonstrates customizing D3 axes: the y-axis removes domain lines and tick marks, while the x-axis uses custom number formatting to abbreviate large values (e.g., converting "G" to "B"), adds grid lines, and labels the axis with a styled text element. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, rendering as SVG.

May 7, 2019
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. It showcases D3 axis customization, including formatted tick labels that convert values to billions, custom tick sizes, and a labeled x-axis. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format` from D3 v5, rendering an SVG with styled text and gridlines. The visualization is a refined follow-up to a basic bar chart tutorial.

May 7, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the 2018 populations of the ten most populous countries, with data from the United Nations World Population Prospects 2017. It demonstrates customizing D3 axes: the y-axis removes domain lines and tick marks, while the x-axis uses custom number formatting to abbreviate large values (e.g., converting "G" to "B"), adds grid lines, and labels the axis with a styled text element. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, rendering as SVG.

May 7, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the 2018 populations of the ten most populous countries, with data from the United Nations World Population Prospects 2017. It demonstrates customizing D3 axes: the y-axis removes domain lines and tick marks, while the x-axis uses custom number formatting to abbreviate large values (e.g., converting "G" to "B"), adds grid lines, and labels the axis with a styled text element. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, rendering as SVG.

May 7, 2019