Roberto

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This chart plots cumulative COVID-19 deaths over time for each country, using a logarithmic y-scale to accommodate wide variation in case numbers. A Voronoi overlay, built with d3-delaunay, enables precise hover detection on the dense line chart, highlighting the nearest data point’s country and redrawing its path in bold black. Data comes from the Johns Hopkins Coronavirus dataset, loaded via d3.csv, with rendering in SVG through React and scales from d3.scaleTime and d3.scaleLog.

Sep 22, 2023

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

The chart displays global coronavirus deaths over time, with each country plotted as a separate line on a logarithmic scale. A Voronoi overlay, generated using `d3.Delaunay`, divides the chart into cells that can be used to detect mouse proximity to specific lines, though the hover handler is only stubbed with a console log. The visualization is built with React and D3 v5, rendering SVG elements via custom `XAxis`, `YAxis`, and `LineChart` components. Data comes from the Johns Hopkins Coronavirus GitHub dataset.

Sep 22, 2023

Fork of Coronavirus Deaths Over Time by Country

A multi-line chart displays global cumulative coronavirus deaths over time, with each line representing a country. The chart uses a logarithmic y-axis to accommodate wide variations in death tolls and includes gridlines for readability. The data comes from the Johns Hopkins Coronavirus Dataset. Built with React and D3 v5, the visualization uses `d3.csv`, `scaleTime`, `scaleLog`, and `d3.line` to generate SVG paths, with axes created via `axisBottom` and `axisLeft`.

Sep 21, 2023

Fork of Organization Graph Diagram

A force-directed graph maps the network of Kenneth Rainin Foundation grantees, with colored hubs for major programs and smaller nodes for affiliated organizations. Four main clusters—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—are interconnected, while leaves represent individual grants. Built with D3 v6, the visualization uses `d3.forceSimulation`, `forceManyBody`, and `forceLink` to compute layout. Nodes and edges are SVG circles and lines, with drag interaction via `d3.drag`. Data is generated programmatically in `data.js`, with colors from a Paletton palette.

Sep 20, 2023

Fork of Coronavirus Linear Y Axis

The chart plots cumulative coronavirus deaths over time as a black line on a linear y-axis, with gridlines and labeled axes. It uses React components to render an SVG, while D3's `scaleTime`, `scaleLinear`, and `line` generator handle scales and the path. Data comes from the Johns Hopkins CSSE time-series CSV, aggregated by summing daily death totals. The visualization includes fixed marker lines at 10,000 deaths and the final date.

Sep 20, 2023

Fork of Global Coronavirus Deaths

A line chart tracks cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The visualization highlights two reference markers: a horizontal line at 10,000 deaths and a vertical line at the most recent date. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to generate the SVG path. Axes are rendered via `axisBottom`, with custom marker components drawing labeled guide lines.

Sep 20, 2023

Fork of Missing Migrants Scatter Plot Log Scale

A scatter plot visualizes the Missing Migrants Dataset, where each circle represents a single migration event. The x-axis shows the reported date using a time scale, while the y-axis displays the total dead and missing on a logarithmic scale, making small and large values comparable. The visualization is built with React and D3 v5, using `scaleLog`, `scaleTime`, and `extent` for scales. SVG circles are rendered with tooltips via the `<title>` element, with axes drawn from `AxisBottom` and `AxisLeft` components, styling marks in teal.

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence among adults aged 15–49 in 2017, using a yellow-to-red sequential color scale to show infection rates. Country boundaries come from World Atlas TopoJSON, while disease data is sourced from an IHME CSV dataset. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection and rendering, with `scaleSequential` and `interpolateYlOrRd` for color encoding. Countries missing data appear gray, and the map includes graticules and interior borders for spatial context.

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization displays migrant deaths and missing persons on a world map, with bubble size proportional to the total dead and missing per location. A linked date histogram below allows brushing to filter the map by time period. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map rendering, `scaleSqrt` for bubble sizing, and `brushX` for interactive filtering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances. The map projects cities using a natural Earth projection with `d3.geoNaturalEarth1` and `d3.geoPath`, while circle size encodes the total dead and missing. The histogram, built with `d3.bin` and `d3.scaleTime`, aggregates counts by month. A `d3.brushX` selection on the histogram filters the map’s circles in real time. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON. Rendering uses React and SVG.

