Skip to main content
SimilarExport ZIP
100%

Fork of WeedPrices in 2011 fork

✓ Published0🌍 Public
TTarun Kumar Bosupally
Last edited Mar 21, 2024
Created on Mar 21, 2024

This example shows a bar chart of the counts of entities from a dataset of U.S. senators, with each bar representing a distinct entity and its height mapped to the count. The visualization first displays the raw categorical distribution, then uses D3.js v7 to fetch the CSV data via `d3.csv` from a GitHub repository. The SVG rendering uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes added via `d3.axisBottom` and `d3.axisLeft`, while labels are manually appended as SVG text elements. The chart is drawn in a React-compatible HTML page, though the script itself is plain JavaScript with D3.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

WeedPrices in 2011 fork

This bar chart displays the count of senators per entity from a dataset loaded via D3’s `d3.csv`. The visualization uses an SVG canvas with margins, scales, and axes created through `d3.scaleBand` and `d3.scaleLinear`. Bars are drawn as `rect` elements filled steelblue, with rotated x-axis labels for readability. Data is fetched from a remote CSV hosted on GitHub, and the chart includes labeled axes for entity and count. The rendering relies on D3 v7’s selection and axis APIs.

TTarun Kumar Bosupally
93% match
Loading thumbnail…

Fork of Fork of ICE-6 Bar Graph

This visualization shows Amazon prices for basic monthly service across different states, using a horizontal bar chart to compare costs. The chart displays twelve states ranked by their cost per month, with bars extending from a shared origin. Built with React and D3 v5, the code uses `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. React state manages the asynchronous data loading, while SVG rectangles render the bars with gridlines and axis labels generated via D3’s tick functions.

MMgk1255
74% match
Loading thumbnail…

Fork of Fork of ICE-6 Bar Graph

This visualization shows Amazon prices for basic monthly service across different states, using a horizontal bar chart to compare costs. The chart displays twelve states ranked by their cost per month, with bars extending from a shared origin. Built with React and D3 v5, the code uses `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. React state manages the asynchronous data loading, while SVG rectangles render the bars with gridlines and axis labels generated via D3’s tick functions.

MMgk1255
73% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays the number of noncitizen removals (labeled "Amazon Prices") across the top 12 years in different states, sourced from a CSV file of immigrant data. Built with React and D3 v5, it uses `scaleBand` for the categorical year axis and `scaleLinear` for the quantitative values, rendering SVG rectangles and axis ticks. The chart updates reactively when the CSV loads, with D3 utilities like `max` and `format` driving the scales.

TTekmal-Bhavana
72% match
Loading thumbnail…

Fork of Untitled

This bar chart displays the daily earnings of individuals, with each person’s name on the x-axis and their corresponding amount on the y-axis. The visualization uses D3 v6 to load CSV data asynchronously via `d3.csv`, then binds it to SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart is rendered as static purple bars within an SVG canvas, with axis labels positioned manually via HTML divs.

VVineela Reddy
72% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of CS416 Project_2

This visualization displays Amazon Top 50 bestselling books from 2009 to 2019, showing average user ratings and prices per year through grouped bar charts. Users select individual years via buttons to view summary statistics. The D3.js (v6) code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG rectangles, with color scales mapping rating and price values. Data is loaded asynchronously from CSV files via `d3.csv`, and two separate chart panels share the SVG canvas.

Mmz4987
72% 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
72% match
Loading thumbnail…

Fork

This horizontal bar chart displays the population of U.S. states in 2014, sourced from a Plotly-hosted CSV dataset. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values to bar lengths and state names to rows, with `axisLeft` and `axisBottom` rendering the axes. Custom tick formatting via `format('.3s')` abbreviates large numbers, while red bars and a title clarify the data. The code loads the CSV with `d3.csv`, converts population strings to numbers, and draws the chart in an SVG.

Ppavan vasamsetti
72% match