Bjørnar Dalsnes

@brdalsnes·5 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, with no axes or labels, creating a starkly minimal "pathetic" chart. Using React and d3.v5, it loads population data from the United Nations World Population Prospects 2019, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis to size each rectangle. The SVG rendering shows bar lengths proportional to 2020 population values, with React managing the state and rendering.

Sep 9, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst visualization displays CSS named colors as equal-sized pie slices, each filled with its corresponding hex value. The code loads color data from a CSV file using D3's `csv` utility, then computes arc paths with `d3.pie` and `d3.arc` in a React component. React's `useState` and `useEffect` hooks manage the asynchronous data loading, while `ReactDOM.render` mounts the SVG output to the page. The slice fill color comes directly from the `'RGB hex value'` field in the dataset.

Aug 28, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn as a yellow circle with black stroke, two black eyes, and a mouth shaped as a thick arc, all rendered using React and D3.js. The face is centered within an SVG canvas, with the mouth created using d3.arc to define a path, while circles are placed using explicit coordinates. The visualization demonstrates a simple declarative approach, using React components for structure and D3 utilities for geometry.

Aug 28, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered with React and SVG fills the browser window, with its size adapting to the viewport dimensions. The face features two black eyes and a yellow circular head outlined in black, though it omits a mouth. The code uses React 16.9 and ReactDOM to mount an SVG element, calculating the center, eye offsets, and radii based on `window.innerWidth` and `window.innerHeight`. All shapes are drawn as SVG `<circle>` elements within a transformed group.

Aug 19, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a static, yellow circle with a black outline and two smaller black circles positioned inside it, forming a simple face-like shape. It demonstrates a minimal SVG rendering approach using raw HTML and SVG elements, without any JavaScript libraries or data binding. The visualization is created directly within an SVG container in an HTML page, with circles positioned using explicit `cx`, `cy`, and `r` attributes. The code uses no external APIs or frameworks, relying solely on inline SVG markup to achieve the output.

Aug 19, 2022