Skip to main content
SimilarExport ZIP
100%

Plot

✓ Published0🌍 Public
Eendlesstory
Last edited Jan 31, 2021
Created on Jan 31, 2021
Forked from HTML Starter

This visualization shows the degree distribution of nodes in a large citation network, plotted as a histogram with a logarithmic y-axis. Users can adjust the number of bins via an input field, which rebuilds the histogram in real time using d3.histogram and d3.scaleLinear. The plot supports zooming and panning through d3.zoom. Data is loaded as a binary buffer, parsed with Uint32Array, and rendered as SVG rectangles. The code uses d3.axisBottom, d3.axisLeft, and d3.format to display clean, ticked axes over a light gray background.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Plot

This interactive scatter plot visualizes a downsampled subset of citation network data, with each point representing a patent edge across multiple temporal slices. Colors encode different data files, and opacity highlights the selected category while dimming others. Built with React and D3 v5, the visualization uses `Promise.all` with `d3.text` to load CSV data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeCategory10` for color mapping, and `d3.zoom` for panning and zooming. SVG rendering includes custom axes, gridlines, and interactive legend ticks.

Eendlesstory
75% match
Loading thumbnail…

Untitled

This example visualizes the distribution of a single numeric variable using a histogram with 70 bins. The code loads data from a CSV file, applies d3.histogram to compute bin counts, and renders bars with d3.scaleLinear axes. Bars below a threshold of 140 are colored orange, while others are teal, with a dashed line and label marking the split. The visualization is built with d3.v4, rendered as SVG within a React framework, and uses d3.axisBottom and d3.axisLeft for the axes.

Aansnejib2468
74% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of a dataset using interactive bars, rendered with React and D3. It shows the frequency of data points across numeric bins, with hover effects highlighting individual bars. The code uses `d3.histogram` to compute bin ranges and `d3.scaleLinear` for positioning, while SVG paths are generated via `d3.area` for the bar shapes. The chart dynamically updates based on user-selected bin counts, demonstrating a reusable React component pattern. The underlying data is random-generated, and the styling relies on plain CSS defined in the linked stylesheet.

RRiya Mathur
74% match
Loading thumbnail…

Plot

This scatter plot visualizes the relationship between X and Y values across multiple datasets. The visualization uses color coding to distinguish different datasets, with circles rendered at low opacity to reveal overlapping points. Users can click a legend item to highlight a specific dataset's points at higher opacity, and double-click to reset the view. The plot also supports zooming via the d3.zoom API. Data is loaded from CSV files and rendered as SVG circles using D3 v5 within a React framework. The axes include gridlines and formatted tick labels.

Eendlesstory
72% match
Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of one numeric variable using data loaded from a CSV file. Built with D3 v7, it renders bars as SVG rectangles, with the x-axis scaled linearly and the y-axis representing bin counts. The chart updates responsively on window resize, recalculating the histogram with 40 thresholds to accommodate the new width. Data is fetched from the `data_to_viz` GitHub repository.

Aarjun-lab663
71% match
Loading thumbnail…

Untitled

This example shows the distributions of two variables as overlaid histograms, enabling visual comparison of their frequency shapes. The code uses d3.csv to load a dataset, then d3.histogram with 40 bins to compute counts per range for each variable. Bars are rendered as SVG rectangles with semi-transparent fills, while d3.scaleLinear and d3.axisBottom/axisLeft construct the axes. A handmade legend uses circles and text to distinguish the two series.

Zzoniyac
71% match
Loading thumbnail…

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.

AAbhishek Kumar
71% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Mmbostock
68% match