Skip to main content
SimilarExport ZIP
100%

IN CLASS EXERCISE 6

✓ Published0🌍 Public
SSaahithi49
Last edited Jul 6, 2022
Created on Jul 6, 2022
Forked from Hello VizHub

This example displays a bar chart of the number of movies available on various OTT platforms, using data loaded from a CSV file via `d3.csv`. The visualization uses React for component structure and D3 v4 for SVG rendering, with bars that animate in on load using a `transition` with `d3.easeLinear`. Interactive mouseover and mouseout handlers adjust bar opacity, size, and temporarily display a value label, demonstrating dynamic data exploration.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This animated bar chart compares the number of movies available on various OTT platforms, using data from a CSV file. Rendered with D3 v4 as SVG, the chart features a transition animation where bars grow sequentially on load. Interactive mouseover events highlight a bar and append a text label showing its exact value, while mouseout removes the label and resets the bar’s appearance. Axes are scaled with `d3.scaleBand` and `d3.scaleLinear`, and the chart includes a title and axis labels.

SSaahithi49
84% match
Loading thumbnail…

Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

This horizontal bar chart visualizes the number of users of OTT platforms, sourced from a CSV file. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. React manages the data state and updates the visualization. The chart displays the first 12 rows of data, with axis ticks and labels generated via D3's axis functions.

TTulluripallavi
76% match
Loading thumbnail…

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

This example visualizes the users of OTT platforms as a horizontal bar chart, with each bar’s length encoding the population value. The code uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks using JSX. D3 scales (`scaleBand`, `scaleLinear`) position the bars, while `xScale.ticks()` generates grid lines and tick labels. The data is sourced from a GitHub gist and limited to the first twelve rows.

CCherukuriMilind
76% 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
75% match
Loading thumbnail…

Fork of Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

A bar chart displaying the number of users for various OTT platforms, ranked by population count. The chart uses React to manage component state and D3.js (v5) for data loading and scale generation. Data is fetched from a CSV file using `d3.csv`, with horizontal bars rendered as SVG rectangles scaled by `d3.scaleLinear`. The visualization includes gridlines and labels generated through D3's tick methods.

TTulluripallavi
75% match
Loading thumbnail…

TASK.8_TUTORIAL-2_Sahith

This stacked bar chart demonstrates how movie ratings vary across genres, revealing that documentaries and animations achieve higher proportions of excellent ratings while action films are heavily skewed towards poor ones. The visualization loads CSV data and uses D3.js v7 APIs including `d3.stack`, `d3.csv`, `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG. Interactive tooltips appear on hover, displaying the precise percentage for each rating category within a genre.

Mmanisahiths54321@gmail.com
75% match
Loading thumbnail…

IN CLASS EXERCISE-5

This example shows a data summary for a CSV file of lipstick sales. It displays the file size, row count, and column count in large text, alongside a static SVG image. The code uses D3 v7’s `d3.csv` to load the remote data and `d3.csvFormat` to calculate the data’s size in kilobytes, then updates the page’s `pre` element with the summary. Styling is applied via embedded CSS.

SSaahithi49
75% match
Loading thumbnail…

DV Assignment 2

This example shows a horizontal bar chart of application names against their number of users, sourced from a CSV file, with data limited to the first 50 records. The visualization uses React components and d3.scaleBand and d3.scaleLinear for scaling, while d3.max and d3.format handle data aggregation and tick label formatting. Bars are rendered as SVG rects with tooltips, and custom AxisBottom and AxisLeft components place ticks and labels. The CSV is loaded asynchronously with d3.csv, and styling is applied via CSS classes for ticks and marks.

NNagateja99
75% match