Fork of Multiple Views Cleanup

This interactive visualization combines a bubble map and a date histogram to explore the global distribution of missing migrants. The map uses D3's geoNaturalEarth1 projection and geoPath to render world landmasses, graticules, and circles sized by the square root of the death toll. The histogram uses D3's scaleTime, bin, and timeMonths to aggregate reports by month. Both views are built with React and SVG, drawing from a CSV of missing migrant incidents.

Fork of Missing Migrants Multiple Views

This visualization displays global migrant deaths across two linked views: a natural Earth projection world map with scaled bubbles for total dead and missing, and a time-series bar chart aggregating monthly totals. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, while bubble radii are computed via `d3.scaleSqrt`. The histogram applies `d3.bin` with monthly thresholds and sums values using `d3.sum`. Built with React and D3 v5, data comes from the Missing Migrants Project CSV.

Fork of Missing Migrants on a Map

This visualization maps migration events from the Missing Migrants Dataset, with each circle representing a single incident and sized by the total dead and missing using a square-root scale. The map renders country boundaries and graticules via d3.geoPath with a natural Earth projection, while React manages the component state and markup. Data is loaded asynchronously with d3.csv and the world atlas is fetched as TopoJSON, with land features converted using topojson.feature.

Fork of Missing Migrants Date Histogram

A date histogram displays the total dead and missing migrants per month, with each bar representing a monthly aggregate. The chart uses React with D3 v5, leveraging `d3.bin` to create monthly time bins and `d3.sum` to calculate each month's total from the Missing Migrants Dataset. SVG rendering draws the axes and bars, with tooltips via native `<title>` elements.

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis shows reported dates over time, while the y-axis displays the total number of dead and missing individuals. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering ticks and labels. Circle marks include native SVG `<title>` tooltips showing formatted dates.

Fork of Working with Time

A scatter plot displays temperature readings over the course of a week, with each point representing a measurement. The visualization uses a time-scaled x-axis and linear y-axis, with weekday labels on the x-axis. Built with React and D3 v5, the code loads CSV data from the Data Canvas Sense Your City dataset, uses `scaleTime` and `scaleLinear` for axes, and renders SVG circles that include tooltips showing the time of each reading.

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized proportionally using a square-root scale. The map uses a natural Earth projection via d3.geoPath, with graticules and country boundaries rendered from World Atlas TopoJSON data. City coordinates and population figures come from Simplemaps, loaded as CSV. The visualization is built with React, d3.v5, and SVG, using hooks for data fetching and rendering marks.

Fork of Points on a Map

This visualization displays a world map with cities having populations greater than 50,000, plotted as semi-transparent teal circles. The map uses geographic projections from `d3.geoNaturalEarth1` and renders country boundaries, graticules, and land masses using `d3.geoPath`. Built with React and D3 v5, the code loads TopoJSON world atlas data from `world-atlas@2.0.2` and city coordinates from Simplemaps, with topojson’s `feature` and `mesh` functions preparing geographic features for SVG display.

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width on the x and y axes, with species encoded by color. Built with React and d3.v5, it uses D3 scales for linear axes and an ordinal color scale. Hovering over the color legend highlights data points of that species while fading others, demonstrating an interactive legend pattern.

Fork of Scatter Plot with Color Legend

This fork of a scatter plot visualizes the Iris Dataset, showing sepal width against petal length for individual flowers, with species determining color. Built with React and D3 v5, the SVG visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for the color scale, and a custom `ColorLegend` component. Data is loaded via D3’s `csv` function from a GitHub gist. The chart includes axis labels, formatted tick marks, and hover tooltips via SVG `<title>` elements.

Fork of Scatter Plot with Color

