sahildesignzz@gmail.com

@sahildesignzz·12 public vizzes

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.

Jul 4, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

Jul 4, 2024

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.

Jul 1, 2024

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.

Jun 23, 2024

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.

Jun 14, 2024

Loading thumbnail…

Fork of HTML Starter

This visualization displays a simple, static smiley-face graphic rendered as an SVG. Built with React 18 and D3.js v7, the code renders the face into an SVG container within an HTML page. The React component leverages the D3 library for drawing, while the page loads D3 hexbin and D3 v6 as additional dependencies. The graphic is a basic structural exercise, providing a straightforward example of combining React’s component model with D3’s SVG generation capabilities.

Jun 13, 2024

Loading thumbnail…

Vega-Lite API

A scatterplot maps foreign assistance spending across countries, plotting fiscal years against income group acronyms and coloring points by assistance objective. The visualization uses the Vega-Lite API to declaratively encode circle marks with size, opacity, and tooltip fields, while fetching CSV data from a GitHub repository via D3's `csv` loader. Custom configuration adjusts axis styles and theme colors, and the chart auto-fits to the browser window with an SVG renderer enhanced by Vega Tooltip.

Jun 12, 2024

Loading thumbnail…

Loading data with react & D3

This example demonstrates a React component that loads a CSS named color dataset from a GitHub gist using d3.csv and displays a summary of the file size, row count, and column count. The code uses React's useState and useEffect hooks to manage the asynchronous data loading, while the Message.js utility formats the statistics using d3.csvFormat. The rendered output shows a large-text loading message that transitions to the data summary once the CSV is fetched, with error-prone duplicate D3 script includes in the HTML. The visualization is purely textual, using ReactDOM to render a `<pre>` element with the file's metadata.

Jun 12, 2024

Loading thumbnail…

CSV Colour Data Visualization

This example displays concise statistics about a CSV file in a large-text infographic. It reports the file size in kilobytes, the total number of rows, and the number of columns, all drawn from CSS named colour data loaded from a remote GitHub gist. The visualization uses D3 v5’s `d3.csv` to fetch and parse the data, then `d3.csvFormat` to compute the formatted size, with the results rendered inside a `<pre>` element via `textContent`.

Jun 12, 2024

Loading thumbnail…

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, responding in real time to pointer movement. Built with React, the component tracks cursor coordinates via the `onMouseMove` event and uses `useState` to update the circle's position. The visualization renders using React-DOM and D3 v7, with the circle's `cx` and `cy` attributes bound to the current mouse position. No data source is involved; the example demonstrates reactive, event-driven rendering in a React and D3 integration.

Jun 12, 2024

Loading thumbnail…

Emoji Final

This example generates a grid of emoji-style faces using React and D3.js. Each face is rendered as an SVG composed of a circular head, two eyes, and an arc-shaped mouth. Parameters like eye offset, eye radius, and mouth dimensions are randomly varied for each face. The faces are created with D3’s `range` and `arc` functions, while React structures the components. The code renders multiple faces in a single SVG container, demonstrating parameterized component reuse.

Jun 12, 2024

Loading thumbnail…

ppal copy

A smiling face composed of geometric SVG shapes is rendered using React and D3, with a yellow circular background, eyes, and a curved mouth drawn via D3's `arc` function. The face includes decorative orange polygons and a gradient-filled ellipse, all assembled within an SVG container using React components. Data is hardcoded; rendering uses SVG with D3 v7 and React 18.

Jun 12, 2024