ICE 7 Q1

ICE 7 - 1

A reusable scatter plot displays tree height against trunk circumference, with points colored by species. Built as a custom D3.js chart function, it loads CSV data from a GitHub repository and renders an SVG visualization with axes and labels. The implementation uses D3's scaleLinear, extent, axisBottom, and axisLeft APIs, plus a color scheme, to create an interactive, configurable plot.

93% match

ICE 6 part 2

This scatter plot uses a D3.js v7 SVG animation to explore the relationship between tree height and circumference, with each circle representing a tree from a CSV dataset, colored by borough. The visualization begins with all points at radius zero, then animates them to their full size using SVG circle elements and D3's `.selectAll`, `.enter`, and `.attr` methods. Interactive mouseover and mouseout events enlarge individual dots and highlight them with a contrasting stroke. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for gridlines and tick labels.

89% match

ICE 7 Q2

This visualization combines a scatter plot and a pie chart to explore a dataset of 100 trees, using D3.js v7 to render both as SVGs. The pie chart, constructed with `d3.pie()` and `d3.arc()`, shows the distribution of tree species, with each slice colored via a categorical scale and labeled with its species name. A manually built HTML legend maps colors to species names, while the accompanying scatter plot (from a separate script) provides an additional view of the raw data. The pie chart’s data is aggregated from a CSV file using `d3.rollup()` to count trees per species, and the rendering relies on SVG `path` and `text` elements.

88% match

ICE 7 Q4

This visualization shows tree height over time as a smooth area chart, with a blue filled region and a dark blue line tracing the trend across planting years. It uses D3 v7 to load a CSV dataset from a GitHub repository, parse the numeric values, and render the chart as SVG. The code applies d3.area and d3.line with curveMonotoneX for smooth transitions, plus d3.axisBottom and d3.axisLeft for the axes. The x-axis displays the year planted, while the y-axis measures height in meters.

84% match

Sshreyasribearelly@gmail.com

ICE06 2 part

This scatter plot visualizes the relationship between trunk diameter and height for three tree species—Maple, Oak, and Pine—using a CSV dataset. The chart encodes species through colored circles (green, brown, darkgreen) with a legend, while axes display height on the y-axis and trunk diameter on the x-axis. The visualization uses D3 v5 to load and parse the data, create linear scales with `scaleLinear`, and render SVG circles via `selectAll` and `join`. Axis labels and titles are added using `axisLeft` and `axisBottom`, with styling applied through CSS classes.

ICE 7

This reusable D3.js scatter plot animates through different axis configurations of the Iris dataset, cycling petal and sepal measurements every two seconds. Implemented with the D3 API, it uses `scaleLinear`, `axisLeft`, `axisBottom`, `symbols`, and `scaleOrdinal` to map species to distinct colors and shapes. The SVG rendering includes a dynamic legend and title, with the plot’s margins and radius configurable, demonstrating a chart pattern for interactive data exploration.

RRebecca Moore

ICE 7 reusable scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species through colored symbols. Built with D3 v6, it uses reusable chart components via `scatterPlot()`, employing `scaleLinear` and `scaleOrdinal` for axes and color mapping. The SVG rendering includes axis labels and a legend-free design, with data loaded asynchronously from a CSV URL. The chart adapts to the viewport size, demonstrating a modular approach to building customizable visualizations with D3's selection and join methods.

Kkakumanusreya

Ice7

This example presents a reusable scatter plot that visualizes the relationship between petal width and sepal length from a dataset loaded via `d3.csv`. The SVG visualization, rendered through a custom `scatterPlot` module, uses `scaleLinear` for axis scaling and `axisLeft`/`axisBottom` for tick marks. Data points are drawn as circles with configurable radius, and the plot adapts to the full browser window dimensions. The code leverages D3's `select` and `join` operations for efficient element creation.

Sshyamraghav12@gmail.com