This example visualizes the Iris dataset, mapping petal length and sepal width to the x and y axes of a scatter plot. Each point is colored by species, and hovering reveals a tooltip with the precise petal length. The visualization is built with React and rendered as an SVG, leveraging D3 v5 utilities such as `scaleLinear`, `scaleOrdinal`, and `extent` to compute scales and domains. Custom `Marks`, `AxisBottom`, and `AxisLeft` components generate the circles and axes, with data loaded asynchronously via `useData`.

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered as SVG circles, visualizes relationships between sepal and petal measurements. The visualization features interactive dropdown menus, built with React and the `react-dropdown` component, that let users select which attribute maps to the x- and y-axes. The chart uses `d3.scaleLinear` and `d3.extent` to compute scales from the data, which is loaded as CSV via `d3.csv`. Axis components render tick marks and labels using SVG elements.

Sep 5, 2023

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus control which attributes map to the x- and y-axes, with the SVG marks updating accordingly. The React component uses `useState` and `useCallback` to manage selections, while `d3.csv` loads the data and `d3.scaleLinear` with `extent` handles scaling. Axes are rendered as custom SVG components, and a native `<title>` element provides tooltips on each circle.

Sep 5, 2023

Fork of Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a list of six options. The selected value updates in real time via React’s `useState` hook, with the current choice logged to the console. It uses the `Dropdown` component, which renders a native `<select>` element and maps over array options, while React DOM handles rendering into the `#root` element. The styling employs large fonts for visibility, and the code imports React and ReactDOM from UMD builds.

Fork of Polished World Map

This example displays a world map with country boundaries and graticules, colored in a teal palette against a light gray sphere. It visualizes geographic features from the World Atlas TopoJSON dataset, using d3.geoNaturalEarth1 projection and d3.geoPath to render land, interiors, and graticules as SVG paths. The React component fetches data via d3.json and transforms it with topojson.feature and topojson.mesh, applying distinct CSS classes for styling.

Fork of Fork of Working with Time

This scatter plot shows how temperatures in San Francisco vary over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization loads data from a CSV file via the `d3.csv` function and renders SVG circles using React, with D3's `scaleTime` and `scaleLinear` managing the axes. Each circle includes a tooltip displaying the formatted date, while axis labels and ticks are generated by custom React components. The plot uses a clean, minimalist design with a Poppins font and muted colors.

Fork of Stylized Line Chart

A stylized line chart displays temperature readings over a week, with time on the x-axis and temperature on the y-axis, drawn as a smooth natural curve. The chart renders as an SVG in a React component, using D3 scales (`scaleTime`, `scaleLinear`) and axis functions to generate the tick marks and labels. The data comes from the Data Canvas Sense Your City Dataset, loaded as CSV via `d3.csv`. The line path uses `line().curve(curveNatural)` in D3, while styling is applied through Poppins fonts and teal strokes.

Fork of Working with Time

Fork of Stylized Scatter Plot

This visualization displays the classic Iris dataset, plotting petal length against sepal width as a scatter plot of individual circles. The data loads asynchronously via d3.csv and renders through React components using SVG. Code splits responsibilities into separate modules for the axes and marks, with scales constructed using d3.scaleLinear and extents computed via d3.extent. Axis labels appear rotated for the y-axis, and hover tooltips show formatted petal length values.

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values converted to billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and SVG `<rect>` elements rendered by the `Marks` component. The chart includes formatted tick labels via `d3.format` and interactive tooltips using SVG `<title>` elements.

Fork of Stylized Bar Chart

Fork of Refactored Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart, using data from the United Nations World Population Prospects 2019. It uses React for component composition and d3.v5’s `scaleBand`, `scaleLinear`, and `max` for scales and domain calculation. The chart renders as SVG, with axes constructed via custom `AxisBottom` and `AxisLeft` components, while `Marks` draws the rectangular bars. Data is loaded asynchronously with d3’s `csv` function and filtered to the first 10 rows.

Fork of Axes with React & D3

