Fork of HTML Starter

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

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.

80% match

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.

80% match

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.

Mmadipadiga.raviteja@gmail.com

Fork of Fork of Flowers with D3

This example creates a flower garden visualization where each flower’s stem height reflects a country’s score from a hardcoded array. The code uses D3 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to position bars, then draws petal circles around each flower head and adds a vase at the bottom. The visualization demonstrates how SVG shapes and D3’s data-binding can combine data-driven bar charts with decorative elements. The array can be edited to change flower heights, and the rendering approach uses manual SVG append methods rather than data joins for the flowers themselves.

Fork of HTML Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length for each flower. The code uses D3 v7 to load the CSV data, creates linear scales for both axes, and renders individual tomato-colored circles. SVG is used for the chart, with D3’s axis generators adding labeled bottom and left axes, plus a chart title.

Yyazneshpara2@gmail.com

Fork of HTML Starter

This example displays an area chart of programming language popularity, showing the number of users for each language. The chart is rendered as an SVG within an HTML page, using D3.js v6 to fetch a CSV file from a GitHub gist. The code constructs the visualization with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, then applies the `d3.area` generator to create the filled area path. Axis labels are added using `d3.axisBottom` and `d3.axisLeft`. The data source is loaded via `d3.csv`, and the final SVG is styled with a steelblue fill.