Skip to main content
SimilarExport ZIP
100%

Fork of Reusable

✓ Published0🌍 Public
SSreeKohaliPatel@my.unt.edu
Last edited Apr 25, 2024
Created on Apr 25, 2024

This fork demonstrates the transition from a scatter plot to a pie chart visualization of the Iris dataset. Renderered in SVG, the piece loads CSV data via `d3.csv`, parses numeric columns, and uses a custom pieChart function to encode petal length by angular size, colored by species. The centered pie chart includes a legend populated via D3 data joins, and axis labels for petal and sepal length remain vestigial from the original scatter plot code.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable d3 scatter plot visualizes the Iris Dataset, plotting petal width against sepal length as colored circles. It loads CSV data via `d3.csv` and renders SVG circles using a custom `scatterPlot` reusable chart function. The chart uses `scaleLinear` for x and y axes, with `axisLeft` and `axisBottom` for labeled scales, and configurable margins, dimensions, and radius through function chaining.

Rrcoutts
89% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This fork demonstrates a reusable pie chart that visualizes the species counts from the Iris dataset, loaded via the `d3.csv` function. The chart renders as SVG using D3 v7 APIs, including `d3.arc` for arc path generation and `d3.pie` for computing arc angles from the count data. A categorical color scale maps each species to a distinct color, with an accompanying legend built through D3 selections. The visualization is encapsulated in a custom `pieChart` function, which accepts configurable width, height, margin, and color scale setters.

SSupriya Ravilla
89% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length with points colored by species (blue, green, red). Built with D3 v6, it loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to position points, and renders with SVG circles and axes. The chart is implemented as a reusable function in `scatterPlot.js`, though the main `index.js` also directly adds labels and styling.

Ssalimjivani
88% match
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the Iris dataset as a scatterplot, showing SepalLengthCm against SepalWidthCm with points colored by species (red, green, blue). The SVG is created using d3.select and appended with a `<g>` element, while d3.scaleLinear defines the x and y scales. Axes are added via d3.axisBottom and d3.axisLeft, with the chart title and data describing species distribution. The code imports d3 functions like select, csv, pie, arc, scaleOrdinal, and schemeCategory10, though the scatterplot implementation uses direct SVG circles and a remote CSV URL from a GitHub gist.

Bbhanuteja1807@gmail.com
88% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length, with points colored by their attributes. Built using D3.js (v6), it employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for marks. The chart automatically cycles through four numeric columns—petal width, sepal width, petal length, and sepal length—on the x-axis every two seconds via `setInterval`. Data is loaded asynchronously from a CSV URL using `csv` and parsed into numbers. The reusable chart pattern, inspired by Towards Reusable Charts, accepts configurable accessor functions, with styling handled by the Share Tech font.

Ssaiyogesh9911@gmail.com
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length for individual flowers. Built with D3 v6, it uses a reusable scatter plot component configured with `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The chart loads CSV data from a remote gist, parses numeric fields, and scales points across the full browser window. The minimalist styling uses the Share Tech font and a white background.

AAleksei Vozhdaev
87% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each circle is colored by species using a `d3.scaleOrdinal` with lightblue, lightgreen, and orange ranges. The visualization loads CSV data from a GitHub gist, converts relevant columns to numbers, and uses `d3.axisBottom` and `d3.axisLeft` for axes with custom labels. It is built as a reusable function that appends an SVG with fixed dimensions and margins, rendering all points as circles with a radius of 5 pixels.

Pprince.sahith100@gmail.com
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris dataset, plotting petal width against sepal length. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv`. Each species is encoded by a different symbol from the `symbols` range, generated using `symbolGenerator.type()`. The chart is rendered as SVG, fills the viewport, and includes labeled axes with custom font styling.

Rradhadevarapu
87% match