Carlos Caballero

Corona Virus

This visualization reports basic statistics on a global COVID-19 deaths dataset, displaying file size, row count, and column count as plain text. Using React with hooks, the code fetches the CSV from the Johns Hopkins CSSE GitHub repository via `d3.csv`, then formats the parsed data with `d3.csvFormat` to calculate its size in kilobytes. The view updates after the asynchronous data load, showing a loading message until the fetch completes. It relies on D3 v6 for data parsing and formatting within a React 17 component tree.

Mar 6, 2021

Missing Migrants Brushing

This visualization combines a world map and a time-series histogram to explore global migrant deaths and disappearances. Brushing a date range in the histogram filters the circles on the map, which use `d3.scaleSqrt` scaling and `d3.geoPath` with a `geoNaturalEarth1` projection. The histogram bins monthly data with `d3.bin` and `timeMonths`, while the brush uses `brushX`. Data comes from a CSV of the Missing Migrants Project, overlaid on a TopoJSON world atlas.

Mar 5, 2021

Missing Migrants

This visualization combines a bubble map with a date histogram to show the global distribution and monthly totals of missing migrants. The map uses a natural Earth projection with `d3.geoPath` and `d3.geoGraticule` to render countries and graticules, while circles scaled by `d3.scaleSqrt` represent the number of dead and missing per location. The histogram below bins reported dates by month using `d3.bin` and `d3.timeMonths`, with bar heights scaled linearly. Data comes from the Missing Migrants Project CSV and the world atlas TopoJSON.

Mar 5, 2021

World Map with cities

A world map visualization displays cities as semi-transparent circles, with circle area proportional to each city’s population. The map uses the Natural Earth projection via D3’s `geoNaturalEarth1` and `geoPath`, rendering graticules, land masses, and interiors from TopoJSON data. City coordinates and populations come from a CSV file, and the D3 `scaleSqrt` function maps population values to a maximum radius of 20 pixels.

Mar 5, 2021

Scatter Plot

This example shows a scatter plot of the Missing Migrants Project data, plotting reported dates against the total number of dead and missing individuals. The visualization uses React to render SVG circles, with D3 scales and axes handling the projection of data points. The code utilizes `scaleLinear` for both axes, `extent` for domain calculation, and `csv` for data loading. Interactive tooltips are provided via SVG `<title>` elements, while the chart includes labeled axes for clarity.

Mar 4, 2021

Menus

This example demonstrates a simple interactive menu system built with React and D3 v6, allowing users to select between two animal options—goldfish and cat. The interface displays a large label and dropdown select element, where changing the selection updates the component state and logs the chosen value to the console. The app uses React’s `useState` hook to manage the selected value and passes it to a reusable `Dropdown` component, which renders the native HTML `<select>` and `<option>` elements. The styling uses CSS to increase the font size of the label and select for better visibility.

Mar 4, 2021

World Map

This example shows a world map rendered with landmasses in teal and country borders in a lighter teal, overlaid with graticules and a sphere outline. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 to draw geographic features. TopoJSON data from the world-atlas package is loaded with `d3.json` and converted to GeoJSON using `feature` and `mesh`. React manages the component structure, and the map is rendered as SVG elements styled with CSS.

Mar 3, 2021

Line Chart

This line chart visualizes hourly temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses React to render SVG elements, leveraging d3-scale functions like `scaleTime` and `scaleLinear` for axes, and d3-shape’s `line()` with `curveNatural` to draw the smooth temperature curve. Data is loaded as CSV via d3.csv from a GitHub gist, with axis labels and ticks styled in a minimalist theme.

Bar Chart

This example displays a horizontal bar chart of 2020 population estimates for the top 10 countries, sourced from UN Population Prospects data loaded via d3.csv (d3-fetch). The React 17 app uses d3.scaleBand for the country axis and d3.scaleLinear for population, rendering SVG rectangles with native `<title>` tooltips. Axes are built manually through React components (AxisBottom, AxisLeft), while d3.format formats population values with SI notation, converting 'G' to 'B'. The chart is styled with a teal fill and Poppins font.

css named colors

A pie chart displays all 148 CSS named colors, with each slice filled using that color’s hexadecimal value from a CSV dataset. Built with React and D3 v6, the visualization uses `d3.pie` and `d3.arc` to compute and render the SVG paths. The data is loaded asynchronously via `d3.csv` from a GitHub gist, with the chart centered in a 960×500 viewport.

d3 + react + parse data

This example demonstrates how to combine React and D3 to parse and summarize a CSV dataset of CSS named colors. After fetching the data with `d3.csv`, it displays a textual summary using `d3.csvFormat` to report the file size in kilobytes, the row count, and the column count. The React `useState` and `useEffect` hooks manage the asynchronous data loading and render a simple message while awaiting the response. The visualization is minimalist, presenting only computed statistics rather than a graphical chart.

Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV dataset containing CSS named colors. It displays the file size in kilobytes, the number of data rows, and the number of columns. The program loads the remote CSV file using `d3.csv`, which parses the text into an array of objects, and uses `d3.csvFormat` on the parsed data to compute its byte length. The results are rendered as large text in a `<pre>` element.

Vega-Lite API Template

A scatter plot of auto-mpg data shows the relationship between vehicle weight, horsepower, and fuel efficiency, with points colored by country of origin and sized by miles per gallon. The visualization is built with the Vega-Lite API, registering both Vega and Vega-Lite engines, and leverages D3’s `csv` module for data loading from a UCI Machine Learning Repository dataset. SVG rendering and tooltip interactions are configured through Vega-Lite’s `config` and `Handler` interfaces.

Follow Mouse

A circle follows the mouse cursor across an SVG canvas, centered on the pointer's current position. The visualization uses React's `useState` and `useCallback` hooks to track mouse coordinates from the `onMouseMove` event, updating the circle's `cx` and `cy` attributes accordingly. Rendered with React and D3 v6 in an SVG element, the example demonstrates simple interactive state management without any data source or external datasets.

React

This example shows a minimal React application that renders a static “hello” message in a web browser. The code establishes a rendering pipeline by importing React and ReactDOM, locating the `root` HTML element, and using `ReactDOM.render()` to mount a functional component. It loads React 17, ReactDOM 17, and D3 6.5 from CDNs, though D3 is not used. The page has no margins or scrollbars, making the output a clean, borderless display.

Smiley Face Par1

A grid of eighteen randomized smiley faces demonstrates the composition of reusable React components. Each face uses a yellow background circle, two black eyes, and an arc-based mouth rendered with D3’s `arc` generator. The `Face` component assembles `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, with all geometry positioned relative to a translated SVG group. Random values for stroke width, eye offset, eye radius, and mouth dimensions are generated via `d3.range` and `Math.random` for each face, producing varied expressions while maintaining a fixed SVG canvas size.