R

ReekMajumder

@ReekMajumder·18 public vizzes

Loading thumbnail…

Untitled

This visualization shows a week of hourly temperature readings in San Francisco as a smooth line chart. The D3.js code uses `scaleTime` and `scaleLinear` to map timestamp and temperature data from a CSV file, with `d3.line` and `curveBasis` generating the curved path. The SVG rendering includes labeled axes with gridlines and a title, set against a green background with a maroon data line.

Loading thumbnail…

Bowl of Fruit - hover to select

Five apples hover in a row; mousing over one highlights it with a black outline, and clicking is disabled. The visualization demonstrates data joins and transitions using D3 v5, where apples shrink and disappear, and one apple morphs into a lemon over time. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates enter, update, and exit selections.

Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit shows five apples and lemons as colored circles that users can click to highlight with a black stroke. The visualization demonstrates animated enter, update, and exit transitions as fruits are eaten and replaced over time. Built with D3 v5, it uses ordinal scales to map fruit types to fill colors and radii, while selection joins and `transition().duration()` handle the smooth size and position animations.

Loading thumbnail…

Untitled

A bowl of fruit demonstrates the D3.js general update pattern with animated transitions. Circles represent apples and lemons, color-coded via a d3.scaleOrdinal and sized with another ordinal scale. The example renders to SVG and uses d3.transition to animate entering, updating, and exiting elements over one-second intervals. State changes—removing fruit, changing an apple to a lemon, and filtering the array—trigger the React-wrapped fruitBowl function to update the visualization dynamically.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3.js through a dynamic bowl of fruit. It shows how the enter, update, and exit phases handle changes to a data array, with apples and lemons represented as circles of different sizes and colors. The visualization uses D3's `select` and `range` functions to manage SVG elements, implementing transitions through `fruitBowl` which leverages `scaleOrdinal` for color and radius mapping. The code uses `setTimeout` to sequentially pop, replace, and filter items in the fruit array, triggering re-renders that illustrate how elements are added, modified, or removed from the SVG canvas.

Loading thumbnail…

Untitled

This example demonstrates the D3.js "general update pattern" using SVG circles to represent a dynamic bowl of fruit. The animation shows five apples cycling through phases of removal, type change, and filtering over timed intervals, with each transition smoothly interpolated via D3 transitions. The React-based code defines ordinal color and radius scales mapping fruit types to visual properties, then uses selection chaining with `.enter()`, `.merge()`, and `.exit()` methods to handle node updates. The animation runs for three seconds, sequentially highlighting enter, update, and exit behaviors within a single D3 scene.

Loading thumbnail…

World Population

This visualization shows world population trends over time as a smooth red area chart, with population on the vertical axis and year on the horizontal axis. It uses D3 v6 with SVG rendering in a React framework. The code employs `d3.csv` to load data, `scaleTime` and `scaleLinear` for axes, `d3.area` with `curveBasis` to generate the filled path, and `axisLeft` and `axisBottom` with tick formatting to display population values in billions.

Loading thumbnail…

Untitled

This example visualizes a week of hourly temperature readings in San Francisco using a smooth area chart rendered as an SVG. The chart displays temperature variation over time, with a red filled area and a darker red line, along with labeled axes for time and temperature. The code uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to map the CSV data. The `csv` method loads the data, and timestamps are parsed into `Date` objects before rendering.

Loading thumbnail…

Untitled

This scatter plot shows the relationship between vehicle weight and horsepower, using data loaded from a CSV file. Each car is represented as a semi-transparent circle, positioned on a Cartesian grid with linear scales on both axes, and surrounded by grid lines and axis labels. The visualization is built with React and rendered as an SVG using D3 v6, leveraging functions like `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart, with styling handled in CSS.

Loading thumbnail…

Untitled

This scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle representing a car from the auto-mpg dataset. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.format for axis labels, rendered as SVG. The chart includes axis labels, a title, and grid lines created via tickSize, with data loaded asynchronously from a CSV file.

Loading thumbnail…

Untitled

This example visualizes the top 10 most populous countries as a scatter plot, with country names on the y-axis and population counts on the x-axis. Built with D3 v6 in React, it uses `scaleLinear` and `scalePoint` to map data, `axisLeft` and `axisBottom` for axes, and `csv` to load the dataset. Circle marks represent each country, and the population values are multiplied by 1000 to reflect actual figures. The axis tick labels use a custom formatter to abbreviate large numbers, with "B" replacing "G" for billions.

Loading thumbnail…

Untitled

This bar chart displays the top 10 most populous countries using horizontal bars, with population values scaled linearly and countries arranged on a band scale. The visualization uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with custom tick formatting that converts large numbers to billions. The SVG renders with margins, gridlines via negative tick sizes, and axis labels, all styled through CSS. Data is loaded from a CSV file using D3's `csv` method, with population values multiplied by 1000 to reflect actual counts.

Loading thumbnail…

Untitled

This example shows a horizontal bar chart of population by country, with ten nations ranked from China’s largest population down to Mexico. The chart uses D3 v6 modules including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions. The SVG renders with a steel-blue fill for each bar, and the data is loaded from a local CSV file where population values are multiplied by 1000. Margins are applied on all sides to position the axes and bars within the 960 by 500 pixel viewport.

Loading thumbnail…

Untitled

This example shows a horizontal bar chart of population by country, with ten nations ranked from China’s largest population down to Mexico. The chart uses D3 v6 modules including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions. The SVG renders with a steel-blue fill for each bar, and the data is loaded from a local CSV file where population values are multiplied by 1000. Margins are applied on all sides to position the axes and bars within the 960 by 500 pixel viewport.

Loading thumbnail…

Untitled

A yellow face with black-outlined eyes and a smiling mouth is drawn using D3.js v6 SVG primitives within a React project. The face is centered on an SVG canvas, with circles for the eyes and an arc-generated path for the mouth. Animated eyebrows, also created with D3's arc API, transition vertically over two seconds, moving up and then back down, demonstrating the use of `transition().duration()`. The visualization showcases fundamental D3 selections, attribute manipulation, and SVG path generation through the `arc` function.

Loading thumbnail…

Untitled

A yellow circle face with black-outlined eyes, animated eyebrow rectangles, and an arc-based mouth is rendered in SVG. The eyebrows slide downward and back upward over two sequential two-second transitions using D3's `transition` method. The visualization is built with React, uses D3 v6 functions `select` and `arc`, and centers all facial features via SVG group transforms.

Loading thumbnail…

Untitled

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged within a single 960x500 viewport and scaled 1.5x. It demonstrates how CSS classes, such as `.lines` and `.lines path`, can apply stroke styles and line joins, while inline attributes like `fill` and `stroke-width` override or augment those rules. The SVG is rendered directly in HTML with React absent, relying on native SVG elements and a linked stylesheet. Colors and transform groupings illustrate visual composition without interactive behavior or external data.

Loading thumbnail…

Untitled

This example presents a simple car report as a bulleted list of vehicle models and prices. It uses a plain HTML page with an external CSS stylesheet to render the content, and JavaScript is linked but not visibly used. The list items are styled with a monospace font, and the first item is highlighted in red using the `.highlighted` class. The data is hardcoded directly in the HTML markup.