Alumanda Shakankale

@alushaks·5 public vizzes

Different faces

A simple face is drawn in the center of an SVG canvas, using yellow for the head, black for the stroke, and black for the eyes and mouth. Built with React and D3 v5, it uses the `d3.arc()` API to render a mouth arc, while circles define the eyes and background. The layout is computed from fixed constants for positions and radii, with a yellow circle behind the facial features.

Jan 25, 2020

Loading thumbnail…

Smiley Face Part4

A smiling face is drawn in yellow with a thick black outline, positioned at the center of an SVG canvas. The face includes two solid black circles for eyes and a curved path representing the mouth. The visualization is created using React and D3, where the mouth shape is generated by D3’s `arc` function with specified inner and outer radii and angular range. The inspiration is likely from a basic charting tutorial, as indicated by the README.

Jan 25, 2020

Loading thumbnail…

Smiley Face Part2

A yellow smiley face rendered in SVG uses React for the user interface and D3’s `arc` generator to create the mouth. The face consists of a filled circle with a black outline, two small eye circles, and a curved mouth path built from an arc with specified inner and outer radii. Use of React components and D3 version 5 is evident, with static dimensions and styling defined in JavaScript.

Jan 25, 2020

Loading thumbnail…

Smiley Face Part1

A smiley face is drawn as a circle on a 960-by-500 SVG canvas, with a yellow fill and a thick black outline, plus two smaller unfilled circles for eyes. The face is centered and uses hardcoded offsets for eye placement. The code imports React and ReactDOM directly and renders the SVG via `ReactDOM.render`, with no external charting library, relying instead on raw SVG elements like `<circle>`. The data is entirely programmatic, with no external dataset.

Jan 17, 2020

Loading thumbnail…

Stylized Bar Chart

This example visualizes the top 10 most populous countries using a horizontal bar chart, with the x-axis representing population and the y-axis listing country names. The chart is rendered with React and SVG, using D3’s `scaleBand` and `scaleLinear` to map data, and custom components for axes and marks. It loads data from the United Nations World Population Prospects 2019 via D3’s `csv` function, and formats population values using D3’s `format` with SI prefixes.

Jan 17, 2020