ICE-6 Q1

100%

✓ Published0🌍 Public

Last edited Mar 6, 2023

Created on Mar 6, 2023

This stacked bar chart shows the distribution of cocoa percentages across chocolate companies, with each bar representing a company and colored segments showing the proportion of ratings within different percentage bands. The visualization uses d3.csv to load data and d3.stack to compute stacked segments, with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Hover interactions trigger tooltips revealing exact percentage values via d3.format, while a legend maps colors to rating categories. The SVG rendering uses explicit margin-based layout and custom styling from the linked stylesheet.

AI-generated description

The impact of genre on movie ratings

This stacked bar chart gives the percentage of each rating level within different movie genres. The aim is to show the impact of genre on movie ratings. When the mouse hovers over each bar, you can see pop-ups of accurate percentage of each rating level within each genre. Total percentage is 1, representing 100%.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This bar chart displays the cocoa percentage for various chocolate companies, ordered along the y-axis with horizontal bars extending to represent each value. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleLinear` and `scaleBand` to map the data from the CSV file. Interactive tooltips appear on mouseover, and the bars are colored brown with a darkening effect on hover. The chart includes axis labels and a title, all rendered within a 960×500 SVG canvas.

117761A04F1

93% match

Loading thumbnail…

Scatterplot Chocolate Data

This scatterplot visualizes chocolate data, plotting the count of ingredients against cocoa percentage. Each brown, semi-transparent circle represents a chocolate bar, with its position determined by these two variables. The visualization is built using D3 version 6, leveraging functions like `csv` for data loading, `scaleLinear` for scaling axes, and `axisLeft` and `axisBottom` for generating the axes. The plot renders as an SVG, sized to fill the browser window, and uses data from a raw CSV file hosted on GitHub.

LLeah Mitchell

76% match

Loading thumbnail…

ICE-6

This visualization displays the top 20 companies by value using a horizontal bar chart, with company names on the y-axis and numerical values on the x-axis. It loads data from a CSV file via `d3.csv` and renders SVG elements using React. The chart leverages `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with manually drawn tick lines and labels. Data is transformed with a row function that ensures value fields are parsed correctly before rendering red rectangular bars.

RRupeshGandham

74% match

Loading thumbnail…

D3 Scatter Plot of Flavors Of Cocoa showing CocaoPercent (X) vs. Rating (Y)

A D3 scatter plot visualizes the relationship between cocoa percentage and flavor rating for chocolate bars, with each circle representing a sample. The x-axis maps the cocoa percentage while the y-axis shows the ratings, revealing potential correlations. Built with d3.v6, the code uses d3.csv for data loading, d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.axisLeft/axisBottom for rendering. Data comes from the FlavorsOfCacao.csv dataset, rendered as SVG circles sized with a fixed radius of five pixels.

TT-Reiser

74% match

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA

73% match

Loading thumbnail…

ICE - 7 Area Chart for Choclate Sales

This area chart visualizes chocolate sales over time, using a smooth, basis-curved line to show the trend and a filled area beneath it to emphasize magnitude. Data is loaded from a CSV file, with the year parsed as a date and sales as a numeric value. The visualization is built with D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` and `d3.line` with `d3.curveBasis` for the chart marks, and SVG for rendering.

RRahulChaitu999

73% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

73% match

Loading thumbnail…

ICE-6 Marks and Channels

A horizontal bar chart ranks the top ten food-producing countries by million tons, using bar length to encode quantities and the y-axis for country names. Filtered from a CSV file of global food production data, the visualization uses React for the user interface and a D3 SVG rendering pipeline, with `scaleBand` for categorical axes and `scaleLinear` for the quantitative scale.

Bbharathsivakumar07

73% match