Skip to main content
SimilarExport ZIP
100%

ICE7_Reusable_Scatter_Plot_Manisha

✓ Published0🌍 Public
Kkonudulamanisha@gmail.com
Last edited Oct 28, 2025
Created on Oct 27, 2025

This visualization shows the relationship between gravity and average temperature for planets, with each point colored by planet category. Users can hover over a dot to view a tooltip with the planet’s name, category, and exact gravity and temperature values. The chart is built as a reusable scatter-plot factory using D3 v7, employing d3.scaleLinear, d3.extent, d3.axisBottom, d3.axisLeft, d3.schemeTableau10, and d3.least for nearest-point detection. Rendering uses SVG circles inside a joined `<g>` element, with axes and labels appended directly.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ResuableScatterplot_ICE7_Sowjanya

This interactive D3.v7 scatter plot visualizes the relationship between gravity and average temperature for planets, using data from a CSV file. The chart employs a reusable chart factory with classic function setters, allowing customization of dimensions, margins, data mappings, labels, and styling. It creates axes, labels, and a title, while circles are positioned and colored via configurable value functions. A tooltip, implemented with D3's selection joins, displays the planet name and the x/y values on mouse hover.

Ssaisowjanyaedupuganti.24f@gmail.com
88% match
Loading thumbnail…

ICE7_LineChart_Manisha

This line chart visualizes solar radiation levels for eight planets, ordered by their distance from the Sun. Using D3.js v7 with SVG rendering, the code loads CSV data from a GitHub repository and maps the values with `d3.scalePoint` for the categorical planet axis and `d3.scaleLinear` for the radiation intensity. A monotone curve (`d3.curveMonotoneX`) connects the points, with circle markers at each planet, while rotated tick labels and axis titles clarify the ordered categories and units.

Kkonudulamanisha@gmail.com
81% match
Loading thumbnail…

ICE7_AreaChart_Manisha

This area chart visualizes solar radiation levels for the first six planets, ordered by their distance from the sun. The visualization uses D3 v7 to render an SVG path whose area is filled with a light blue color and stroked in steel blue. The x-axis applies a point scale to the planet names, while the y-axis uses a linear scale for radiation values, with the area curve smoothed using `d3.curveMonotoneX`.

Kkonudulamanisha@gmail.com
78% match
Loading thumbnail…

ICE7_PieChart_Manisha

This pie chart displays each planet’s share of total solar radiation, with slice labels showing percentages and a legend listing raw W/m² values. The visualization loads CSV data from a GitHub repository and uses D3 v7’s `d3.csv`, `d3.autoType`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10`. SVG paths and text elements are generated within a 640×480 canvas, while the HTML legend updates dynamically alongside the chart.

Kkonudulamanisha@gmail.com
78% match
Loading thumbnail…

ICE 7_Area Chart_Sowjanya

This area chart visualizes solar radiation levels across the eight planets, ordered from Mercury to Neptune by their distance from the Sun. A smooth monotone curve connects the data points, with the area beneath filled using a vertical linear gradient that fades from semi-transparent blue to nearly transparent. The visualization uses D3 v7 APIs including `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.curveMonotoneX`, and `d3.area`. Data is loaded from a remote CSV file containing planetary climate measurements, with hover tooltips displaying each planet’s exact radiation value in W/m².

Ssaisowjanyaedupuganti.24f@gmail.com
78% match
Loading thumbnail…

ICE-7 Reusable Scatter Plot with Menu (Dhanusree Kodali)

This interactive scatter plot visualizes daily climate data, allowing users to explore relationships between date and various wind measurements (such as average, peak, and sustained wind speed/direction) through a dropdown menu that changes the y-axis attribute. The plot uses SVG rendering with React components and D3 scales (including `scaleTime`, `scaleLinear`, and `scaleOrdinal`), displaying colored circles that represent different weather stations. A color legend provides interactive filtering, where hovering over a station name highlights only that station's data points while fading others, using D3's `scaleOrdinal` for categorical color mapping and custom React components for axes and marks. The visualization demonstrates a reusable architecture by separating axis, legend, mark, and dropdown functionality into modular JavaScript files.

DDhanusree Kodali
75% match
Loading thumbnail…

ICE7_sowjanya_piechart

This pie chart visualizes the share of solar radiation for top planets, with each slice’s size proportional to its value and labeled with a percentage when above 8%. The chart is rendered as an SVG using d3.pie(), d3.arc(), and d3.scaleOrdinal with Tableau10 colors, while a legend lists each planet’s value and percentage share. Data is loaded from a remote CSV via d3.csv(). The layout uses a two-column grid for the chart and legend, with slice labels positioned via arc.centroid.

Ssaisowjanyaedupuganti.24f@gmail.com
75% match
Loading thumbnail…

1 Question

This interactive scatter plot visualizes the relationship between exoplanet mass and radius relative to Earth, with each dot colored by planet type (Rocky, Gaseous, Ice Giant). Built using D3.js v7, the reusable chart component employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and includes hover tooltips via SVG `title` elements. The code loads data from a CSV file and demonstrates a modular pattern using `ScatterPlot()` factory functions with getter-setter methods for customizing x, y, and color accessors.

RRuthvik Bairaboina
74% match