AtrayeeDeb

@AtrayeeDeb·6 public vizzes

Fork of Bowl of Fruit - Click Events

A bowl of fruit updates dynamically as apples and lemons appear and change through click-driven transitions. The example uses D3 v5 with ES6 modules, drawing SVG circles scaled by fruit type through ordinal color and radius scales. Data joins animate enter, update, and exit selections with `transition().duration(1000)`, smoothly resizing radii as the dataset changes via scheduled `setTimeout` calls.

May 16, 2021

Loading thumbnail…

Bowl of Fruit

Five fruit circles represent apples and lemons in an animated bowl. The visualization uses a D3 v5 data join to update the SVG, with fruits appearing, disappearing, and changing type over timed intervals. A scaleOrdinal color scale maps apples to blue and lemons to yellow, while another scale assigns radii of 50 and 30 pixels. The code transitions the circle radius property over one second for entering and exiting elements.

May 16, 2021

Loading thumbnail…

Customizing axes

This example demonstrates how to customize axes in a D3.js bar chart showing population data for the world’s most populous countries. The chart displays horizontal bars with a linear x-axis for population values and a categorical y-axis for country names, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The SVG rendering applies steelblue rectangles with custom axis formatting, and the data is loaded from a CSV file using `csv` and parsed with `max`.

May 2, 2021

Loading thumbnail…

Data Utilization - Bar chart

This bar chart visualizes population data for the ten most populous countries, with horizontal bars ordered vertically by country name and scaled proportionally to population values. The visualization demonstrates a static SVG rendering approach using D3 v6, employing `csv` to load data from `data.csv`, `scaleLinear` and `scaleBand` for axes, and `axisLeft`/`axisBottom` to generate the chart’s scales. Rectangles are appended to an SVG group with margins applied, showing population in thousands with bars styled in steelblue.

May 1, 2021

Loading thumbnail…

Face!!

A yellow circle with black eyes, animated rectangular eyebrows, and an arc-shaped mouth forms a simple face on a gray background. The eyebrows slide upward and then return to their original position using chained D3 transitions with a two-second duration. The visualization is built with D3 v6, using `select`, `attr`, and `transition` methods to manipulate SVG elements, while the mouth is drawn with the `arc` generator.

Apr 30, 2021

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—grouped and transformed within a fixed 960×500 viewport. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width`, along with CSS rules targeting the `.lines` class, style the geometry. The code uses native SVG elements and the `transform` attribute for scaling, translation, and grouping, with no external JavaScript libraries. Static data is hardcoded directly in the markup, and rendering relies entirely on the browser’s SVG support.

Apr 28, 2021