J

Jean David

@jdavid54·49 public vizzes

Loading thumbnail…

Making chloropleth map with HIV dataset

This interactive chloropleth map visualizes HIV prevalence by country for the year 2017, using a sequential color scale to represent the percentage of the population infected. Users can select a year via a brushed time series histogram, which filters the map’s data accordingly. Built with React and D3 v5, the visualization employs d3.geoPath and d3.geoNaturalEarth1 for map projection, d3.scaleSequential with interpolateYlOrRd for coloring, and d3.brushX for the interactive time selection. Data comes from the IHME HIV prevalence dataset, joined to country shapes using ISO country codes.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants dataset, with each circle representing a single event and its position encoding the reported date on the x-axis and the total dead and missing on the y-axis. The y-axis uses a logarithmic scale (`d3.scaleLog`) to accommodate the wide range of values, while the x-axis uses a time scale (`d3.scaleTime`). The visualization is rendered as an SVG using React, with custom components for the axes and marks. Hovering over a circle displays the exact date via a `<title>` tooltip, and the data is loaded asynchronously using `d3.csv`.

Loading thumbnail…

Fork of HIV prevalence

This line chart displays the percentage of the population aged 15-49 infected with HIV over time, with a horizontal marker line at the 10,000% level and a vertical marker at the most recent year. Using React and D3 v5, the chart employs `scaleTime` and `scaleLinear` for axes, `d3.line` for the path, and custom `XMarkerLine` and `YMarkerLine` components for annotations. Data comes from the IHME HIV prevalence dataset loaded via `d3.csv`. The SVG rendering includes gridlines from `axisBottom` and a highlighted final date label.

Loading thumbnail…

Fork of Global Coronavirus Deaths

This chart displays the cumulative global death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A black line traces the rising count, with a horizontal dashed marker highlighting the 10,000-death threshold and a vertical marker at the most recent date. Built with React, the visualization uses D3 v5 scales, line generator, and axes to render an SVG. The line chart is redrawn in fullscreen, with gridlines and labeled markers for reading key values.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map of migrant deaths with a time-series histogram, linked through brushable selection. Users can brush a date range in the histogram to filter the map’s proportional circles, which represent monthly totals of dead and missing migrants. The map uses `geoNaturalEarth1` and `geoPath` from d3, while the histogram employs `scaleTime`, `brushX`, and `bin` for aggregation. City and country boundary data come from World Atlas TopoJSON and Simplemaps subsets, rendered as SVG within a React framework.

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000, sized proportionally to their population using a square root scale. The visualization renders a natural Earth projection with graticules, landmasses, and country borders in light gray tones. React manages the component structure while D3 v5 handles geographic projection via `geoNaturalEarth1`, path generation with `geoPath`, and CSV data loading from the Simplemaps World Cities Database. Semi-transparent teal circles overlay each city location, with their radii scaled to population values.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot of the Iris Dataset shows how hovering over a color legend highlights individual species and fades the others. Built with React and D3 v5, it renders SVG circles for each flower. The color legend uses an ordinal scale, and hover events trigger opacity changes to emphasize the selected species, demonstrating a reusable pattern for coordinated highlights across linked visualizations.

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.extent to set the domains. The SVG rendering includes custom AxisBottom and AxisLeft components that generate tick marks and labels, while Marks renders circles with native SVG tooltips via the title element. Axis labels are oriented vertically and horizontally, with styling defined by the Poppins font and muted color palette.

Loading thumbnail…

Stylized Bar chart (CSS)

A stylized horizontal bar chart displays the top 15 countries by projected 2020 population from the UN World Population Prospects 2019 dataset. The chart uses a teal fill for bars, with CSS-styled axes and gridlines, and labels populations in billions with an "B" suffix. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders as SVG. Tooltips appear on hover via native SVG `title` elements, while axis components generate ticks and text elements programmatically.

Loading thumbnail…

Fork of reformat Bar chart (access data)

