ICE 7 - Line Chart

ICE 7 - Area Chart

This area chart displays the total number of Olympic medals won by the USA from 1984 to 2020, with time on the x-axis and medal count on the y-axis. The visualization combines a smooth curved line with a filled area beneath it, using `d3.line` and `d3.area` with a `curveBasis` interpolation. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleTime` and `d3.scaleLinear`. Data is loaded from a CSV file using `d3.csv`, and the SVG is rendered with D3 v5.

93% match

ICE-7 Area Chart

This area chart shows the number of medals won by the USA over time, with the area under the curve filled in orange. The visualization uses D3 v5 to load CSV data, apply a time-based x-scale and linear y-scale, and generate the area shape with `d3.area()`. Curve smoothing is applied via `curveBasis`, and both axes include custom tick formatting and labels. The chart is rendered as an SVG, with a title and axis labels styled in red and purple.

BBhanuMotupalli

84% match

ICE7 - Scatter Plot

The visualization is an animated scatter plot of Olympic medal data, using D3.js to render colored, elliptical circles that represent countries by their gold, silver, bronze, and total medal counts. It cycles through different x-axis variables on a timer, updating the scales and axes dynamically. The plot uses D3's `csv` loader for data parsing, `scaleLinear` for axes, and custom SVG circles with hardcoded color mappings for USA, China, and Japan within a `setInterval` loop.

83% match

ICE-6 Scatter Plot

This scatter plot displays Olympic medal data, comparing each country’s total medals against its bronze medal count. Each circle’s fill color encodes the country (orange for USA, blue for China, green for Japan, black otherwise), while the circle’s `rx` and `ry` attributes visually encode gold and silver medal counts, respectively. Built with React and D3 v6, it loads CSV data, uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes, and renders SVG circles via `select` and `.join`. The plot includes rotated axis labels for silver and gold medals.

BBhanuMotupalli

80% match

ICE-6 Scatter Plot

This animated scatter plot visualizes Olympic medal data for top countries, showing the relationship between total medals and gold, silver, or bronze counts. The visualization cycles through different x-axis variables using a setInterval, dynamically updating the scatter plot and axis labels. Built with D3.js version 6.7.0, it uses SVG rendering with custom color-coded markers for USA, China, and Japan. The implementation leverages D3's csv loader, scaleLinear for axes, and custom circle attributes for elliptical data points.

BBhanuMotupalli

ICE 7 : Pie Chart

This interactive pie chart displays the total medals won by different countries, using a circular layout where each slice’s arc length corresponds to the count. Built with React and D3 v7, it fetches CSV data and renders SVG paths via d3.pie and d3.arc. The chart employs a linear color scale to differentiate countries, with labels and tooltips generated through d3.arc.centroid. Data comes from a public GitHub gist, and the visualization updates smoothly on new data, showcasing a clean, responsive design adapted from a line-chart template.

ICE6 - Avinash Chinta

This scatter plot visualizes Olympic medal counts by country, using the Data Canvas Sense Your City dataset. The visualization displays each country's total medals on the x-axis against its name on the y-axis, with individual data points rendered as circles. Built with React and D3 v5, the code implements d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, while SVG circles with tooltip titles show precise medal values on hover. The chart includes labeled axes and a distinct teal color scheme for data marks.

ICE_7 Line_Chart

This line chart displays the number of deaths in the USA from 2012 to 2022, with the year on the x-axis and the death count on the y-axis. The SVG visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the data, which is loaded from a CSV file via d3.csv. The chart includes gridlines, axis labels, and a blue line path, with margins and tick formatting configured in the code.

SShivaKarpe