Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of HTML Starter

✓ Published0🌍 Public
Ssahildesignzz@gmail.com
Last edited Jul 1, 2024
Created on Jul 1, 2024

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.

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

Fork of Fork of Stylized Scatter Plot

A stylized scatter plot of the Iris dataset, where each data point is rendered as a rotated white hexagon with a black outline instead of a standard circle. Built with React and D3 v5, it uses `scaleLinear` to map the x and y values from the CSV data to pixel coordinates. The `Marks` component creates SVG `<polygon>` elements, applying scale and rotation transforms to the hexagon's points. Axes are custom-rendered as SVG `<g>` elements with tick marks, and a hover tooltip is provided via an SVG `<title>` element.

Ssahildesignzz@gmail.com
83% match
Loading thumbnail…

Fork of HAW test 5.12

This interactive scatterplot displays five data points from a CSV file, connected by a line to reveal a downward trend. Clicking a square point highlights it with a white fill and bold black stroke. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, a D3 line generator for the path, and `ResizeObserver` to make the SVG responsive. The `selectAll('rect').join('rect')` pattern renders the clickable points with custom colors.

MMatthias Stahl
83% 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
82% match