J

julesgentry

@julesgentry·28 public vizzes

Loading thumbnail…

Recoveries - Global Covid

This chart compares global COVID-19 death totals and recoveries over time using a red line for deaths and a thicker black line for recoveries on a log-scaled y-axis. It renders as an SVG with React, drawing axes via `d3.axisBottom` and `d3.axisLeft`, and generating path data with `d3.line`. Data comes from the Johns Hopkins COVID-19 time series CSV, fetched with `d3.csv` and parsed using `d3.timeParse`. Grid lines and a marker highlight the five-million recovery milestone.

Loading thumbnail…

VizHub User Count Over Time

A line graph tracks the cumulative number of unique logged-in VizHub users from August 2018 to May 2022, with dots marking each recorded total and annotated callouts highlighting growth events like a Medium post and the VizHub 2.0 Kickstarter. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to draw the path, while d3-svg-annotation adds the notes. Data comes from a CSV file with dates and user counts, rendered as SVG in a responsive viewport.

Loading thumbnail…

Deaths - Global Covid

This line chart shows the global cumulative death toll from COVID-19 over time, plotted as a single black line on a log-scale y-axis. The visualization uses React with D3 v5, employing `scaleTime` for the x-axis and `scaleLog` for the y-axis, with grid lines from `axisBottom` and `axisLeft`. Data comes from the Johns Hopkins Coronavirus dataset, processed via CSV parsing to aggregate daily death totals by summing across all countries.

Loading thumbnail…

Global Coronavirus Deaths Log Graph by Country

A log-scaled line chart tracks cumulative COVID-19 deaths over time for each country, with all curves drawn in black against a grid. The visualization uses React with D3 v5’s `scaleLog`, `scaleTime`, and `line` generator to render SVG paths, pulling data from the Johns Hopkins CSSE time-series dataset. Axes are built via `axisBottom` and `axisLeft`, and the chart covers the global pandemic timeline up to the most recent date in the data.

Loading thumbnail…

Global Coronavirus Deaths Full Linear Graph

This line chart visualizes global COVID-19 death totals over time, using a linear scale to show cumulative deaths from the Johns Hopkins dataset. The SVG rendering is built with React and D3 v5, utilizing `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path. It includes labeled marker lines for the five-million milestone and interactive axis tick marks generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Global Coronavirus Deaths Graph

A line chart tracks global cumulative COVID-19 deaths over time, using a black path for the trend and gray gridlines. A horizontal marker highlights the 5 million death milestone, while a vertical marker at the most recent date labels the final data point. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `line` to map the data from a CSSE time-series CSV, rendered as SVG.

Loading thumbnail…

Missing Migrants Scatterplot

This interactive visualization displays monthly counts of dead and missing migrants, aggregated from a CSV dataset of global incidents. The chart uses a scatterplot with time on the x-axis and death tolls on the y-axis, rendered as SVG bars via React. Built with d3.v5, it employs `scaleTime`, `scaleLinear`, and the `bin` histogram API with `timeMonths` thresholds to group data, while `sum` calculates monthly totals. Axes are custom components using React functional components, and hover tooltips reveal exact values through SVG `<title>` elements.

Loading thumbnail…

Smiley Pts 1-6

A smiling face rendered with SVG shapes and React components. The face is composed of a white circular background with a black stroke, two eyes, a rectangular nose, and a curved mouth created using the d3 `arc` function for the path. The code defines separate React components for each facial feature, such as `BackgroundCircle`, `Eyes`, and `Mouth`, which are composed within a `FaceContainer` that sets up the SVG canvas and translates the drawing to the center. Parameters like eye offset, radius, and stroke width are passed as props to control the face’s appearance.

Loading thumbnail…

Coronavirus Global Death Data

This example displays the global death toll from the COVID-19 pandemic, summing the latest date column from the Johns Hopkins University time-series dataset. A large, plain-text message presents the total number of deaths and the corresponding date. The program uses the `d3.csv` function to fetch and parse the remote CSV file, then applies JavaScript’s `reduce` method to aggregate the numeric values from the final column. The result is formatted with `d3.format` and rendered into an HTML `<pre>` element.

Loading thumbnail…

Choropleth - HIV/AIDS Data

This choropleth visualizes the global share of the population aged 15–49 infected with HIV/AIDS in 2017, using a sequential yellow-orange-red color scale to encode prevalence values. The map is rendered as an SVG with React, leveraging d3.geoNaturalEarth1 and d3.geoPath to project world countries from TopoJSON, while country codes are matched via an ISO-3166 CSV. Countries without data appear in light gray, with graticules and interior borders overlaid for spatial reference.

Loading thumbnail…

Missing Migrants Log Plot

A scatter plot of the Missing Migrants Dataset shows each recorded event as a circle, with the reported date on the x-axis and the total dead and missing on a logarithmic y-axis. The visualization uses React with D3 v5 scales, including `scaleTime` and `scaleLog`, to position marks rendered as SVG circles. Axis components are built with reusable functions, and the data is loaded via D3's `csv` parser from a GitHub gist URL.

Loading thumbnail…

Multiple Views - Migrant Data

This example combines a world map and a time-series histogram to visualize migrant deaths and missing persons. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath`, with circle sizes scaled by the square root of fatalities, while the histogram bins monthly totals. A brush on the histogram filters the map’s circles interactively. Data comes from a CSV of Missing Migrants records, and rendering uses React with SVG and D3 v5 scales, axes, and the `brushX` API.

