Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of HTML Starter

✓ Published4🌍 Public
Pppal41366@gmail.com
Last edited Jul 4, 2024
Created on Jun 22, 2024

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.

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 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
94% 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
94% 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
93% match
Loading thumbnail…

Fork of Fork of HTML Starter

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`.

Pppal41366@gmail.com
92% 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
90% 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
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example loads a small CSV dataset of color names from a remote URL and prints a summary of its size, row count, and column count into a preformatted text block. It uses d3.csv to fetch and parse the data, and d3.csvFormat to calculate the approximate file size. Below that, the page displays four static SVG circles, each filled with a hex color from the dataset and labeled with its color name. The page is a minimal React-free HTML document that combines D3 v7 with inline SVG rendering.

Nneeharika2023@gmail.com
84% match
Loading thumbnail…

Fork of Fork of Vikas Fork of Fork of Fork of Fork of HTML Starter

This example visualizes scientific data about ICE-5, displaying a summary of a CSV dataset alongside a set of SVG color swatches with labels such as Han Purple and Harvest Gold. It uses D3 v7 to fetch and parse the remote CSV via `d3.csv`, then calculates the file size, row count, and column count to display in a pre-formatted text block. The rendering is done entirely in SVG, with static circles and text elements embedded directly in the HTML. The page also includes an external SVG image, though its content is not programmatically processed.

Ppanduvik99@gmail.com
84% match