Jacob Potvin

@jpotvin-ezpz·13 public vizzes

World Map

This example renders a world map using country boundaries and land masses from the World Atlas TopoJSON dataset. The visualization displays geographic features with graticules for visual reference, polished with a clean aesthetic. Built with React, it loads data via `d3.json` and processes the TopoJSON topology using `feature` and `mesh` from the `topojson` library. The map is drawn with `d3.geoPath`, while the code structure separates data handling in `useData.js` and visual rendering in `Marks.js`.

May 26, 2021

Loading thumbnail…

Refactoring a Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using population data from the United Nations World Population Prospects 2019. The React app loads the CSV with d3.csv and renders bars with SVG rect elements, scaling positions with d3.scaleBand and d3.scaleLinear. It also generates rudimentary axis ticks via d3.scaleLinear’s ticks method, despite lacking full axis labels or gridlines.

May 26, 2021

Loading thumbnail…

The Margin Convention

This example uses React and D3 v5 to render a bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The chart deliberately omits axes and scales, displaying only bars whose lengths encode population values, while the margin constraints define the plotting area. Using `d3.csv` to load data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis, the SVG output calculates bar widths against a fixed inner width. The code also renders tick lines and labels for the x-axis, but no axis lines or y-axis tick marks, highlighting the conventional margin structure without full annotation.

May 25, 2021

Loading thumbnail…

Scatter Plot, single js file

This scatter plot visualizes the populations of the top 10 most populous countries, with each circle’s x-position corresponding to population (in thousands) and y-position to country name. It uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to create and label the axes, while a linear scale maps population values. Data comes from the 2018 United Nations World Population Prospects. The SVG rendering applies custom tick styling, removes axis domains, and adds a title and axis label.

May 25, 2021

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over time from a week in San Francisco, using a clean Poppins font and a teal color scheme. Built with React and rendered as SVG, the chart employs D3 v5's `scaleTime` and `scaleLinear` for axis scaling, `line()` for the path, and custom `AxisBottom` and `AxisLeft` components to generate tick marks. Each data point is highlighted with a circle that displays a tooltip on hover, and the data comes from a CSV file fetched via D3's `csv` function.

May 25, 2021

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width for individual flowers. The visualization uses React and d3.v5, with scales created via `scaleLinear` and axes rendered as custom SVG components. Circles mark each data point, with native SVG `<title>` elements providing hover tooltips. The code uses `csv` from d3 to load data from a GitHub-hosted CSV file, and includes styling with Poppins fonts and custom tick formatting.

May 25, 2021

Loading thumbnail…

Cars Scatterplot

This scatterplot visualizes the relationship between engine displacement and fuel efficiency for various car models, with each circle representing an individual vehicle. The D3 v5 code uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, along with `d3.axisBottom` and `d3.axisLeft` to render the axes. The data is loaded from a CSV file (auto-mpg.csv) sourced from the UCI Machine Learning Repository, and the circles are styled with a steelblue fill and opacity. The chart also includes custom axis labels and formatting.

May 25, 2021

Loading thumbnail…

Scatter Plot

This example displays the top 10 most populous countries as a scatter plot, with each circle representing a country and its size encoded by population. The visualization uses React and D3 v5, with `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG circles rendered from the United Nations World Population Prospects 2019 dataset. Axis labels and tick formatting are handled by custom components, while tooltips via `<title>` elements show population values in billions.

May 25, 2021

Loading thumbnail…

Bar Chart with React & D3

This bar chart displays the projected 2020 population for each country from the UN Population 2019 dataset. The chart is rendered as an SVG using React to map data to rectangles, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code uses React’s `useState` and `useEffect` to fetch and parse the CSV via D3’s `csv` function. The bars are styled with a blue fill via the CSS class `bar`.

May 21, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading and parsing CSV data, displaying a summary of the remote file’s contents. It fetches a gist containing CSS named colors, then uses `d3.csvParse` to convert the raw text into an array of objects. The page prints the file size in kilobytes, the number of rows, and the count of columns in a large `<pre>` element. The implementation relies on the Fetch API and D3 v6’s `csvParse`.

May 20, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a single gray circle centered in an SVG canvas, with no interactive behavior beyond its static position. The circle is rendered using React’s JSX syntax inside an `<svg>` element, with dimensions fixed at 960 by 500 pixels. The code imports React and ReactDOM to mount the component, and loads D3 v5 as a dependency, though it does not use any D3 functions. The rendering approach relies on declarative React state and SVG primitives, with the circle’s center coordinates and radius defined as constants.

May 20, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of eighteen randomly generated smiley faces demonstrates the reusability of React components for data-driven SVG composition. Each face uses `d3.arc` to construct a smiling mouth, while circle elements form the eyes and face outline, with randomized parameters for eye offset, radius, stroke width, and mouth dimensions. The code builds reusable `Face`, `BackgroundCircle`, `Eye`, and `Mouth` components within an SVG container, iterating over values from `d3.range` to render multiple variations simultaneously.

May 20, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a yellow circle with two smaller black circles positioned to resemble a face. The visualization is rendered as static SVG elements, including a main circle and two offset circles, all defined directly in the HTML markup. The page uses plain CSS for layout and a JavaScript console log statement for debugging. The SVG coordinate system and circle attributes such as radius and fill color are used to construct the simple graphic.

May 12, 2021