Loading thumbnail…

World Atlas - Migrant Data

This visualization displays migrant deaths and missing persons across the world using a natural Earth projection. The SVG map renders country boundaries and graticules via d3.geoPath and geoGraticule, with semi-transparent circles sized by d3.scaleSqrt based on the "Total Dead and Missing" count. Circle positions derive from the "Location Coordinates" field in the Missing Migrants dataset. Data loads via d3.csv, while country polygons come from a TopoJSON world atlas, processed with the feature and mesh functions from topojson.

Loading thumbnail…

World Atlas with Points

This example displays a world map using a natural Earth projection, with graticules and country boundaries rendered as SVG paths. City populations are shown as semi-transparent circles scaled by the square root of their population, creating a proportional symbol map. The visualization uses React with D3.js v5, employing `geoNaturalEarth1` and `geoPath` for the map projection, while city data is loaded from a CSV file.

Loading thumbnail…

Flower Data Scatterplot

This scatterplot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control the x- and y-axes. Points are colored by species, and hovering over the color legend highlights only that species while dimming the rest. Built with React and D3 v5, the visualization uses SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading.

Loading thumbnail…

Menus with React

This example shows a React component for selecting a pet from a dropdown menu, with the chosen value logged to the console. It uses React’s `useState` hook to manage the selected option and a reusable `Dropdown` component that renders a native HTML `<select>` element. The dropdown maps over an array of pet objects, setting the `selected` attribute based on the current state value, and calls `onSelectedValueChange` on user input to update that state. The app is rendered into the DOM with `ReactDOM.render`.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React” inside a web page. It uses React 16.9 and ReactDOM to mount a single functional component into a root `<div>` element. The rendering approach relies on `ReactDOM.render()` with a JSX component, while the HTML file loads the React libraries from a CDN and references a compiled `bundle.js`. No data source or visualization is present beyond the static text output.

Loading thumbnail…

World Atlas

This visualization displays a world map using the Natural Earth projection, with country boundaries rendered in muted tones over a light graticule grid and sphere background. The code loads country topology data from the world-atlas npm package and converts it using topojson’s `feature` and `mesh` functions. React manages the component state and rendering, while d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs generate the projected SVG paths for countries, interiors, and graticules.

Loading thumbnail…

City Temperatures - Line Chart

This line chart visualizes weekly temperature fluctuations for a city, using a smooth natural curve to connect data points across time. The SVG rendering, built with React and D3 v5, employs `scaleTime` and `scaleLinear` to map timestamps and temperature values, with individual temperature readings highlighted as orange circles. The chart includes labeled axes for time and temperature, and the data is loaded from a CSV file using D3’s `csv` parser. D3’s `line` generator with `curveNatural` creates the fluid path, while custom `AxisBottom` and `AxisLeft` components render the tick marks and labels.

