aritra420

@aritra420·5 public vizzes

Fork of Bowl of Fruit - General Update Pattern

A row of fruit icons demonstrates the D3 general update pattern, cycling through adding, removing, and modifying apples and lemons over timed intervals. The visualization uses SVG circles and text labels, with `selection.enter()`, `merge()`, and `exit()` to handle data joins, and `transition().duration(1000)` for smooth color and radius changes. D3 ordinal scales map fruit types to fill colors and radii, while `setTimeout` triggers sequential data updates.

Jun 10, 2021

Loading thumbnail…

Bowl Of Fruit - General Update Pattern

Five circles representing apples transition into and out of a bowl-shaped scatterplot using D3's general update pattern. The visualization demonstrates enter, update, and exit selections with a color scale for fruit types and a radius scale for size. D3 v5's `data()` join, `merge()`, and chained `transition().duration()` animations handle circle appearance, fruit replacement from apple to lemon, and removals at timed intervals.

Jun 10, 2021

Loading thumbnail…

World Population by Year

An area chart shows global population growth from 1960 to 2015. D3.js v6 loads CSV data, maps years to a time scale, and populations to a linear scale. The `d3.area` generator with `curveBasis` renders a smooth filled path. SVG axes include formatted tick labels and gridlines. Data is fetched via `d3.csv` from a VizHub dataset.

Jun 10, 2021

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of country populations, loading data from a CSV file that lists population figures for ten countries. The chart uses d3.csv to parse the data, then multiplies each population value by 1000 before rendering. The SVG chart is built by appending rectangle elements to a predefined 960×500 SVG container using d3.select and data joins. A linear scale is created with d3.scaleLinear, though the rectangles are currently fixed at 300×300 pixels, meaning the visualization is incomplete and does not yet encode the data values into visual dimensions.

Jun 10, 2021

Loading thumbnail…

Cars Report

This example demonstrates the basic setup of a VizHub project with a single-page “Cars Report” interface. The page displays a large, centered text message, “Hello Aritra!”, using D3’s `select` function to target the `#message` div. The code imports a local ES6 module, `message.js`, that exports the text string, and applies styling from `styles.css`. D3 is loaded via UNPKG, and the project structure shows how to combine external library imports with local module dependencies.

Jun 6, 2021