Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ssahithya.voleti@gmail.com
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from HTML Starter

This scatter plot maps fruit dimensions, plotting width on the x-axis and height on the y-axis, with each point’s shape encoding the fruit type via a categorical legend. The visualization uses D3.js v7, employing `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to assign shapes, and `symbol()` to generate the marks. Data is loaded from a remote CSV file containing fruit measurements, fetched asynchronously and parsed with `csvParse`. Axes and labels are drawn using `axisLeft` and `axisBottom`, while the legend is constructed manually with positioned shape glyphs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization shows a scatter plot of fruit dataset attributes, with each point colored by fruit type (apple, orange, banana, grape) and positioned by width on the x-axis and height on the y-axis. The code uses D3.js v6 functions including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub gist. It renders SVG circles with a radius of 5 pixels and includes custom axis labels for "Width" and "Height" in green, with a red title heading. The plot fills the browser window using dynamic width and height values.

Ssahithya.voleti@gmail.com
93% match
Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart of fruit types with their total weights derived from a CSV file hosted on GitHub. The visualization uses D3 v6 to compute the pie layout with `d3.pie()` and generate slices via `d3.arc()`, while `d3.rollup()` aggregates the raw weight data by fruit. Labels appear at each slice’s centroid showing the fruit name and total pounds, and a legend with color-coded rectangles identifies each category. The SVG rendering also includes custom axis titles for context.

Ssahithya.voleti@gmail.com
85% match
Loading thumbnail…

Fork of Activity6_Task3_Question3.1

This scatter plot visualizes fruit data, mapping fruit height and width along the axes while coloring each point by fruit type (apple, orange, banana, or other). The plot incorporates tree height and width as additional visual properties for the circular markers. The visualization uses D3 v6, loading CSV data from a GitHub gist, and employs `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to construct the SVG chart. The code also uses the `join` operation to bind data to SVG circles and custom text labels for axis descriptions.

KKondreddy Saikiran reddy
84% match
Loading thumbnail…

Fork of Activity6_Task3_Question3

This scatter plot visualizes fruit data, plotting fruit height against fruit width, with each circle colored by fruit species (apples in red, oranges in orange, and others in green). The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `csv` loads data from a GitHub gist containing tree and fruit measurements. Circles are drawn as SVG elements with fixed radius, and the code attempts to apply tree height and width as `rx` and `ry` attributes, though these do not affect circle shape. Axis labels are added via SVG text elements with rotation.

KKondreddy Saikiran reddy
82% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes the relationship between height and weight for individuals in a demographic dataset, with points colored by gender (blue for male, pink for female). The visualization uses D3 v6 to load CSV data from a GitHub repository, then renders circles on an SVG canvas. D3's `scaleLinear` and `extent` functions map the raw measurements to pixel coordinates, while `axisLeft` and `axisBottom` create labeled axes for weight and height. The chart fills the browser window and includes custom axis label styling.

Ssahithya.voleti@gmail.com
82% match
Loading thumbnail…

Fork of Fork of vamshi scatter

This scatter plot displays the weight of various fruits, with each fruit category plotted along the x-axis and its corresponding weight in grams on the y-axis. The code uses D3.js v7 to fetch data from a remote CSV file via `d3.csv`, then maps the categorical fruit names to a band scale (`d3.scaleBand`) and the numeric weights to a linear scale (`d3.scaleLinear`). Circles are rendered as SVG elements representing each fruit’s weight. The chart includes rotated x-axis labels through `d3.axisBottom` and labeled axes, with the styling applied via CSS classes.

Kkotlavamsireddy@gmail.com
82% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and species to point shapes. It uses the D3.js v7 library with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position and render the marks. The visualization also incorporates `axisLeft` and `axisBottom` for chart axes, and a custom shape legend generated with `symbolGenerator`. Data is loaded asynchronously from a CSV file using `csvParse` and rendered into a responsive full-viewport SVG.

Ssahithya.voleti@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

This interactive bar chart visualizes the distribution of tree species from a CSV dataset, displaying the count of each species alongside tooltips that reveal average height and circumference. Built with D3 v7, the visualization employs `d3.csv` for data loading, `d3.rollups` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars animate upward on load, use a green sequential color scale, and respond to hover with opacity changes. The SVG rendering includes rotated x-axis labels and a styled title.

Aanirudhrao345@gmail.com
80% match