Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published1🌍 Public
Pppal41366@gmail.com
Last edited Jun 24, 2024
Created on Jun 21, 2024

This interactive scatterplot displays survey data as hexagonal polygons positioned by x and y values, with color encoding categorical attributes. Users toggle between two color schemes via buttons representing 2009 and 2014 data. Built with React and D3 v7, it uses `scaleLinear` and `scaleOrdinal` for scales, `extent` for domains, and renders SVG polygons with rotation, scaling, and stroke styling. Data loads asynchronously from a CSV via `d3.csv`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

A scatter plot of CSV data renders each point as a hexagonal polygon, rotated and scaled, with fill color mapped from a selected categorical attribute. Users toggle between white and color via a dropdown. The React app uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.extent`, and `d3.format`, with D3 v7, drawing SVG polygons with tooltips.

Pppal41366@gmail.com
92% match
Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This example shows a scatterplot of points from a CSV file, rendered as rotated hexagonal polygons with a radial gradient effect. The visualization maps x and y values from the data to linear scales, while a dropdown menu toggles the fill color between white and a data-driven color attribute. Using React with D3 v7, polygons are drawn as SVG elements with configurable rotation, scale, stroke color, and width. The code uses d3.scaleLinear, d3.scaleOrdinal, and d3.extent to handle scaling, with tooltips showing formatted values via d3.format.

Ssahildesignzz@gmail.com
89% match
Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This example shows a scatterplot of points from a CSV file, rendered as rotated hexagonal polygons with a radial gradient effect. The visualization maps x and y values from the data to linear scales, while a dropdown menu toggles the fill color between white and a data-driven color attribute. Using React with D3 v7, polygons are drawn as SVG elements with configurable rotation, scale, stroke color, and width. The code uses d3.scaleLinear, d3.scaleOrdinal, and d3.extent to handle scaling, with tooltips showing formatted values via d3.format.

Ssahildesignzz@gmail.com
89% match
Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This visualization displays a scatterplot of point data from a CSV file, where each point is rendered as a rotated, scaled hexagonal polygon. The viewer can toggle between white and colored fills using a dropdown menu, while polygons feature a dark stroke outline for clarity. Built with React and D3 v7, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` to map coordinates and colors. The SVG rendering applies polygon transformations with `translate`, `scale`, and `rotate` to create a geometric pattern, with tooltips showing formatted x and y values.

Ssahildesignzz@gmail.com
88% match
Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This example displays a scatter plot of data points as rotated, scaled hexagonal shapes. It shows the distribution of xvalue and yvalue coordinates, with the option to color the points either white or a rainbow gradient based on the selected attribute. The visualization uses React with D3.js v7, employing `scaleLinear` for axes and `scaleOrdinal` for color mapping. Polygons are rendered via SVG, rotated and scaled using transform attributes, with a dark background and interactive dropdown for color selection.

Ssahildesignzz@gmail.com
87% match
Loading thumbnail…

Fork of Fork of HTML Starter 2

This visualization displays the CSS named colors as a pie chart, with each slice colored by its corresponding hex value and sized equally. The chart uses React to manage the async loading of CSV data from a GitHub gist, while d3’s `arc` and `pie` generators compute the SVG paths. The rendering leverages React DOM to mount the SVG elements, and the dataset contains 148 rows of color names and hex codes.

LLeonardo Baron
81% match
Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatter plot visualizes wildlife data, mapping animal weight, altitude, population density, and temperature. The visualization cycles through different x-axis variables every second, allowing dynamic exploration of relationships between ecological metrics. Built with D3 v6, it uses scalable vector graphics (SVG) rendering with ordinal symbol scales to distinguish habitats, while circle sizes encode age-specific differences. The code implements reusable chart functions with configurable accessors, and animates transitions by updating scales and redrawing marks. Data originates from a CSV file loaded via D3’s CSV parser, with axes and symbols rendered using D3’s scale and shape generators.

NNandini Maddula
81% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot displays the classic Iris Dataset, encoding each observation as a rotated white hexagon with a black outline. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and maps data points to SVG `<polygon>` elements. The hexagons are positioned via `xScale` and `yScale`, then transformed with `rotate` and `scale` parameters. Hovering reveals tooltips formatted with the `format` API. The chart loads data from a CSV file using D3's `csv` function.

Pppal41366@gmail.com
80% match