Yaswanth_duddu_ICE7

100%

Yaswanth_duddu_ICE7

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

A reusable scatter plot displays earthquake depth versus magnitude from a CSV file, with each point colored to distinguish whether a tsunami occurred. The visualization highlights the relationship between these seismic measurements while separating the data into two categories for comparison. Built with D3 v7, the code uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for the color mapping. It renders points as SVG circles with gridlines, axes, labels, and a legend, filtering out invalid rows before drawing.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Yaswanth_Duddu_ICE7

This scatterplot example uses D3.js to render a simple two-dimensional point distribution. The visualization displays individual data points positioned across the plotting area, with styling controlled through a custom stylesheet that includes a large message element. The implementation leverages standard D3 selection methods to append SVG circles for each data point, while the accompanying style sheet applies font sizing and text alignment rules. The example includes a basic JavaScript entry point that logs a message to the browser console, serving as a minimal demonstration of D3’s core data-binding capabilities.

YYaswanth

80% match

Loading thumbnail…

Yaswanth_duddu_ICE7

This reusable scatter plot shows the relationship between hours studied and exam scores for 50 students, with attendance percentage encoded as color and assignment completion as point radius. The visualization is built with D3 v7, using a queryable ScatterPlot function that accepts custom accessors for x, y, radius, and color. The code implements scales for positioning and sizing, axis generators for the plot frame, and SVG circle elements with tooltips via the append('title') API. The dataset is loaded from a CSV file containing student records with eight variables.

YYaswanth

78% match

Loading thumbnail…

Data Visualization

This visualization displays earthquake data from a CSV file, plotting year on the x-axis, magnitude on the y-axis, and encoding depth via circle radius. The SVG scatterplot uses d3.csv to load data, then d3.scaleLinear and d3.scaleSqrt for scales, with d3.axisBottom and d3.axisLeft generating the axes. Colored steelblue circles with 0.5 opacity clearly reveal distributions of earthquake events across the recorded timeframe.

HHassaan Gul

77% match

Loading thumbnail…

ICE_7_Yaswanth_Duddu

This scatter plot shows the relationship between study hours and math scores for ten students, with each circle representing an individual student’s data point. The visualization uses D3.js v6 to load data from a CSV file, scales the x and y axes linearly, and renders circles in an SVG container. The code converts the CSV strings to numbers, creates x and y scales, appends axes, and positions the steel-blue circles using the scale functions to map study hours and scores to pixel coordinates.

YYaswanth

76% match

Loading thumbnail…

Yaswanth_duddu_ICE7

This visualization displays a reusable scatter plot of the Palmer Penguins dataset, showing the relationship between bill length in millimeters and flipper length in millimeters, with each point colored by species. The chart uses D3 v7 to implement a custom scatterPlot factory function that creates distinct SVG symbols (circles, squares, and triangles) for each of the three penguin species. Axes include labeled scales for both measurements, and a legend maps each species to its corresponding shape and color using d3.schemeSet2. The data is loaded from a local CSV file using d3.csv with automatic type conversion.

YYaswanth

76% match

Loading thumbnail…

D3 - Scatterplot

This scatterplot visualizes earthquake data, plotting the significance level of earthquakes on the x-axis against their magnitude on the y-axis. Built with React and D3 v7, it renders an SVG chart with a light gray background, labeled axes, and title. The code uses `d3.csv` to load data from a GitHub Gist, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to generate ticks. Individual data points are drawn as purple circles with the `.dot` class, with the chart layout adjusted through SVG `rect`, `g`, and `line` elements.

CChandana Srinivas

75% match

Loading thumbnail…

earthquake

This scatter plot visualizes earthquake frequency by year, with each orange circle representing a data point and the y-axis labeled "nums_of_earthquake." The visualization uses d3.csv to load data from a remote earthquakes dataset, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks and gridlines. The SVG chart is generated with d3.v5, applying margin-based layouts, axis labels, and a title, while styling circles and text through external CSS.

Eedxiao97

74% match

Loading thumbnail…

Yaswanth_duddu_ICE7

This visualization displays the species distribution of the Palmer Penguins dataset as a stylized, animated 3D-effect pie chart. Using D3.js v7, it loads data from a CSV file and aggregates counts by species with `d3.rollup`. Pie slices are drawn with `d3.pie` and `d3.arc`, featuring linear gradients, animated entrance via `transition.attrTween`, and hover expansion effects. Connector lines and labels are added using `outerArc.centroid`, with the SVG rendered on a card-style background featuring drop shadows.

YYaswanth

74% match