Skip to main content
SimilarExport ZIP
100%

Prasanth changes

✓ Published0🌍 Public
PPrasanth
Last edited Mar 23, 2023
Created on Mar 23, 2023

This visualization displays film scores across 20 titles, using horizontal bars ranked by game name. It shows data from a CSV file, filtering rows 190-208, with the y-axis ordered by game and the x-axis scaled to the maximum score. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes while rendering SVG rectangles for each bar, with red gridlines and tick labels generated via `xScale.ticks()`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

pooja thandra

This example shows a horizontal bar chart displaying movie ratings for the top 15 films, with labeled axes and a blue gridline for each rating tick. It loads CSV data from a GitHub gist using d3.csv, then renders SVG bars with React and D3’s scaleBand and scaleLinear for positioning. Axes are manually constructed with d3.ticks, and the chart updates through React state and useEffect after asynchronous data loading.

Ppreddythandra
73% match
Loading thumbnail…

trail 2

This visualization displays the review scores of 19 video games as a horizontal bar chart. The chart uses React with hooks like useState and useEffect to load and manage data, while D3 v5 handles the scales and SVG rendering. Data is fetched as CSV from a GitHub gist, with scores parsed as numbers and filtered via slice. The x-axis uses d3.scaleLinear, the y-axis uses d3.scaleBand, and grid lines are drawn from xScale ticks.

PPrasanth
73% match
Loading thumbnail…

Bar Chart

This bar chart displays the top 15 cricket players ranked by their match scores. Built with React and D3 v5, it uses `scaleBand` for the categorical player names on the y-axis and `scaleLinear` for the numeric score values on the x-axis. The data is loaded from a CSV file via the `csv` function, with tick formatting handled by `format`. SVG rectangles render each bar, and tooltips appear on hover using the native `<title>` element.

BBhavyaMammai
73% match
Loading thumbnail…

Bar graph-Praveen

This bar graph visualization displays cricket team wins across three years, with each team represented by a colored bar and the bar height indicating the number of wins for Year 3. The code uses D3.js v7 to load CSV data from a GitHub gist and render an SVG chart with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 to assign distinct colors to each bar. Axes include labels for "Team Name" and "Wins", with hover effects on the bars.

Ppraveennayak1702@gmail.com
71% match
Loading thumbnail…

Mahendra Gullinkala - IC6

A horizontal bar chart displays the highest individual scores for 20 cricket players, ranked by name along the y-axis and score magnitude along the x-axis. The visualization uses React to manage state and lifecycle, loading CSV data via d3.csv and parsing numeric values on input. d3.scaleBand and d3.scaleLinear map player names and scores to SVG rectangles, while gridlines and axis tick labels are generated manually using xScale.ticks() and d3’s axis formatting utilities. The chart updates reactively when data arrives, with a red vertical gridline marking each tick value.

Mmaheganesh
71% match
Loading thumbnail…

Assignment 6

A horizontal bar chart displays the top 15 movies by rank within a year, with movie titles labeled on the y-axis and rank values on the x-axis. Built with React and D3.js, the visualization loads data from a CSV file using `d3.csv`, scales axes with `d3.scaleBand` and `d3.scaleLinear`, and renders the ranking bars as SVG rectangles. Gridlines mark each tick value on the x-axis, while the axes are drawn manually without dedicated axis components.

BBaswa Sathvika Reddy
71% match
Loading thumbnail…

creating a bar chart using d3.js

This example displays a horizontal bar chart ranking films by their audience scores, using a CSV dataset with movie titles and percentages. The visualization renders as SVG elements, with the y-axis positioning film names and the x-axis scaling scores from zero to the maximum value. Built with D3 v7, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, while `csv()` loads the external data file. Rectangles are appended to a translated group, with bar widths proportional to each score.

RRaja Srinivas Nelluri
70% match
Loading thumbnail…

Fork of Student Scores Bar Chart 2

This bar chart displays student scores from a CSV file, using a horizontal layout with student names on the y-axis and score values from 0 to 100 on the x-axis. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric scale, and d3.axisLeft and d3.axisBottom to render the axes. Each rectangle’s width is proportional to the score, with a purple fill and hover effect that reduces opacity. The chart is rendered as SVG within a 960×450 pixel viewport, with margins applied to position the plot area.

Pprudhvi
70% match