slt19933

@slt19933·4 public vizzes

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020, using horizontal bars sorted by population size from the United Nations World Population Prospects 2019 dataset. The visualization is built with React and D3 v5, rendering SVG elements through components like AxisBottom, AxisLeft, and Marks. D3’s `scaleBand` and `scaleLinear` position the bars and axes, while `csv` loads the data and `format` creates the abbreviated population labels, with a Poppins font and muted color palette for styling.

Oct 16, 2020

Loading thumbnail…

React Starter

This example displays a large, centered “Hello React!” message in a web page. It demonstrates the basic setup for building a React application with JSX and rendering components. The code imports `React` and `ReactDOM`, defines a simple functional `App` component that returns a `div` with the class `message`, and uses `ReactDOM.render` to mount it into a root DOM element. The page loads React and ReactDOM from CDN scripts and uses a compiled `bundle.js` file to run the JavaScript.

Oct 16, 2020

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” as a full-screen message. The app uses a single functional component defined in `index.js`, which is mounted into a `#root` div via `ReactDOM.render`. The styling is applied through a CSS class in `index.html`, and the page loads React and ReactDOM from UMD builds served by unpkg. It demonstrates the basic setup of a React project without any additional libraries or data processing.

Oct 16, 2020

Loading thumbnail…

Let's make a face with D3.js

This example shows a simple smiley face drawn with D3.js v5, using SVG circles for the head and eyes and an arc-generated path for the mouth. The face is constructed with hardcoded dimensions and positions, including an eye spacing of 100 pixels and a mouth arc spanning from π/2 to 3π/2. The code imports `select` and `arc` from the D3 library, appends SVG elements to a 960×500 canvas, and uses the `arc` generator with inner and outer radii to create the mouth shape. No external data is loaded; the design is purely programmatic.

Oct 16, 2020