gyan9427

@gyan9427·9 public vizzes

starter d3 line

This example renders a simple zigzag line chart using D3’s SVG line generator, which maps each coordinate pair from a hardcoded array of alternating y-values (150 and 50) onto a polyline path. The visualization is built within a React setup, where the D3 `d3.svg.line()` API defines the x and y accessors before generating the line data. A separate React component, `Lips`, draws two quadratic Bézier curves to form a mouth-like shape, though it is not integrated into the main chart. The page uses D3 v7 and React 18 via CDN links, with no external data source.

Jul 7, 2022

Loading thumbnail…

Fork of Transaction Analysis with Time (Hopefully)

This visualization analyzes a personal transaction dataset, showing spending patterns across categories and time. It uses a scatter plot to display individual transactions by category and amount on a logarithmic scale, alongside a time-based chart for chronological trends. Users can brush the time chart to filter the scatter plot, and click on categories to filter the time view. The code uses the Vega-Lite API with D3.js to load data from a CSV file and render linked selections between the two views.

Jun 23, 2022

Loading thumbnail…

rotating pendulum

A single black dot orbits an invisible elliptical path around the center of the screen, with two black lines drawn from the top and bottom edges to the dot’s current position. The animation updates every 100 milliseconds using a setInterval loop, incrementing a time variable that drives the dot’s coordinates via trigonometric functions. Built with React and D3.js, the visualization uses D3 selections and `.join()` to create and update SVG `circle` and `line` elements, with the ellipse drawn as an empty SVG `ellipse` shape.

Jun 17, 2022

Loading thumbnail…

D3 Selection Exploration

D3 Selection Exploration demonstrates animated data binding and joins with D3 v7. It renders 15 circles and corresponding lines on an SVG canvas, with positions and radii oscillating sinusoidally over time via a `setInterval` loop. The code uses `select`, `range`, and the `.join()` method to handle enter, update, and exit selections for both `circle` and `line` elements, updating coordinates (`cx`, `cy`, `x1`, `y1`, `x2`, `y2`) each frame.

Jun 17, 2022

Loading thumbnail…

javascript Arrays

This example demonstrates basic JavaScript array operations and D3 array utilities in a minimal HTML page. The code uses D3’s `range` to generate a sequence of numbers, then applies `sort` with ascending and descending comparators to order an array. It also shows `reduce` to multiply values and to convert an array of key-value entries into an object, followed by a custom sort using D3’s `descending`. The page displays a static “Hello HTML!” message styled with large centered text, while all array results are logged to the browser console.

Jun 16, 2022

Loading thumbnail…

D3 starter

This example demonstrates a simple SVG-based visualization using D3 v7 within a React-compatible setup, rendering 100 horizontal bars across the full viewport width, each 10 pixels tall. The bars are created with `d3.range` and `svg.selectAll(...).join('rect')`, masked by a circular `mask` element with the ID `circle-mask`. The mask, appending a white background, visually clips the bars through SVG masking. The code imports `select` and `range` from the D3 library, though the HTML page is minimal and the JavaScript is designed to run in a browser environment.

Jun 16, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a pattern of black vertical and horizontal stripes through a circular aperture. The SVG uses dynamically created `<rect>` elements to construct the stripe grids. A white circular overlay, styled with CSS, masks a second SVG containing perpendicular lines, creating an optical moiré effect as the two grids intersect. The page is built with plain HTML, CSS, and JavaScript, using the SVG namespace and DOM manipulation via `createElementNS`.

Jun 15, 2022

Loading thumbnail…

animate circle

This example shows a single circle positioned inside an SVG container. The circle is placed at coordinates (100, 100) with a radius of 20 and a fill referencing a gradient defined as `#land1-gradient`. The page relies on plain HTML structure without any JavaScript logic or CSS styling rules in the provided files. It demonstrates the minimal setup for rendering static SVG shapes in a web page, using the SVG `<circle>` element and the `fill` attribute with a gradient reference.

Jun 15, 2022

Loading thumbnail…

svg fundamentals

This example demonstrates foundational SVG shape drawing in a React application, using a static HTML page with inline SVG elements. It shows a black square with overlapping circles that form a simple face, including yellow eyes with black pupils and a gray nose. The code directly uses SVG primitives like `<rect>` and `<circle>` with explicit `cx`, `cy`, `r`, and `fill` attributes, rendered inside an `<svg>` container at 600 by 600 pixels. No external libraries or data sources are involved; the visualization relies purely on manual coordinate and styling definitions.

Jun 15, 2022