This example presents a horizontal bar chart of the top 15 countries by 2020 population, sourced from the United Nations World Population Prospects 2019. A React component renders SVG rectangles for each bar, using D3’s `scaleBand` and `scaleLinear` for the y- and x-axes, respectively. The chart includes labeled axes generated by custom `AxisBottom` and `AxisLeft` components, with tick marks and text positioned via D3’s scale methods.

Loading thumbnail…

Fork of reformat Bar chart with axis with ticks

A React-based bar chart displays United Nations population projections for 2020 across 15 countries, using an SVG rendering with D3 v5 scales. The visualization pairs a linear x-axis from `d3.scaleLinear` with tick marks generated by `xScale.ticks()`, and a band y-axis from `d3.scaleBand` labeling countries. The `AxisBottom` and `AxisLeft` components render grid lines and text labels, while `Marks` draws the proportional rectangles. Data loads asynchronously from a CSV using `d3.csv`.

Loading thumbnail…

Bar chart with axis with ticks

This example displays a horizontal bar chart ranking the 15 most populous countries by their projected 2020 population from the United Nations World Population Prospects 2019 dataset. The chart includes a linear x-axis with tick marks and labels generated using `xScale.ticks()`, alongside a categorical y-axis listing country names via `yScale.domain()`. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for positioning, rendering SVG rectangles for bars and text elements for axis labels within a margin-defined layout.

Loading thumbnail…

Fork bar chart with axis

