Skip to main content
Log in
W

whyamn

@whyamn·7 public vizzes

Loading thumbnail…

Making a Bar Chart

The chart displays the population of the ten most populous countries as horizontal bars, sorted by value. Built with D3 v5, it loads data from a CSV file and renders the visualization as SVG. The code uses `d3.scaleLinear` and `d3.scaleBand` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and `d3.format` to abbreviate population numbers with a custom replacement of 'G' with 'B' for billions.

Nov 4, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries for 2020 using data from the United Nations World Population Prospects 2019. Rendered as a static SVG via React, horizontal bars extend from the left axis, with a bottom axis formatted using d3's `format` function to abbreviate large numbers. The visualization is built with d3 `scaleBand` and `scaleLinear` for positioning, and the React components `AxisBottom`, `AxisLeft`, and `Marks` generate the ticks and rectangles. Hovering over a bar reveals the exact population count via an SVG `<title>` tooltip.

Nov 4, 2020
Loading thumbnail…

Stylized Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, with bars rendered in a teal color and labeled axes using the Poppins font. The visualization loads UN population data from a CSV file via `d3.csv`, processes the values, and scales the bars using D3’s `scaleBand` and `scaleLinear`. It is built with React components for the axes and marks, styling ticks and labels through CSS classes. The chart uses D3 v5 and React 16.9, with axes generated from `xScale.ticks()` and `yScale.domain()`.

Nov 4, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries for 2020 using data from the United Nations World Population Prospects 2019. Rendered as a static SVG via React, horizontal bars extend from the left axis, with a bottom axis formatted using d3's `format` function to abbreviate large numbers. The visualization is built with d3 `scaleBand` and `scaleLinear` for positioning, and the React components `AxisBottom`, `AxisLeft`, and `Marks` generate the ticks and rectangles. Hovering over a bar reveals the exact population count via an SVG `<title>` tooltip.

Nov 4, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Nov 4, 2020
Loading thumbnail…

Untitled

This example shows a minimal React application that renders a single HTML page using CSS and JavaScript. It sets up a basic project structure with an `index.html` and `index.js`, demonstrating the foundational setup for a React-based data visualization. The code uses React’s component rendering to display content in the browser, with no external data sources or complex visualization libraries like D3 or Three.js. It serves as a bare-bones starter template for building interactive web visualizations within the React framework.

Nov 3, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” in large, centered type, with a JavaScript console message that logs “Hello JavaScript!” when the page loads. It demonstrates the basic structure of an HTML document combining CSS for styling and JavaScript for interactivity. The code uses standard HTML elements like `<style>` and `<script>`, and the JavaScript relies on the browser’s built-in `console.log` API. It serves as a bare-bones starter template for web-based visualizations, with no external data sources or rendering libraries.

Nov 3, 2020