Skip to main content
SimilarExport ZIP
100%

ICE 7 - 1

✓ Published0🌍 Public
Aanirudhrao345@gmail.com
Last edited Oct 24, 2025
Created on Oct 24, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Q1

This example presents a reusable scatter plot that explores the relationship between tree height and circumference, with points colored and shaped by species. Built with D3 v7, it renders SVG symbols and includes interactive tooltips that display species, height, and circumference values on hover. The chart leverages a custom `scatterPlot` function with getter/setter methods for configurability, and uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization. Data is loaded asynchronously from a remote CSV file.

Aanirudhrao345@gmail.com
93% match
Loading thumbnail…

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.

Aanirudhrao345@gmail.com
85% match
Loading thumbnail…

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.

Aanirudhrao345@gmail.com
85% match
Loading thumbnail…

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.

Aanirudhrao345@gmail.com
85% match
Loading thumbnail…

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.

Sshreyasribearelly@gmail.com
84% match
Loading thumbnail…

ICE 7 Q3

This line chart displays tree height in meters against the year planted, using data from a CSV file hosted on GitHub. The visualization loads the dataset with `d3.csv`, sorts it chronologically, and draws a monotone-smoothed line with `d3.line` and `curveMonotoneX`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with labels for both variables. The SVG rendering is configured with fixed dimensions and margins, encoding the quantitative relationship between planting year and growth outcome.

Aanirudhrao345@gmail.com
82% match
Loading thumbnail…

ICE5

This bar chart displays tree heights for different species from an urban trees dataset. Each bar’s height corresponds to the measured height in meters. Built with D3 v7, the visualization loads data from a CSV file using `d3.csv`, maps species to the x-axis with `d3.scaleBand`, and maps heights to the y-axis with `d3.scaleLinear`. The SVG renders bars with a blue fill, rotated x-axis labels, and axes generated via `d3.axisBottom` and `d3.axisLeft`.

Aanirudhrao345@gmail.com
82% match
Loading thumbnail…

Reusable Scatter Plot for ICE-7

A reusable scatter plot displays three numeric attributes—weight, height, and price—from a CSV dataset, letting users switch axes via dropdown menus. Built with D3 v6, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to render SVG axes, while `d3.selectAll('circle')` binds data points as steelblue circles. The chart updates by removing and reappending axes and circles on dropdown changes.

NNagasharan Sai Nandyala
81% match