This fork bar chart displays population data for 15 countries from the United Nations World Population Prospects 2019, using horizontal bars ranked by value against a linear scale. The visualization is built with React and d3-v5, leveraging `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG rectangles to encode population sizes. Data is loaded via d3’s `csv` method, and the chart includes a loading state rendered as text before the data arrives.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bare bar chart with no axes or labels, rendered as SVG rectangles. The React component fetches United Nations World Population Prospects 2019 data via d3.csv, then uses d3.scaleBand for the y-axis positioning and d3.scaleLinear with d3.max to map population values to bar widths. The visualization relies on React hooks—useState and useEffect—to load and slice the data, while d3.v5 and React 16.9 render the chart through ReactDOM.

Loading thumbnail…

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, with population values from the United Nations World Population Prospects 2019 dataset. The chart includes labeled axes: the y-axis shows country names using a band scale, while the x-axis shows population ticks with grid lines. Built with React hooks and D3 v5, the code uses `scaleBand`, `scaleLinear`, and `csv` to fetch and scale the data. The bars and axes are rendered as SVG elements, with tick generation handled through `xScale.ticks()`.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious composition of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each bar represents a country, with segments colored by religion and scaled by population. Hovering over a bar segment reveals a tooltip showing the specific religion, country, and population count. Hovering over the color legend highlights the corresponding religion’s segments across all bars while dimming the rest. The d3.svg.axis API provides the axes, while d3.legend.color drives the interactive legend.

Loading thumbnail…

Fork of SVG Animation Playground

This animated SVG playground uses CSS keyframe animations to transform two images, "GETIT" and "RIGHT," along with a title byline within a 3D perspective space. The images fade in, scale, and move toward the viewer while the byline's letters spin on the Y-axis, creating a dynamic cinematic effect. The code relies on CSS `@keyframes` for animations and the `perspective` property for 3D depth, with a starfield background image. The media queries adjust the scale of the entire composition on smaller screens.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the Iris flower dataset, allowing users to compare any two of its four numeric attributes. Dropdown menus control which attribute is mapped to the X and Y axes, with axes and labels updating instantly. The visualization is built using React for the interface and D3.js for data handling, scaling, and SVG rendering. The React code defines custom components for axes, dropdowns, and data points, using D3's `scaleLinear` and `extent` functions to compute the plot's domain.

Loading thumbnail…

Fork of Menus with React

This example demonstrates a dropdown menu for selecting a pet, updating the selected value in real time. It uses React hooks (`useState`) to manage the selection state and a reusable `Dropdown` component built with native HTML `<select>` and `<option>` elements. The menu is rendered via `ReactDOM.render`, with options like dog, cat, and spider. Styling sets large font sizes for labels and selects, while the console logs each selection change.

Loading thumbnail…

Fork of Polished World Map

This visualization displays a world map with country boundaries, rendered as an SVG using the d3.geoPath projection and d3.geoGraticule for graticules. Country shapes are filled in teal, with interiors highlighted in a lighter stroke. The map is built with React, using the d3.json loader to fetch World Atlas TopoJSON data from unpkg. The code leverages the topojson library’s feature and mesh functions to extract land and interior boundaries, and the d3.geoNaturalEarth1 projection defines the map’s spherical look.

Loading thumbnail…

Fork of World Countries Tree

This example displays a hierarchical tree of world countries, organized by region, using a horizontal dendrogram layout. It presents a static snapshot of global geography, with country names rendered as text nodes. The visualization is built with D3 v5, using the `tree` and `hierarchy` layout functions on a JSON data structure, and is rendered as an SVG. Pan and zoom capabilities are implemented using D3’s `zoom` behavior.

Loading thumbnail…

Fork of Coravirus Deaths Over Time by Country by Voronoi

A line chart displays cumulative COVID-19 deaths over time for multiple countries, with each thin gray line representing a country's trajectory. Hovering over any point activates a Voronoi overlay, highlighting the corresponding country's line in blue and displaying a label with its name, death count, and date. The visualization uses React for component structure, D3 v5 scales and line generators, and d3-delaunay's Voronoi diagram for hit-testing. Data comes from the CSSE COVID-19 global time series, rendered as SVG with logarithmic y-axis scaling.

Loading thumbnail…

Fork of Polished World Map

This visualization displays a world map with country boundaries, rendered as an SVG using the d3.geoPath projection and d3.geoGraticule for graticules. Country shapes are filled in teal, with interiors highlighted in a lighter stroke. The map is built with React, using the d3.json loader to fetch World Atlas TopoJSON data from unpkg. The code leverages the topojson library’s feature and mesh functions to extract land and interior boundaries, and the d3.geoNaturalEarth1 projection defines the map’s spherical look.

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.extent to set the domains. The SVG rendering includes custom AxisBottom and AxisLeft components that generate tick marks and labels, while Marks renders circles with native SVG tooltips via the title element. Axis labels are oriented vertically and horizontally, with styling defined by the Poppins font and muted color palette.

Loading thumbnail…

Fork of Stylized Bar Chart

A bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React to render SVG elements, with d3-scale functions `scaleBand` and `scaleLinear` for positioning, and d3-format for tick labels that convert values to billions. The chart includes styled axes, a labeled x-axis, and interactive tooltips using SVG `<title>` elements.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays a bar chart of the top 10 most populous countries, using raw rectangles with no axes or labels. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, sorts the first ten rows, and maps values using `scaleBand` and `scaleLinear`. The visualization renders as SVG, with bar widths proportional to 2020 population estimates, though the geometric primitives are intentionally left bare.

Loading thumbnail…

Fork of Circles on a map

This visualization displays total COVID-19 cases by country as of August 30, 2020, using red circles sized with d3.scaleSqrt and positioned via d3.geoCentroid and d3.geoNaturalEarth1 projection. The map employs d3.geoPath for country outlines and includes interactive zoom via d3.zoom. A color legend and size legend are rendered as SVG components using React, with data loaded from a CSV time series and TopoJSON world atlas. Hovering reveals country names and case counts through SVG title elements.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower. Each dot represents a car, with color encoding the region of origin, size encoding cylinder count, and a tooltip displaying the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and rendered as an SVG via D3. Data loading relies on D3’s `csv` method, while custom axis and label styling are applied through a shared config object.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst of pie slices, with each slice filled by its corresponding RGB hex value. The visualization is rendered in SVG, positioned at the center of the canvas, and uses React to manage state and render the components. The code employs D3 utilities, including `csv` for data loading, `arc` for generating the arc paths, and `pie` for computing the pie slice angles, all within a React application.

Loading thumbnail…

Fork of Loading Data with React & D3

This visualization demonstrates a minimal React and D3 integration that loads a CSV dataset of CSS named colors and displays its summary statistics. The app fetches the data using D3’s `csv` function within a React effect hook, then uses React state to manage the loaded data. Once fetched, the code formats a message with `d3.csvFormat` to report the file size in kilobytes, row count, and column count. During loading, the interface shows a “Loading...” message, and the final output is rendered as large monospace text using React’s `useState` and `useEffect` hooks.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS named colors dataset by displaying its byte count, row count, and column count in large text. It loads the CSV file from a GitHub gist using the `d3.csv` method, which parses the data and exposes its columns. The visualization then reports that the data is about 7 kB, containing 148 rows and 4 columns, rendered inside an HTML `<pre>` element. The code also includes commented-out alternatives using `fetch` and `d3.csvParse`, highlighting different approaches to asynchronous data loading.

Loading thumbnail…

Fork of Mouse Follower

This example uses React and SVG to render a circle that follows the mouse cursor across a 960-by-500 pixel viewport. The circle’s position is updated via React state and the `onMouseMove` event handler, which captures `clientX` and `clientY` coordinates. The SVG viewport lacks a visible background, and the circle maintains a fixed radius of 30 pixels, starting at the center of the screen until the user moves the pointer.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS named colors dataset by displaying its byte count, row count, and column count in large text. It loads the CSV file from a GitHub gist using the `d3.csv` method, which parses the data and exposes its columns. The visualization then reports that the data is about 7 kB, containing 148 rows and 4 columns, rendered inside an HTML `<pre>` element. The code also includes commented-out alternatives using `fetch` and `d3.csvParse`, highlighting different approaches to asynchronous data loading.

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of 18 smiley faces, each rendered with randomized facial features, shows how React components and D3 can generate varied SVG visuals. The faces differ in stroke width, eye offset and radius, and mouth dimensions. Built with React and d3.arc for the mouth path, the code maps over a d3.range array to create each face, using SVG circles and paths within a transformed group.

Loading thumbnail…

Fork of Smiley Face Part V

A smiling face rendered with SVG displays a yellow circle, two eyes, and a curved mouth, all centered on the canvas. The visualization is built with React components, splitting the drawing into separate modules for the background circle, eyes, and mouth. D3's arc generator creates the mouth’s path, while React Fragments group the eye circles. The code uses React and ReactDOM to mount the SVG, with styling applied via inline SVG attributes.

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a smiley face composed of SVG shapes, including a yellow circular face, two eyes, and a curved mouth. The visualization is built as a React component that renders the SVG elements, while D3’s `arc` generator defines the mouth’s path geometry. The code uses React 16.9 and D3 v5, with the face centered on a 960-by-500 canvas and positioned using a translation transform. The drawing is purely programmatic, with no external data source.

Loading thumbnail…

Fork of Smiley Face Part III

This visualization renders a smiley face using React and D3, displaying a yellow circle with black stroke, two eyes, and a curved mouth. The code constructs the SVG elements by leveraging D3’s `arc` function to generate the mouth path, while React manages the component structure and rendering. It uses d3.v5 and React 16.9.0, with all shapes drawn directly in SVG coordinates.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS named colors dataset by displaying its byte count, row count, and column count in large text. It loads the CSV file from a GitHub gist using the `d3.csv` method, which parses the data and exposes its columns. The visualization then reports that the data is about 7 kB, containing 148 rows and 4 columns, rendered inside an HTML `<pre>` element. The code also includes commented-out alternatives using `fetch` and `d3.csvParse`, highlighting different approaches to asynchronous data loading.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for various automobile models, with each point representing a car and its name revealed on hover. Built with the Vega-Lite API, it uses a scatter plot with semi-transparent, filled points and no stroke. The code registers Vega and Vega-Lite, loads data from a CSV file via `d3.csv`, and employs a `vl.markPoint` with quantitative X and Y encodings. The visualization automatically sizes to fit the browser window and incorporates a custom dark-themed configuration for axes and labels.

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across a full-screen SVG canvas, serving as a simple interactive smiley face component. The visualization uses React state management with the `useState` and `useCallback` hooks to track mouse coordinates, updating the circle's `cx` and `cy` attributes in real time through ReactDOM rendering to SVG elements.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS named colors dataset by displaying its byte count, row count, and column count in large text. It loads the CSV file from a GitHub gist using the `d3.csv` method, which parses the data and exposes its columns. The visualization then reports that the data is about 7 kB, containing 148 rows and 4 columns, rendered inside an HTML `<pre>` element. The code also includes commented-out alternatives using `fetch` and `d3.csvParse`, highlighting different approaches to asynchronous data loading.

Loading thumbnail…

Fork of Smiley Face Part III

A grid of 18 smiley faces, each rendered as a yellow circle with eyes, a mouth, and a black outline, shows randomized variations in facial feature size and position. The code uses React components to structure each face, and D3’s `arc` function for the mouth shape and `range` to generate the grid. All faces are drawn using SVG inside a shared container.

Loading thumbnail…

Fork of Smiley Face Part VI

This example renders a grid of eighteen smiley faces, each with randomly varied facial features and stroke thicknesses. The visualization is built as a series of React components, including `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, which are composed within a shared `FaceContainer` SVG element. The `Mouth` component leverages the `arc()` function from d3 to generate its curved path, while the random parameters for each face are produced using d3's `range` and JavaScript's `Math.random`.

