Nameeeee

Fork of Circles with D333333333

Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions of fruit-shaped circles entering, updating, and exiting an SVG bowl. It shows how circles representing apples and lemons move horizontally and resize smoothly over one-second durations. The visualization uses d3.js v5 with a modular approach, importing `scaleOrdinal` for color and radius mapping, and `select` and `range` for data binding. The `fruitBowl` function manages enter, merge, and exit selections, applying `transition().duration(1000)` to animate both `cx` and `r` attributes. Data consists of five apples initially, with dynamic updates possible through the provided functions.

Blank Canvas

A blank, rounded rectangle fills the browser window, adapting to the full viewport dimensions. The visualization is empty, showing no data or marks. It uses D3 v5's `select` to target the SVG element and sets its width and height based on `document.body.clientWidth` and `clientHeight`, then appends a single `rect` with a corner radius of 40 pixels. The page's CSS fixes the body to prevent scrolling.

Let's make a map with D3.js!

A concise D3.js map creation demonstrates how to visualize geographic data. The example renders a world map using the Natural Earth dataset, displaying countries as light green shapes with subtle black strokes against a blue sphere background. The code employs `d3.geoPath` and `d3.geoNaturalEarth1` for map projections and SVG path generation, alongside `topojson`'s feature function to convert TopoJSON data. Styling is defined in CSS, and the map is displayed within a 960x500 SVG canvas.

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations’ World Population Prospects. It shows population values on a linear scale for the x-axis and country names on a band scale for the y-axis, with axes customized using `d3.axisLeft`, `d3.axisBottom`, and tick formatting via `d3.format`. The chart is rendered as SVG, with data loaded from a CSV file using `d3.csv` and scales created with `d3.scaleLinear` and `d3.scaleBand`.

Customizing Axes

This bar chart visualizes the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It shows customized D3 axes, including formatted tick labels that convert billions to an abbreviated form. Built with D3 v5, the chart uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, with custom tick formatting, removed axis lines, and added axis labels and title. The data is loaded from a CSV file.

Let's make a face with D3.js!

A smiley face drawn with D3.js shows its eyebrows moving up and down in a looping animation. The code builds the face using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow motion is created with chained `transition` and `duration` calls that alternate between two vertical positions. The example demonstrates fundamental DOM manipulation and data-driven styling using D3 v5’s selection, arc, and transition APIs.