Skip to main content
Log in
M

Mauricio García Benítez

@MauxFear·14 public vizzes

Loading thumbnail…

Making a Bar Chart with React & D3

This bar chart visualizes the top 10 most populous countries using United Nations World Population Prospects 2019 data, rendered with React and D3.js (v5). The chart displays horizontal bars ordered by population, with formatted tick labels (e.g., “1.4B”) and interactive tooltips showing exact values. D3’s scaleBand and scaleLinear handle axes and positioning, while React components (AxisBottom, AxisLeft, Marks) compose the SVG output. The bottom axis includes custom formatting via D3’s format API, and the styling uses the Poppins font.

Dec 31, 2020
Loading thumbnail…

Loading and Rendering Data with React & D3

This example renders a pie chart of CSS named colors using React and D3. The chart displays each color as a wedge, filled with its corresponding RGB hex value, and drawn as an SVG path. It loads data from a CSV file using D3's `csv` utility, then uses React's `useState` and `useEffect` hooks to manage the asynchronous data loading. The pie layout and arc generator from D3 (`pie` and `arc`) compute the wedge geometry, while React components render the final SVG output.

Dec 29, 2020
Loading thumbnail…

3D DNA HELIX From Sequence

This animated visualization renders a DNA helix from a user-supplied text sequence, showing two intertwined strands that rotate over time. Each nucleotide is represented as a colored circle, with colors mapped via `d3.interpolateRainbow` based on the unique characters in the string, while connecting lines between complementary bases emphasize the helical structure. The code uses D3.js v5 with SVG elements, updating positions and scales through a `setInterval` loop that regenerates data and applies logarithmic z-depth scaling to simulate three-dimensional perspective. The animation highlights the sequence’s layout by encoding torsional rotation and opacity changes.

Dec 28, 2020
Loading thumbnail…

3D DNA HELIX Interactive

This interactive visualization depicts a stylized 3D DNA double helix, with two intertwined strands of colored nucleotide pairs (circles connected by lines) that continuously rotate and animate as the central axis twists. Mouse movement changes the helix’s torsion, altering the rotation speed and curve magnitude. The visualization is built with D3.js (version 3.5.5) and the underscore.js library, rendering via SVG. The code generates two sine/cosine-based strands, maps their 3D coordinates using linear scales for x, y, and depth (z), and updates the scene every 25 milliseconds using `setInterval` and D3’s selection/data-binding API, applying color fills from a predefined palette.

Dec 28, 2020
Loading thumbnail…

DNA sequence

This visualization animates a synthetic DNA double helix, where each colored node represents a letter from a string of fake genes and pulses along a twisting, sinusoidal path over time. It shows the helix rotating continuously, with lines connecting complementary strands and opacity varying based on depth to suggest a 3D structure rendered in SVG. The code fires a `setInterval` to regenerate and update data every 25 milliseconds, using d3’s `scaleLinear`, `extent`, `range`, and `interpolateRainbow` for color mapping. React manages the component, with fragments wrapping the DNA sequence inside the app’s root element.

Dec 28, 2020
Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated visualization, built with the Canvas API, generates a shifting field of colored circles arranged on a grid. The code applies mathematical functions to coordinates and radii, creating rhythmic patterns where circle positions and sizes oscillate over time. As the animation loops, it layers translucent dark rectangles to create a fading trail effect, while the circles' colors cycle through based on their grid position and the current time value. The entire canvas resizes dynamically to match the window dimensions, with the pattern always centered and scaled proportionally.

Dec 28, 2020
Loading thumbnail…

Fork of COVID-19 Map (Positive Cases per 100,000 People)

This choropleth maps seven-day average COVID-19 positive cases per 100,000 people across U.S. states, with color encoded via a threshold scale using d3.scaleThreshold and schemeBlues. Hovering a state highlights it in green, while a tooltip reveals additional metrics like death toll and test counts. The visualization uses d3.geoPath with the Albers USA projection, and a VoronoiOverlay enables efficient mouse interaction. Data comes from an external CSV, with state boundaries from topojson, and React manages the component rendering.

Dec 28, 2020
Loading thumbnail…

Zip Codes

This visualization plots every U.S. ZIP code as a small square on an Albers USA projection, with each point colored by the first digit of its ZIP code. It uses the `vega-lite-api` to construct a layered specification, leveraging `vl.markSquare`, `vl.longitude`, and `vl.latitude` encodings. The data is loaded via `d3.csv` from a GitHub gist, and rendering is handled by Vega-Lite with the `geo-albers-usa-territories` projection. The map fills the browser window and includes a tooltip showing the full ZIP code.

Dec 28, 2020
Loading thumbnail…

Temperature in San Franscisco

This line chart shows temperature readings in San Francisco over time, with a green stroke and tooltips displaying exact values. The visualization supports panning and zooming through a scale-bound interval selection. Built with the vega-lite-api and rendered using vega and vega-lite, it loads CSV data from a VizHub-hosted dataset. The code customizes axis titles, date formatting, and color scheme via config.js, while getData.js uses d3.csv to fetch the data.

Dec 28, 2020
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data, showing the relationship between engine displacement and horsepower with color-encoded cylinders and tooltips for car names. It fetches data from a CSV file via d3.csv, then builds the visualization using the vl API's markCircle and encode methods, configuring axes, styles, and layout through a custom config object. The view is rendered as SVG and fitted to the window size, with Vega and Vega-Lite registered in the API.

Dec 28, 2020
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It fetches a CSV file containing CSS named colors from a GitHub gist and displays the file size, row count, and column count in large text. The primary approach uses `d3.csv`, which returns a promise that resolves to parsed data, while commented alternatives show `fetch` with `async`/`await`, `d3.csvParse`, and a callback-based "pyramid of doom" pattern. The visualization itself is minimal, focusing on the data-loading workflow rather than graphical output.

Dec 28, 2020
Loading thumbnail…

Cursor Follower

A dark red circle tracks the mouse cursor across a full-screen SVG canvas, updating its position in real time. React hooks (`useState` and `useCallback`) manage the cursor coordinates and handle mouse-move events. The circle’s center is offset upward by its radius, and the viewport size is derived from `window.innerWidth` and `window.innerHeight`. The example renders a single SVG circle with JavaScript and React.

Dec 27, 2020
Loading thumbnail…

Making a Santa Face with components

A grid of randomized Santa faces demonstrates component reuse in React with D3. Each face is rendered as SVG, composed of modular parts like eyes, beard, mouth, and hat, with random parameters varying eye offset, mouth radius, and face traits. The code uses React functional components, D3’s `arc()` for the mouth, and `range()` to generate the 15-face array. Styling is applied via CSS classes, and the layout scales with a transform.

Dec 27, 2020
Loading thumbnail…

Making a Santa Face

This example renders a cartoon Santa face as an SVG graphic. It shows a face with layered eyes (sclera, iris, and pupil), a red hat with a white pompom and band, a mouth, and a beard, all accompanied by a “MERRY XMAS!!! HO HO HO” text. The visualization uses a React component with D3’s `select` and `arc` APIs to generate SVG paths for the mouth and beard arcs, while other shapes are drawn with SVG primitives (circles and paths). All elements are positioned relative to the canvas center using SVG transformations.

Dec 26, 2020