Sunny

@sunnyata·10 public vizzes

Fork of Stylized Bar Chart

This example presents the top 10 most populous countries as a horizontal bar chart, sorted by population. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` handling the axes and bar positioning. The data comes from the United Nations World Population Prospects 2019, loaded via D3’s `csv` function. Hovering over a bar reveals a tooltip formatted using D3’s `format` with SI prefixes, replacing 'G' with 'B' for billions.

Aug 28, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example visualizes the top 10 most populous countries using a horizontal bar chart, with each bar’s length proportional to its 2020 population estimate from the United Nations World Population Prospects 2019 dataset. The chart displays axis tick labels and grid lines created manually with React components, while D3’s `scaleBand` and `scaleLinear` handle positioning and scaling. The data is loaded via `d3.csv`, and rendering uses SVG elements within a React component that manages state through hooks like `useState` and `useEffect`.

Aug 26, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors as a radial burst of pie slices, each filled with its corresponding RGB hex value. The visualization uses D3’s `csv` loader to fetch color data from a gist, and React’s `useState` and `useEffect` hooks manage the asynchronous data loading. The pie layout is computed with `d3.pie`, and each slice is rendered as an SVG `<path>` using `d3.arc` with an inner radius of zero, creating a full circle of color segments around a central point. React-DOM mounts the SVG into the page, with a loading fallback until data arrives.

Aug 17, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting fuel efficiency (mpg) against horsepower with points colored by origin and sized by weight. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode fields, while `vl.color().fieldN()` and `vl.size().fieldQ()` map additional variables. The code registers Vega-Lite with `vl.register` and configures a custom dark theme via `config.js`. Data is loaded asynchronously using D3’s `csv` function, and tooltips display car names through the vega-tooltip `Handler`. The chart renders responsively to the window dimensions.

Aug 17, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A fork of the Smiley Face Part II example renders a single black circle that follows the mouse cursor across a yellow SVG canvas. Built with React and SVG, the app uses the `useState` hook to track mouse coordinates and the `onMouseMove` event to update them. The circle’s position is bound to the current `mousePosition` state, while its radius remains fixed at 40. The code relies on React’s `useCallback` for the event handler and renders the visualization via `ReactDOM.render`. No data source is used; interaction drives the display.

Aug 12, 2022

Loading thumbnail…

Smiley Face Part VI

Eighteen randomly generated smiley faces are arranged in a grid, each with varied stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization demonstrates a modular React component architecture, using ES6 modules to compose a face from separate `BackgroundCircle`, `Eyes`, and `Mouth` components. The mouth is drawn using `d3.arc`, while `d3.range` generates the array of faces, all rendered as SVG within a React container.

Aug 12, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiley face composed of SVG shapes, built with React and rendered using D3’s `arc` generator for the mouth. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth arc defined by inner and outer radii and start/end angles. React manages the component structure, while D3 v5 calculates the path data. The code uses the `d3.arc` API within a React functional component to produce the final SVG output, with dimensions and offsets set as constants.

Aug 11, 2022

Loading thumbnail…

Smiley Face Part III

A React-driven SVG smiley face is centered on a yellow circle with black stroke, featuring two eye circles and a curved mouth drawn using d3.arc. The composition includes gradient-filled ellipses and rotated SVG text elements with CSS classes for styling. The code combines React components with d3’s arc generator, rendering the entire face and decorative text directly into an SVG element.

Aug 10, 2022

Loading thumbnail…

Fork of Let's Make a Face

This example renders a yellow smiley face that fills the browser window using React and SVG. The face is built from three circles: a large yellow head with a black stroke, and two smaller black circles for eyes positioned symmetrically around the center. The code uses `window.innerWidth` and `window.innerHeight` to make the visualization responsive, and computes the head’s radius from the viewport height. React components define the SVG elements, with JSX attributes matching SVG properties like `stroke-width`.

Aug 9, 2022

Loading thumbnail…

Smiley face

A static SVG drawing depicts a yellow circle with a black outline, which serves as the face, and two smaller black circles positioned inside it as eyes, all centered on a 960 by 500 canvas. The page also includes the title "Biatch" below the graphic. The visualization is built using raw SVG elements—such as `<circle>` tags with specific `cx`, `cy`, `r`, `fill`, and `stroke` attributes—directly embedded in an HTML document, with no JavaScript libraries or data sources involved. The code relies solely on inline SVG markup and basic HTML styling to render the simple, non-interactive image.

Aug 9, 2022