Loading thumbnail…

Iris Dataset - Scatterplot

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width with 150 data points rendered as orange circles. The visualization uses React to manage the component state and D3 v5 scales to map the continuous measurements to SVG coordinates. Each point includes a native SVG `<title>` element for tooltips, while custom axis components generate ticks and gridlines. The data loads asynchronously from a remote CSV file using `d3.csv`, with numeric parsing applied to all four measurement columns.

Loading thumbnail…

CSV Data Pt 5 - Radial Data

This radial visualization displays CSS color names loaded from a CSV file, with each color represented as a wedge in a circular pie chart. The chart uses React state to manage asynchronous data loading via `d3.csv`, while `d3.pie()` and `d3.arc()` compute the angular layout and SVG path geometry. Each wedge is filled with the hex value from the dataset, positioned around the center of an SVG canvas. The visualization highlights the full spectrum of named CSS colors in a compact, radial format.

Loading thumbnail…

CSV Data Pt 6 - Graphing

This example presents a horizontal bar chart ranking the ten most populous countries, with bars extending to represent each nation’s 2019 population. The visualization loads CSV data via D3’s `csv` function, processes it in a custom `useData` hook, and renders the chart with React. The code uses `scaleBand` for the categorical country axis, `scaleLinear` for the numeric population axis, and custom React components for the axes and rectangular marks. An SVG rendering approach with D3’s `format` API converts large numbers into abbreviated labels like “1.2B”.

Loading thumbnail…

CSV Data Pt 4 - Rendering

This example loads CSS color names from a CSV file using the `d3.csv` utility and uses React state to render each row as a horizontal div strip. The `useEffect` hook fetches the data, while `useState` stores it, and the rendered output maps each color entry to a div with a background color and 4-pixel height. The visualization uses inline styles for the SVG-based divs, displaying a stacked bar-like color palette.

Loading thumbnail…

Vega-Lite API Template

This example visualizes the top five religious affiliations by population for each country, using a bar chart where bars are colored by religion and sorted by total population. Built with the Vega-Lite API, it composes a specification programmatically via `vl.markBar()`, `encode()`, and field accessors, then renders it to SVG through Vega-Lite and Vega. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styles and tooltips via the `vega-tooltip` Handler.

Loading thumbnail…

CSV Data Pt 3 - React

This example displays text describing a dataset loaded from a CSV file, showing its size in kilobytes, row count, and column count. It uses React’s `useState` and `useEffect` hooks to fetch and store the data, while D3’s `csv` utility retrieves the remote CSV file. ReactDOM then renders the resulting message, which is generated by a custom `message` function that formats the data summary.

Loading thumbnail…

CSV Data Pt 1 - Loading and Parsing

This example demonstrates the initial step of working with CSV data by loading a remote file and outputting its raw contents to the browser console. It fetches a plain-text CSV file containing CSS color names from a GitHub gist using the Fetch API, wrapped in an async function called `fetchText`. The program then calls `console.log(text)` to display the parsed response, showing the data before any visualization or transformation occurs. The code includes a commented-out alternative using chained `.then()` promises, illustrating both fetch patterns for handling asynchronous text responses.

Loading thumbnail…

CSV Data Pt 2 - Summarizing

This example summarizes a remote CSV file of CSS color names by displaying its size, row count, and column count as large text. It loads the data with `d3.csv`, then uses `d3.csvFormat` to measure the formatted string’s length in kilobytes, and reports `data.length` and `data.columns.length`. The code also includes commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse`. The output appears in a `<pre>` element, emphasizing raw text over graphical representation.

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor inside an SVG canvas, updating its position in real time to mirror the pointer’s coordinates. The example demonstrates React’s `useState` and `useCallback` hooks to manage the cursor’s x and y values, while the `onMouseMove` event on the SVG element triggers the state update. Rendered using React DOM with D3 v5, the circle’s radius is fixed at 30 pixels, and its center is bound to the tracked mouse position.