Anne Lee Steele

@aleesteele·6 public vizzes

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Each circle represents a car, with position mapped by scaled linear axes. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for data points. Grid lines are drawn via axis tick sizing, and axis labels and title are added as SVG text elements.

Oct 26, 2018

Loading thumbnail…

First Custom Axis Barchat

This bar chart displays the number of days for each month of the year, using data derived from a custom CSV file. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and custom axes created via `axisBottom` and `axisLeft`. The x-axis tick labels are formatted using `format('.2s')` to condense large numbers, while grid lines are generated with `tickSize`. The chart styles bars with steelblue fill and includes a labeled axis title for months.

Oct 26, 2018

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. It shows how axis customization highlights data clarity: country names appear on the y-axis, while population values on the x-axis use a custom tick formatter that converts large numbers to abbreviated forms like "B" for billions. Built with D3 v5, the example uses `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `tickFormat`. The chart renders as SVG, with gridlines created via `tickSize` and axis labels styled through CSS classes.

Oct 26, 2018

Loading thumbnail…

First Bar Chart

This example displays the number of days for each month, derived from a CSV file, using horizontal bars where length corresponds to the data value (with days multiplied by 1000). Rendered as SVG via d3.v5, it employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, `axisLeft` and `axisBottom` for grid markings. Data is loaded through `csv()` from the United Nations World Population Prospects 2017 estimate, though the visible dataset is month-based.

Oct 25, 2018

Loading thumbnail…

World Energy Report

This visualization displays basic metadata about a primary energy dataset, showing the total row count, column count, and file size in kilobytes, along with a JSON-formatted preview of the first ten rows. It uses d3.csv to load the data from a remote CSV file and d3.csvFormat to calculate the dataset’s size in kilobytes. The output is rendered in a monospaced pre element with a black background and green text, styled via CSS. The code relies on d3-selection’s select and append methods to build the page content.

Oct 25, 2018

Loading thumbnail…

Hello VizHub!

Hello VizHub! is a minimalist demonstration of D3.js, showing a simple greeting message. The visualization uses `d3.select` to target the `#message` div in the HTML and updates its text content with a string imported from a local ES6 module. The page renders the text at a large scale against a dark background, using the Ubuntu font. The code is structured with separate HTML, JavaScript, and CSS files, with D3 v5 loaded via a CDN.

Oct 25, 2018