Diego Mariano

@dcbmariano·4 public vizzes

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a pathetic bar chart with no axes, using React to render SVG rectangles. The data comes from the United Nations World Population Prospects 2019, loaded via the `d3.csv` function. A `scaleBand` positions each country vertically, while a `scaleLinear` maps population values to rectangle widths. The chart uses `d3.v5` and React hooks like `useState` and `useEffect` to fetch and store the data, showing a simple loading message until the CSV is ready.

Mar 16, 2022

Loading thumbnail…

Lendo dados com React & D3

This example shows a donut chart of CSS named colors, where each color is represented by a wedge filled with its own RGB hex value. The visualization loads color data from a CSV file using D3’s `csv` utility and manages the asynchronous data with React’s `useState` and `useEffect` hooks. Each wedge is rendered as an SVG `path` computed with D3’s `arc` generator, using angles proportional to the data index. The chart appears inside a React component that displays a loading message until the data arrives.

Mar 4, 2022

Loading thumbnail…

Exercício 1

This example shows eight yellow smiley faces arranged in a grid, each drawn with a circular yellow face, two eyes, and an arc-based mouth. The code uses React components to compose the face from separate reusable parts, and D3’s `arc` generator to create the mouth path. The SVG container centers each face via a translated group, while the `CirculoAmarelo` and `Olhos` components draw the circle and eye pairs with configurable radii and positions. Random values for eye size and mouth thickness give each face slightly different features.

Feb 13, 2022

Loading thumbnail…

Jake - The Dog

This example renders a stylized portrait of Jake, the dog from *Adventure Time*, using hand-coded SVG shapes. The image features two large black circles for the eyes, offset by smaller white circles to create highlights, and a distinctively shaped, open mouth composed of a circular outline and a curved, stroked path for the nose. The piece uses explicit SVG `circle` and `path` elements with `stroke`, `stroke-width`, and `fill` attributes, alongside a second `ellipse` for the nose interior, all placed on a flat orange background. The composition directly applies SVG coordinates and path data to achieve its flat, geometric cartoon aesthetic.

Feb 12, 2022