Skip to main content
Log in
S

Shawn Kearney

@shawnpk·10 public vizzes

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth from 1950 to 2015, using a smooth curve to show the dramatic increase over time. The visualization uses D3.js version 5, with the `d3.area` generator and `d3.curveBasis` for the smoothed path, along with `d3.scaleTime` and `d3.scaleLinear` for the axes. The chart is rendered as an SVG, with gridlines and axis labels styled via CSS. Population data is loaded from a CSV file hosted on VizHub, formatted with a custom tick formatter that converts billions to "B".

Jan 6, 2020
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays one week of temperature data in San Francisco, rendered as a smooth filled curve against time. The visualization loads CSV data from the Data Canvas project and uses d3.scaleTime, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to construct and label the axes. The area generator, d3.area with curveBasis, creates the filled path, while SVG elements handle the rendering. Grid lines and axis labels aid readability, and the chart includes a title and descriptive axis text.

Jan 5, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with the x-axis representing time and the y-axis representing temperature in Celsius. The chart includes labeled axes, a title, and a smoothed line path using the `curveBasis` interpolation. The visualization is built with D3 v5, using `select`, `csv`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` APIs, and renders as an SVG. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures as numbers. The chart features styled grid lines, tick labels, and a maroon line with a thick stroke.

Jan 5, 2020
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to coordinates, with d3.axisBottom and d3.axisLeft generating the labeled axes. Data is loaded via d3.csv and parsed into Date and numeric objects, then plotted as individual circles. The chart includes gridlines, axis labels, and a title, all styled through CSS.

Jan 5, 2020
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. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for labeled tick marks, and `extent` to set the domains. Red semi-transparent circles represent individual data points, while axis labels and a title annotate the chart. The code loads data via `csv` and converts string values to numbers before rendering.

Jan 5, 2020
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, using 2019 estimates from the United Nations. The chart uses d3.csv to load the data and d3.scaleLinear for the population axis, with d3.scalePoint for the categorical country positions. Circles are rendered via SVG, with d3.axisLeft and d3.axisBottom providing grid lines and tick labels formatted using d3.format. The visualization emphasizes ranking through a vertical layout, with a title and axis labels styled via CSS.

Jan 5, 2020
Loading thumbnail…

Customizing Axes

This bar chart ranks the top 10 most populous countries using 2019 United Nations estimates, with population values multiplied by 1,000 to reflect raw counts. It demonstrates custom axis styling in D3 v5: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick formatter (d3.format) to abbreviate large numbers as billions and draws gridlines via negative tick sizes. SVG text elements receive explicit font sizes and colors to create a distinct visual hierarchy, including a large "Population" axis label and a descriptive title.

Jan 5, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries, using 2019 estimates from the United Nations World Population Prospectus. The chart displays population on a linear scale along the x-axis and country names on a band scale along the y-axis, with each bar colored steel blue. Built with D3 v5, it uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for labeled axes. The SVG rendering includes margin-based layout and implied padding between bars.

Jan 5, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn in SVG using D3.js v5. The eyebrows animate upward and back down over two seconds via chained `transition()` calls with `duration(2000)`. The code uses `d3.select`, `d3.arc`, and attribute manipulation to construct the face, with coordinates centered on an SVG canvas.

Jan 4, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG scene with inline styling and cascading style sheets. The visualization shows how SVG primitives combine with CSS classes to control appearance, such as setting fill colors, stroke widths, and line joins. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with transformations applied via the SVG `transform` attribute. CSS rules in `styles.css` style the `.lines` group and its path, demonstrating separation of structure and presentation.

Jan 4, 2020