acervantesc

@acervantesc·5 public vizzes

Chart2.js

This example shows a horizontal bar chart of population data for 15 countries or regions, using bars scaled linearly to represent population values. The visualization is built with React and rendered as SVG, using D3 v5’s `scaleLinear` and `scaleBand` for positioning and sizing bars. The code loads data from a CSV file, multiplies population values by 1000 to convert them to raw numbers, and appends rectangles to the SVG. It highlights the simplest D3 approach for creating categorical comparisons.

Jul 26, 2022

Loading thumbnail…

D3 Chart

This example shows a static bar chart built with React and D3.js v4, displaying a simple dataset of nine numeric values as vertical bars. The bars are rendered as SVG rectangles, with heights proportional to the data values and positioned horizontally using a translate transform. The code selects the pre-existing `<svg>` element with the class `bar-chart`, sets its dimensions, and appends rectangles via D3's data join (`enter()` and `append()`). The chart uses `d3.select` and `d3.min` APIs to map values to pixel coordinates.

Jul 20, 2022

Loading thumbnail…

D3 Selectors

This example demonstrates D3’s DOM selection and manipulation methods by directly targeting elements. It uses `d3.select` to modify the `h1` heading’s color, class, and text, then `d3.selectAll` to style all paragraphs blue. The code appends three new paragraphs to the body using chained `append` calls. It relies on D3 v7 and plain CSS/JavaScript, showing how selectors apply cascading changes to existing and newly created nodes.

Jul 20, 2022

Loading thumbnail…

Clown 2

A minimalist clown face built with React and D3.js, rendered as SVG shapes. The design layers a blue circular face, white eyes with blue irises, ears, a purple nose with a white highlight, and a white mouth arc, all composed of basic SVG circles, ellipses, and paths. D3’s `arc` generator creates the curved mouth and purple hat, while React components (`FaceContainer`, `Eyes`, `Mouth`) manage the layout and props. The face is centered on a 1000x600 canvas, with hardcoded dimensions for offsets and radii, demonstrating a component-based approach to geometric composition.

Jul 18, 2022

Loading thumbnail…

Clown (SVG+React+D3)

A colorful SVG clown face is rendered using React and D3.js, with D3's arc generator creating the mouth and hat shapes. The composition includes a blue face, white eyes with blue irises, a purple nose and ears, and a yellow-tinted mouth, all positioned using React variables and SVG transform attributes. The code imports React and D3's `d3.arc` to construct the path elements, and the rendering is done through ReactDOM into an HTML div.

Jun 29, 2022