lexissaito.ls@gmail.com

@S-ythezzz·5 public vizzes

Bar Chart

This example shows the top 10 most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population on the x-axis. The chart uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.format for axis tick labels that abbreviate large numbers. Data loads from a CSV file of the United Nations World Population Prospects 2019, filtered to the first ten rows. Hovering over a bar reveals a tooltip with the formatted population value.

Oct 24, 2024

Loading thumbnail…

Bar

This chart displays the ten most populous countries as horizontal bars, sized by their 2020 population estimates from the United Nations World Population Prospects 2019. Notably, the visualization omits axes, scales, and labels, making it intentionally minimal. Built with React and D3 v5, the code uses `csv` to load the data, `scaleBand` for the y-axis country positions, and `scaleLinear` for the x-axis bar lengths. Each bar is rendered as an SVG `rect` element, with height set to half the bandwidth, resulting in a sparse, unadorned design.

Oct 24, 2024

Loading thumbnail…

BarChart

This radial burst visualization displays all 148 CSS named colors as segments of a pie chart, using each color’s own hex value to fill its slice. The code loads color data from a CSV file via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute the paths, which React renders as SVG elements. The React component manages loading state with `useState` and `useEffect`, while D3’s `pie().value(1)` assigns each color an equal angular extent.

Oct 24, 2024

Loading thumbnail…

Test01

A yellow smiley face is rendered as a full-screen, responsive SVG graphic using React. The visualization displays a circle with a black stroke for the face, plus two smaller black circles for eyes, positioned symmetrically around the center. The code uses ReactDOM to render the SVG elements, calculating dimensions from `window.innerWidth` and `window.innerHeight`, and applies a `transform` via the `translate` function to center the face. No external data sources are used, and the rendering is purely programmatic.

Oct 19, 2024

Loading thumbnail…

Test01

This visualization demonstrates a dynamic force-directed network layout, mapping relationships between nodes using `d3.forceSimulation` with charge, link, and center forces. It renders the network as SVG elements, with node positions updated via `d3.drag` behavior for interactive repositioning. The code also computes node-link coordinates on each tick, though the visual output focuses solely on the structural topology rather than spatial context. The underlying data structure is explicitly defined in the source, with nodes and links passed directly into the simulation, making the graph’s configuration fully transparent. The implementation relies entirely on D3 v3 APIs and a simple SVG renderer.

Oct 19, 2024