Abhishek Kumar

Untitled

A bar chart visualizes a single quantitative column from a CSV dataset, displaying the distribution of values across adjustable bins. The chart uses d3.v4’s `d3.histogram` to compute bin counts from the `price` column and renders bars with `d3.bar`, colored in teal. An interactive input allows changing bin numbers, and a dropdown selects which column (from available CSV columns) to visualize. The chart is built in React, with d3 handling SVG rendering and the tooltip display.

bar chart with D3.js

This bar chart visualizes the popularity of programming languages using value data from a CSV file. Built with React and D3.js v4, it renders bars as SVG rectangles with colored fills and axis labels. The example includes interactive controls—a column selector and a bin count input—that allow users to explore data aggregation. The visualization uses D3 scales for axes and a color mapping from the dataset, with a dark blue container background for contrast.

Untitled

This interactive histogram displays the distribution of a single numeric variable (price) from a CSV dataset loaded from GitHub. Users adjust the number of bins via a numeric input, triggering a smooth animated transition of the bars. The visualization uses D3.js v5 with `d3.histogram`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to compute bin counts and render SVG rectangles. The `transition().duration(1000)` API animates updates to the y-axis and bars, while enter/exit transitions add or remove rectangles as bin count changes.

Untitled

This interactive histogram displays the distribution of a single numeric variable from a CSV dataset of prices. A slider dynamically adjusts the number of bins from 1 to 100, with smooth 1000ms transitions updating both the bar widths and the y-axis scale. The visualization uses d3.histogram to compute bin values, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for rendering scales. Bars are drawn as SVG rectangles with a teal fill, while d3’s data join pattern handles entering and exiting elements during updates.

HTML Starter

This example demonstrates a basic HTML page that uses D3.js (version 5) to render a simple SVG scene. It draws a large circle in the center of a purple-background SVG, with two additional circles layered on top at the same position, though their intended roles as eyes are not visually distinct. The code uses D3's `select` and `append` APIs to create and style the SVG elements, and the page includes an HTML "Hello HTML" text. The data source is an empty `data.csv` file, and the rendering approach is SVG.

HTML Starter

This example displays a blank, purple visualization with three concentric circles centered within an SVG element. The circles are rendered using the SVG `circle` element, with the outer circle and two inner circles all having the same radius and position, creating a single overlapping shape. The code uses d3’s `select` and `svg.append` methods to build the graphic, while the `index.html` file loads the D3 library from a CDN. The page is styled with CSS to center text at a large font size, and the rendering approach relies on SVG primitives.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using a horizontal bar layout, with population values formatted in billions and a "Population" axis label. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the population scale. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`, and the bars are rendered as SVG rectangles with tooltips showing exact values.

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries and population values, rendering bars as SVG rectangles with tooltips. The chart includes formatted axis ticks using D3’s `format` to convert G to B, axis labels, and custom styling via the Poppins font. Data is loaded asynchronously with `d3.csv` and filtered to the first ten entries.