Fork of Histogram

100%

Fork of Histogram

✓ Published0🌍 Public

Last edited Apr 12, 2021

Created on Apr 12, 2021

This interactive histogram explores GDP per capita across countries and years using a React-based visualization built with D3 v5. A dropdown menu selects which country’s data to display, while a numeric input controls the number of bins in the histogram. The chart shows the distribution of GDP values as animated bars with tooltips revealing class ranges and counts. The visualization uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG bars with transitions.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of GDP per capita data across countries from 1960 to 2019, allowing users to switch between data columns or adjust the number of bins via a dropdown menu and numeric input. Built with React and D3 v5, it uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG bars with smooth transitions, while tooltips reveal bin ranges and frequencies on hover.

TTracey

94% match

Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of numerical weather measurements, such as temperature and humidity, from a San Francisco dataset. A dropdown menu lets users select the data column to visualize, while a numeric input controls the number of bins. Built with React and D3 v5, the chart uses `d3.histogram` to bin values and renders bars as SVG with animated transitions. Hovering over a bar highlights it and reveals a tooltip with the bin range and absolute frequency.

PPrincEddy

80% match

Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23

78% 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

78% match

Loading thumbnail…

Fork of Histogram

This interactive histogram visualizes the distribution of price data from a CSV file hosted on GitHub. The chart is rendered as SVG and automatically resizes with the browser window. The code uses `d3.histogram()` to bin the numeric values, `d3.scaleLinear()` for the x and y axes, and `d3.csv()` to load the dataset. Bars are drawn with SVG `rect` elements, colored steelblue, with a debounced resize handler that rebuilds the visualization on window changes.

RRavi Teja Bonam

78% match

Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani

78% match

Loading thumbnail…

Untitled

This example shows GDP per capita for a selection of countries as a bar chart. Bars initially render in the order they appear in the data, with a transition animating their height on load. Users can hover over bars to highlight them in orange, and a checkbox below the chart sorts the bars in descending order by value. The visualization is built with React and D3 v4, using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering to SVG with mouseover event handlers.

Ppriyankab23

77% match

Loading thumbnail…

Fork of data visulization

This bar chart displays the populations of 335 country codes, where each bar's length corresponds to the population value. The visualization uses D3.js v6 within a React framework to render the data as SVG. The code loads data from a CSV file, scales the population values (multiplied by 1000), and uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Axis labels are generated using `axisLeft` and `axisBottom`, while the bars themselves are appended as SVG rectangles.

HHarsh Patel

77% match