Skip to main content
SimilarExport ZIP
100%

Fork of Reusable Scatter plot Activity 8

✓ Published0🌍 Public
Bboinapallyhimaja657@gmail.com
Last edited Apr 23, 2025
Created on Mar 27, 2025

This area chart displays total tip amounts for each day of the week, ordered from Thursday through Sunday, using a teal filled path. The visualization loads tab-separated tip data from a GitHub gist via `d3.dsv` with `d3.autoType`, aggregates values with `d3.rollups`, and renders the chart as an SVG. It uses `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the smooth area path, with labeled axes and a bold title.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This reusable scatter plot visualizes the relationship between total bill and tip amounts from the tips dataset. D3 v7 defines a `scatterPlot()` function that implements `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for day-of-week coloring, plus `d3.axisBottom` and `d3.axisLeft` for ticks. The SVG rendering includes semi-transparent circles, axis labels, and a custom legend built with `selection.append`. The chart uses getter/setter methods for width, height, and data accessors.

Mmadalahyndavi123@gmail.com
81% match
Loading thumbnail…

Fork of ScatterPlot

This scatter plot visualizes the relationship between total bill amount and tip amount using data from the tips.csv dataset. Each circle represents one dining transaction, positioned along the x-axis for total bill and y-axis for tip. The visualization uses D3.js v7 with SVG rendering, employing d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.axisBottom/axisLeft for labeled axes. Circles are semi-transparent steelblue with a radius of 5 pixels, and axis labels are added via SVG text elements.

Ssravya7136@gmail.com
78% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This pie chart visualizes the distribution of smokers versus non-smokers in a tips dataset. It uses d3.pie and d3.arc to generate SVG path slices, with a d3.scaleOrdinal color scale distinguishing the two categories. The chart includes labeled slices showing counts, plus a legend built from SVG rect and text elements. Data is loaded asynchronously via d3.csv from a GitHub gist, and nested grouping with d3.nest calculates category frequencies.

Bboinapallyhimaja657@gmail.com
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot that maps daily visitors on the x-axis against sales on the y-axis, with each point sized by a fixed radius. The visualization loads CSV data from a GitHub gist, parsing numeric fields for day, sales, profit, orders, and visitors. Built with D3 v6, the code uses scaleLinear for axes, extent to compute domains, and axisLeft/axisBottom for rendering ticks. The scatterPlot function follows a reusable pattern, making it configurable via method chaining for width, height, margins, and data accessors, while SVG circles are joined to the DOM using selectAll and data.

HHariniPotla@my.unt.edu
75% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This reusable D3.js scatter plot displays the relationship between two quantitative variables as circles positioned by linear scales, with labeled axes and a custom margin. The chart is fully configurable through a modular API that lets users specify width, height, data, x/y value accessors, margin, and radius. It relies on `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to compute domains and render axes, while binding data to SVG circle elements. The visualization loads its dataset from an external CSV file using `d3.csv`.

Ggolisanthoshi2000@gmail.com
74% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This pie chart displays the proportion of smokers versus non-smokers in a dataset loaded from a GitHub gist. The visualization uses D3.js v6's `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` assigning blue and red fills for the two categories. Each slice is labeled directly with its category name and count using the arc centroid. A separate HTML legend, built with D3 selections, repeats the color-keyed counts beside the chart, all rendered on a styled sky-blue background.

Bboinapallyhimaja657@gmail.com
74% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This fork of a reusable scatter plot activity presents a pie chart visualization, using D3.js version 6.7.0. It loads a CSV dataset from a GitHub gist, converts the score column to numeric values, and renders a pie chart where each slice is labeled with the data's name category. The chart is created with a reusable pie chart function that uses D3's pie, arc, and scaleOrdinal APIs to compute slice geometries and assign colors from the Category10 scheme. The visualization displays category labels directly on each slice, with a white stroke for separation.

CChiranjeeviUppala@my.unt.edu
74% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This example visualizes the Iris dataset with two SVG charts: a pie chart showing species distribution and an area chart tracking petal length across sample IDs. The pie chart uses `d3.pie()` and `d3.arc()` with an ordinal color scale, while the area chart employs `d3.area()` with a monotone curve and linear scales for axes. Data is loaded asynchronously via `d3.text()` from a CSV file hosted on GitHub, then parsed and aggregated using `d3.rollups`. Both charts include custom legends, axis labels, and tooltips-style text annotations, rendered entirely with D3 v6.7.0.

Ssravya.mundluru@gmail.com
74% match