Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 4, 2024

Created on Apr 4, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of 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.

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

88% 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

86% 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

84% 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

84% match

Loading thumbnail…

HTML Starter

This example demonstrates a simple data-join visualization of fruit shapes, showing apples and lemons as colored circles with labels. It uses D3 v5’s `scaleOrdinal` to map fruit types to colors (red for apples, yellow for lemons) and radii (50 vs. 20 pixels). The code employs the general update pattern with `selection.selectAll`, `enter`, `merge`, and `exit` to handle adding, removing, and updating fruits over time via `setTimeout`. The visualization renders inside an SVG container within a React scaffold, with a rounded rectangle representing a bowl.

SSybil Jas

83% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu

83% match

Loading thumbnail…

Fork of HTML Starter

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species (setosa, versicolor, virginica). The code loads the CSV data via D3's `d3.csv`, uses `scaleLinear` for both axes, and renders SVG circles with species-specific fills. Axis labels and ticks are generated using `axisLeft` and `axisBottom`, with the chart sized to the full window. This is a React-based D3 v6 example, rendered entirely in SVG.

Ssahithya.voleti@gmail.com

83% match