Mallikarjun362

@Mallikarjun362·4 public vizzes

Fork of Histogram

This example shows a histogram of wine prices from a CSV dataset, using bars to display the distribution of the numeric price variable across 40 bins. The visualization updates responsively when the window is resized. The code uses d3.histogram() to compute binning, d3.scaleLinear() for both axes, and d3.axisBottom() and d3.axisLeft() for tick marks. SVG rectangles are appended and transformed to represent each bin, with a debounced resize listener triggering redraws of the histogram.

Jan 14, 2022

Loading thumbnail…

hellod3-1

This example demonstrates how to begin using D3 version 7 by loading a CSV file of country populations and preparing to render them as SVG rectangles. The code uses `d3.csv` to fetch data, `d3.scaleLinear` to map population values to pixel widths, and `d3.max` to determine the scale domain. Population figures are multiplied by 1000 before rendering. The visualization is incomplete—the bar chart is not fully drawn—but it serves as a minimal starting point for learning D3's data-binding workflow with `select` and `selectAll`.

Jan 14, 2022

Loading thumbnail…

D3 bar charts

This example displays a static SVG bar chart of population counts for ten countries, sourced from a CSV file. The chart uses D3 v7 to select the SVG element and read its width and height attributes, preparing the coordinate space. While the code imports `select` and `csv` from D3, the data-loading call is commented out, so the bars themselves are not rendered to the screen. The visualization demonstrates the setup phase for building a bar chart with D3's SVG-based rendering.

Jan 14, 2022

Loading thumbnail…

A face with D3.js

A yellow circle with facial features animates as a smiling face using D3.js v7 in React. The code selects an SVG, sets a red background, and builds a face from circles, a path arc for the mouth, and rectangles for eyebrows. Transitions sequence the mouth shrinking and growing, eyebrows lifting, and eye brows thickening, while d3.arc generates the mouth’s arc path. The animation runs on page load with chained transition durations.

Jan 14, 2022