Skip to main content
Log in
P

pizzaonline

@pizzaonline·6 public vizzes

Loading thumbnail…

Smiley Face Part V

This example shows a classic smiley face rendered in an SVG canvas. The face is composed of a yellow background circle with a black outline, two black eyes, and a mouth that is drawn as an arc using `d3.arc`. The visualization is built using React components, with the SVG elements generated declaratively. The code defines the face’s geometry—circle radii, eye offsets, and mouth dimensions—as variables, and positions the entire face within a centered group transform. The composition relies on React’s component model, while the mouth shape is created through D3’s arc path generator.

Aug 2, 2020
Loading thumbnail…

Making a Bar Chart

This example displays the top 10 most populous countries using horizontal bars, with population values from the United Nations’ 2018 estimates. The custom D3 axes include a reformatted x-axis that abbreviates numbers like “1.4B” and grid lines. The chart loads data from a CSV file, scales it with d3.scaleLinear and d3.scaleBand, and renders SVG rectangles. Stylized with custom margins and axis labels, it uses d3.csv and d3.axisBottom/axisLeft for layout and tick generation.

Jun 8, 2020
Loading thumbnail…

Making a Bar Chart

This example displays the top 10 most populous countries using horizontal bars, with population values from the United Nations’ 2018 estimates. The custom D3 axes include a reformatted x-axis that abbreviates numbers like “1.4B” and grid lines. The chart loads data from a CSV file, scales it with d3.scaleLinear and d3.scaleBand, and renders SVG rectangles. Stylized with custom margins and axis labels, it uses d3.csv and d3.axisBottom/axisLeft for layout and tick generation.

Jun 8, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building an animated smiley face with moving eyebrows. It renders an SVG scene with a yellow circular head, eyes, and a mouth created using the `d3.arc` path generator. The eyebrows are rectangles that animate upward and downward via chained `transition.attr` calls, moving over two seconds each way. The code uses D3 v5 selections and attributes to construct and position all elements relative to a centered group.

Jun 8, 2020
Loading thumbnail…

Making a Bar Chart

This example displays the top 10 most populous countries using horizontal bars, with population values from the United Nations’ 2018 estimates. The custom D3 axes include a reformatted x-axis that abbreviates numbers like “1.4B” and grid lines. The chart loads data from a CSV file, scales it with d3.scaleLinear and d3.scaleBand, and renders SVG rectangles. Stylized with custom margins and axis labels, it uses d3.csv and d3.axisBottom/axisLeft for layout and tick generation.

Apr 13, 2020
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” centered on a web page. The code defines a functional component that returns a styled message, then uses ReactDOM’s `render` method to mount it into the root div. It imports React and ReactDOM directly, with the latter supplied through the `react-dom` package, and loads the production builds of both libraries from unpkg. No data source is involved; the element’s appearance is controlled by the `.message` CSS class, which sets a large font size and text alignment.

Apr 10, 2020