nshedd

@nshedd·6 public vizzes

Fork of Cars Scatter Plot

A scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset, with each red semi-transparent circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the data and render SVG axes with gridlines, while circles are appended via a data join. Labels and a title are added as SVG text elements, with styling defined in an external stylesheet.

Feb 8, 2021

Loading thumbnail…

Making a Bar Chart

A scatter plot displays the relationship between vehicle weight and fuel efficiency (MPG) for cars from the 1970s, with each circle’s size proportional to weight. Using d3.csv to load the data, d3.scaleLinear maps the x- and y-domains, while d3.axisBottom and d3.axisLeft render gridlines and ticks. The SVG circles are appended via data joins, and margins define the plotting area.

Feb 8, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face whose eyebrows animate up and down. The code uses d3.select, d3.append, and d3.attr to construct SVG shapes including circles, rectangles, and an arc-based mouth. A d3.transition with a 2000-millisecond duration cycles the eyebrow group’s translate transform between two vertical positions, creating a looping motion. The page loads d3.v5 from a CDN and renders entirely in SVG with no external data source.

Jan 29, 2021

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. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with custom tick formatting that converts values to abbreviated labels like "B" for billions. The code customizes D3 axes by removing default domain lines, adding gridlines via tickSize, and styling axis labels, while the data is loaded from a CSV file and rendered as SVG rectangles.

Aug 31, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart shows the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The code uses d3.csv to load the data, then renders SVG rectangles scaled with d3.scaleLinear and d3.scaleBand. It customizes the axes by calling d3.axisLeft and d3.axisBottom, and applies a fixed margin layout with a steelblue fill for the bars.

Aug 31, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Aug 31, 2020