Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

This horizontal bar chart visualizes the number of births across ten U.S. states, using a viridis color scale to encode magnitude. The chart displays the data as animated bars that grow from zero to their final width, with a color gradient legend beneath. Built with D3 v6, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `interpolateViridis` for coloring. Hovering over a bar triggers a tooltip showing the state name and exact birth count. The underlying data comes from a CSV file containing state names and their corresponding birth statistics.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Bar Chart - ICE 6

This bar chart visualizes birth counts for ten U.S. states. The bars are rendered as SVG rectangles, colored with a viridis color scale based on the birth value, and animated to grow to their final width over one second. A linear gradient, defined in the SVG defs, covers the bars with a pink-to-black fill. The chart uses D3 v6 modules like `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `interpolateViridis`. Data is loaded from `data.csv` asynchronously. Hovering over a bar displays a tooltip with the state name and birth count.

NNandini Maddula

89% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes birth rate trends for U.S. states, comparing 2017 values on the x-axis against 2018 values on the y-axis, with each state represented as a green dot. The visualization uses D3.js v6 to load CSV data from a GitHub gist, parse it, and render an SVG chart with labeled axes. The code implements linear scales with `d3.scaleLinear`, draws axes via `d3.axisBottom` and `d3.axisLeft`, and creates circles with `append('circle')`. Interactive mouseover events log state-specific data to the console.

NNandini Maddula

87% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a bar chart visualization of population counts for several U.S. states, using a simple dataset of state names and numerical values. The rendering is built with React for component structure and D3.js (v5) for data binding and scale creation, while the visual marks are drawn as SVG rectangles. The chart displays each state’s value as a horizontal bar, with the length of each bar proportional to the population figure. The code uses D3’s `scaleLinear` to map data values to pixel widths, and React manages the dynamic rendering of the bars based on the imported CSV data.

NNandini Maddula

85% match

Loading thumbnail…

Fork of HTML Starter

A horizontal bar chart displays population figures for ten countries in the year 2000, using yellow bars with green tick labels on a red axis grid. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles through reusable components. Axis formatting uses `d3.format` to abbreviate large numbers, and tooltips appear via SVG `<title>` elements.

Ssahithya.voleti@gmail.com

82% match

Loading thumbnail…

Fork of HTML Starter

This example shows a horizontal bar chart of population data for 20 countries from 2010, using React with D3 v5 for scales and axes. It loads CSV data via `d3.csv` and renders SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The chart includes formatted tick labels using `d3.format` and displays a custom tooltip on each bar through SVG `<title>` elements. The visualization demonstrates a basic data-loading workflow with `useEffect` and `useState`.

Ssahithya.voleti@gmail.com

80% match

Loading thumbnail…

Fork of HTML Starter

A bar chart displays national-level data from a CSV dataset, filtered to include all years for the "National" level. The visualization uses D3.js to create an SVG rendering, with a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles filled with steelblue, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded asynchronously via `d3.csv` from a GitHub gist URL.

Pprathyusha-reddy-arch

79% match

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This is a horizontal bar chart of the running total of US states admitted to the Union from 1884 to 2010. The visualization uses React for rendering, with D3.js v5's `scaleLinear` and `scaleBand` functions to map years to bar widths and states to vertical positions. Data comes from a CSV file and is displayed with a tooltip showing the year value on hover. The chart uses a stylized layout with a Poppins font and custom colors.

YYongbobloomington

79% match

Loading thumbnail…

Fork of HTML Starter

This interactive bar chart visualizes the distribution of tree species from a CSV dataset, displaying the count of each species alongside tooltips that reveal average height and circumference. Built with D3 v7, the visualization employs `d3.csv` for data loading, `d3.rollups` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars animate upward on load, use a green sequential color scale, and respond to hover with opacity changes. The SVG rendering includes rotated x-axis labels and a styled title.

Aanirudhrao345@gmail.com

79% match