This example displays the ten most populous countries as a horizontal bar chart, with bars sized by each country’s projected 2020 population. The visualization uses React for component rendering and SVG for graphical output, while D3’s `scaleBand` and `scaleLinear` position the bars and d3’s `csv` loads the United Nations World Population Prospects 2019 data. Axes are drawn manually using D3’s tick and scale methods, mapping population values to pixel widths and country names to vertical bands.

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries in 2020 as a bare bar chart with no axes, labels, or other decorative elements. It uses React hooks to fetch and sort the UN World Population Prospects 2019 dataset, then renders SVG rectangles with d3 v5’s `scaleBand` and `scaleLinear` for positioning. The chart updates only once data loads, with bars drawn directly from the CSV’s `2020` population column.

Fork of Rendering Data with React & D3

A radial burst of CSS named colors arranged as equal-width slices in a full circle, with each slice filled by its corresponding RGB hex value. The visualization loads color data from a CSV file using D3’s `csv` utility, then computes the pie layout with `d3.pie` and renders arcs via React as SVG path elements. It also relies on D3’s `arc` generator to define the path geometry, while React manages component state and updates. The code includes a commented alternative manually calculating start and end angles without `d3.pie`.

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize CSS named color data using D3 utilities within a React component. It fetches a CSV file from a GitHub gist using `d3.csv` and stores the parsed data in React state via the `useState` and `useEffect` hooks. The rendered output displays a text summary of the dataset, including its size in kilobytes (computed with `d3.csvFormat`), row count, and column count. The interface switches from a "Loading..." message to the summary once the data arrives, showcasing integration of D3 data loading with React state management.

Fork of Loading Data with React & D3

This example uses React and D3 to load a CSV of Velib bike-sharing data and aggregate it by hour using `d3.rollups` with a sum of `num_bikes_available`. It then renders a scatter plot of circles with positions and opacity randomized on each render, sized by the summed bike counts. The SVG dimensions are 960×500, and the data pulls from a GitHub-hosted CSV. The app shows a loading message until the CSV parses asynchronously via `d3.csv`, after which it maps each group to a circle.

Loading data with react & D3

A circle follows the mouse across the screen using unidirectional data flow in React with D3. The example demonstrates loading data and managing state through a custom `setState` callback, which triggers re-rendering of the SVG via d3-selection's `join` method. The `viz.js` module updates the circle's `cx` and `cy` attributes based on mouse events, initializing its position to the window's center. It uses D3 v7 with vanilla React, rendering through `d3.select` and `selectAll`.

Fork of Loading and Parsing CSV Data

This example demonstrates the loading and parsing of CSV data from a remote URL containing CSS named colors, displaying the file size, row count, and column count as large text. The visualization uses d3.csv to fetch and parse the data, then d3.csvFormat to calculate its size, with an alternative commented-out approach using the Fetch API and async/await alongside d3.csvParse. The output is rendered into a pre element via JavaScript, showcasing both the modern d3.v5 API and traditional text-based data processing.

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, responding in real time to pointer movement. The example demonstrates React state management with a `useState` hook and `useCallback` for the mouse event handler, while ReactDOM renders the SVG circle at the updated coordinates. It uses React 16.9.0 and renders entirely via SVG elements, with the initial circle positioned at the center of a 960×500 viewport.

Jul 13, 2023

Mouse follower

A smiling face follows the mouse cursor across a yellow circular background, with eyes and mouth that scale and shift based on randomized dimensions. Built with React components and D3 v5, the example renders SVG shapes including a circular background, offset eyes, and an arc-based mouth using the `d3.arc()` API. The face’s position updates dynamically in response to mouse movement, with component props controlling dimensions like eye offset, radius, and mouth width to create varied expressions.

Jul 13, 2023

Loding and parsing csv data

This example demonstrates the first step of a data pipeline: fetching and parsing a CSV file from a remote URL. Using the Fetch API, the code retrieves a gist containing CSS named colors, then logs the raw text response to the browser console. The page itself displays no visualization, only a large placeholder message, while the parsed data remains unprocessed and unrendered. The example uses the native `fetch` function and `response.text()` method, without any external libraries like D3.

Jul 13, 2023