Loading thumbnail…

Fork of Smiley Face Part III

A React and D3 v5 fork renders a yellow smiley face as an SVG. The face consists of a circle for the head, two offset circles for eyes, and a mouth drawn using the `d3.arc` path generator with specified inner and outer radii and angles. The code computes constant dimensions for the face features and applies a stroke width to the head circle, all positioned within a 960 by 500 viewport.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a React-based smiley face rendered as a full-window SVG, with the face centered and sized relative to the viewport’s dimensions. The code uses React 16.9 and ReactDOM to create SVG circle elements for the face, eyes, and mouth, with positions stored as constants for offset and radius. The rendering approach computes the face’s radius from the window height and applies a black stroke, while the eyes are filled with the default black color. The example demonstrates dynamic sizing and simple component-based SVG drawing without additional data sources.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered in SVG, with the face centered and sized to the full browser window using React. The code draws a large yellow circle for the head, two smaller circles for the eyes, and omits the mouth from the commented-out markup. It computes dimensions dynamically from `window.innerWidth` and `window.innerHeight`, then uses React DOM to render the SVG elements into the root div.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow circle with two smaller black circles positioned as eyes, forming the first step toward a smiley face. The SVG rendering uses hardcoded coordinates and radii rather than a data-driven approach. The code directly sets circle elements with cx, cy, and r attributes through inline SVG markup, with no external JavaScript libraries or dynamic data sources involved. The face is deliberately incomplete, stopping at the eyes without a mouth.

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” displays a static yellow circle with a black outline and two smaller black circles for eyes, representing a simple smiley face in progress. The SVG uses hardcoded circle elements with explicit cx, cy, and r attributes, positioned at the center and offset horizontally for symmetry. No JavaScript libraries are used; rendering relies entirely on inline SVG markup within an HTML document.

Loading thumbnail…

Fork of Hello HTML

This example presents a minimal, empty HTML page that serves as a fork of the "Hello HTML" template. It contains no visible data visualization or interactive elements, acting instead as a blank canvas for testing and development. The code uses standard HTML structure within an `index.html` file, with no JavaScript, CSS, or external libraries referenced. The page renders as a completely blank viewport, with no data source, chart, or rendering approach demonstrated. It exists solely to illustrate the basic skeleton of an HTML document as a starting point for further code.