White Hat Bar Chart

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

Rravularasesh3102@gmail.com

act8_task2

This horizontal stacked bar chart visualizes the proportional distribution of movie ratings across genres, with each bar divided into colored segments for action, comedy, drama, thriller, and horror. Built with D3 v7 and rendered as SVG, the chart uses d3.stack(), d3.scaleBand(), and d3.scaleLinear() to position segments, while d3.axisBottom with gridlines and custom tooltips display exact percentages on hover. Data comes from a static CSV file loaded locally.

Marks and Channels

This bar chart displays the types of movies released in a particular year, using horizontal bars to compare counts across categories. The visualization loads CSV data from a GitHub gist, parsing numeric year values, and renders the top 20 records as an SVG. Built with React and D3 v5, the chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and maps each movie type to a filled rectangle whose length encodes the year’s value. The chart includes custom axes and grid lines drawn with SVG elements.

Hharika-1929

Activity6_Q2(3)

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar representing the percentage of films falling into rating levels from “Below 5.0” to “Above 8.5.” The visualization uses d3.stack and d3.scaleBand to structure the data, while d3.scaleOrdinal assigns colors from d3.schemeCategory10. Hovering over a bar segment triggers a tooltip displaying the exact percentage via d3.select and style opacity changes. The data comes from movie.csv, rendered as SVG elements with axes and labels styled through external CSS.

Ppmanoj13053@gmail.com

Activity6_Task2

This is a stacked horizontal bar chart showing the percentage distribution of IMDb movie ratings across six genres, with ratings grouped into five categories from "below 5.0" to "above 8.5." The visualization uses d3.svg to render four-chart series with d3.stack for the stacked bars, d3.scaleOrdinal for color mapping, and d3.scaleBand for categorical positioning. Interactive tooltips appear on hover using D3 event handlers, displaying the exact percentage for each genre-rating combination. Data comes from a local CSV file containing proportional values per genre.

JJhansi Balla

Tutorial2

This stacked bar chart shows the percentage distribution of five movie rating levels across six genres, revealing how genre impacts audience ratings. Each bar segment represents a rating category, with total percentage normalized to 100%. The visualization uses D3 v7 with SVG rendering and d3.stack() to create the stacked layout, d3.scaleOrdinal() for color mapping, and d3.scaleBand() for the categorical y-axis. Interactive tooltips appear on hover, displaying exact percentages via d3.select() and mouse event handlers. The data comes from a CSV file containing aggregated rating proportions for each genre.

Mmanohar varma

activity 7.2

This stacked bar chart visualizes how movie ratings are distributed across genres, with each bar segment representing the proportion of films falling into rating brackets from below 5.0 to above 8.5. Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses d3.stack to generate the stacked data, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for positioning. Data comes from a CSV file, and the SVG rendering includes a custom legend and axis labels.

Rrushithareddyy

Rravularasesh3102@gmail.com

act8_task2

This visualization presents a horizontal stacked bar chart showing the distribution of movie ratings across six genres, from Documentary to Action. The chart uses D3.js v5 with SVG rendering, employing a band scale for genres and a linear scale for percentage values. Interactive tooltips display exact percentages on hover. The code demonstrates D3's stack, scaleOrdinal, and axisBottom APIs, along with custom styling via the Yanone Kaffeesatz font.