Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
NNikitha123171
Last edited Mar 11, 2023
Created on Mar 11, 2023
Forked from HTML Starter

This example shows a horizontal bar chart of the top 15 movies from an IMDB dataset, displaying their Meta scores. The React app loads CSV data with d3.csv, then uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. It renders SVG rectangles for each bar, with axes built manually using d3.ticks and tick labels drawn as SVG text elements.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This example shows a horizontal bar chart of the top 15 movies by Meta score, displaying each film’s title along the y-axis and its score along the x-axis. The visualization uses React for component state and rendering, with D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `max` functions to load and scale data from a GitHub-hosted CSV. SVG rects are drawn inside a transformed group, with custom tick labels and gridlines generated manually rather than via D3 axes. The data loads asynchronously and defaults to a "Loading..." message until ready.

NNikitha123171
85% 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
85% match
Loading thumbnail…

Untitled

This example displays a bar chart of anime titles plotted against their ratings, showing the top 15 entries from a CSV dataset. The chart uses D3.js v7 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and D3’s `d3.csv` to load the external data. The visualization is embedded in a React-styled HTML page with CSS styling for layout and typography.

Hharoldle
84% match
Loading thumbnail…

Rendering Marks and Channels with React & D3

This example shows the IMDB ratings of the top 15 movies by number of votes as a horizontal bar chart. The visualization uses React to manage state and render SVG elements, while D3.js provides the scale functions (`scaleBand`, `scaleLinear`) and data loading via `d3.csv`. The bars encode the vote count through their width, with axis ticks and labels generated manually. Movie titles appear on the y-axis, and the data comes from a GitHub-hosted CSV file fetched asynchronously.

Ssiddu7147
83% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 15 movies by their Metascore, using React to manage the component state and D3 version 5 for data processing and scales. It loads a CSV file from a GitHub Gist, parses the numeric score values, and renders the bars as SVG rectangles. The code uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to handle data loading, axis positioning, and scaling, with React’s `useState` and `useEffect` to fetch and store the data before rendering.

TTejaswicmandava
81% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays the top 20 movies from an IMDB dataset as a horizontal bar chart, where bar length encodes movie rank and each bar is labeled with its numeric rank. Built with React for component state and rendering, it uses D3 v5 APIs such as `csv` for data loading, `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and manual SVG elements for axes and grid lines. The chart updates reactively after the CSV is fetched asynchronously.

Nnsatyaprakash22
81% match
Loading thumbnail…

ICE-6 Bar Graph

This bar graph displays the top ten IMDB-rated movies, plotting each movie’s rating along a horizontal scale. The visualization uses React for component management and D3 v5 for data loading and scales, rendering as an SVG. Movie titles appear on the y-axis using a band scale, while ratings map to bar widths via a linear scale, with red gridlines and tick labels generated from the x-scale. Data is fetched as CSV from a GitHub gist, and the graph updates after loading.

Yyamunaunt
81% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows the top 15 movies by metascore as a horizontal bar chart, with each bar’s length encoding the numeric score and the movie title on the y-axis. The visualization uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks with `scaleBand` and `scaleLinear` for positions. Grid lines and tick labels are drawn manually from `xScale.ticks()`, while D3’s `max` and `format` handle scaling and number display. The code imports D3 v5 utilities like `select`, `axisLeft`, and `axisBottom` but does not use them in the final render.

TTejaswicmandava
80% match