Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of HTML Starter

✓ Published0🌍 Public
Ssahildesignzz@gmail.com
Last edited Jun 23, 2024
Created on Jun 23, 2024

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.

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
95% 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
95% 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 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
90% 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
87% 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 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
83% match
Loading thumbnail…

Fork of React + D3 Hooks template

A scatterplot encodes student eye color as a 3D RGB color space, with circle position mapping red and green values and radius mapping blue intensity. The React component fetches JSON data from a GitHub gist, validates hex color codes, and renders SVG circles that animate through transitions with bounce easing. The visualization uses React hooks with a D3 v5 selection and scale API, demonstrating integration of the two libraries through a wrapping SVG container component.

Aaniosindustries
83% match