Brian Gilmore

@B-swagG·8 public vizzes

Area Chart Covid19 Data

An area chart displays cumulative COVID-19 cases in the US over time, with a red fill and stroke over a darkred area. The data comes from the New York Times covid-19-data GitHub repository via `d3.csv`. The visualization uses D3 v6 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` to construct the path. SVG rendering occurs within an HTML canvas, with labeled axes and a title. The chart fills the browser window, adapting to its dimensions dynamically.

Mar 23, 2023

Loading thumbnail…

Line Chart Covid19 Data

This line chart displays cumulative COVID-19 cases in the United States over time, using data from the New York Times GitHub repository. The visualization plots dates on the x-axis and case counts on the y-axis, with a thick red line connecting data points. It is built with D3.js v6, using `d3.csv` for data loading, `d3.timeParse` for date formatting, and `d3.scaleTime` and `d3.scaleLinear` for the axes. The line is rendered as an SVG path via `d3.line`, with axis labels and a title added as SVG text elements.

Mar 23, 2023

Loading thumbnail…

Fork of Penguin Dataset Scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for penguins, with each circle colored by species. It uses d3.csv to load a clean penguin dataset, d3.scaleLinear for axes, and d3.axisLeft/axisBottom to render ticks. SVG circles are positioned via scale mappings, with fill colors assigned by species. The plot includes axis labels and a title, rendered with the d3 v5 API in an SVG container sized to the window.

Mar 23, 2023

Loading thumbnail…

Pie Chart Housing Data

This pie chart visualizes the distribution of median housing prices across eight income brackets, ranging from under $82,000 to $442,000 or more. Each slice represents a price range, with its size proportional to the number of homes in that category. The visualization uses d3.pie() and d3.arc() to generate the chart, while d3.scaleOrdinal with a custom color range distinguishes the segments. A legend with colored squares and labels is added using SVG rect and text elements, and the data is embedded directly as a JavaScript object rather than loaded from an external file.

Mar 23, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot - ICE7

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis, with each of the three species distinguished by a unique SVG symbol. The code uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a CSV via `d3.csv`, and the reusable `scatterPlot` module handles margin configuration and dynamic sizing to fill the browser window.

Mar 22, 2023

Loading thumbnail…

ICE-6: React & D3

This interactive bar chart visualizes the median housing age across California, segmented by latitude for the top fifteen regions. Built with React and D3 v7, the React app loads CSV data from a GitHub gist and renders an SVG visualization. D3's `scaleBand` and `scaleLinear` axes plot the data, with red tick marks and value labels. The chart’s bars are drawn as SVG rectangles within a transformed group, demonstrating a direct React-D3 integration for data-driven layouts.

Mar 11, 2023

Loading thumbnail…

ICE5

This example presents metadata about a California housing dataset, displaying the file size, row count, and column count in a styled web page. It uses D3 v7’s `d3.csv` and `d3.csvFormat` to load and analyze a CSV file from a GitHub gist, then updates a `<pre>` element via `textContent`. The page is styled with custom CSS, including a background SVG, and includes a clickable link to the raw dataset. It demonstrates basic data loading and descriptive statistics without any charts or visualizations.

Mar 3, 2023

Loading thumbnail…

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

This interactive D3.js example builds a stylized smiley face entirely from SVG shapes, including circular eyes, a path-based mouth, and rectangular teeth. An animated sequence moves the eyebrows up and down by chaining two `transition().duration(2000)` calls, demonstrating how to create simple motion via DOM attribute transforms. The code uses `d3.select` and `d3.arc` from the D3 v5 API to construct the face's components, with all geometry centered through a single transformed group. The result shows how D3's declarative SVG manipulation can produce playful, character-driven visualizations.

Feb 24, 2023