parag776

@parag776·9 public vizzes

Fork of only for testing

This example demonstrates a minimal SVG rectangle rendered inside a div container using D3.js version 7.8.2. The code selects a div with class "svg", appends an SVG element, then appends a group and a rectangle with specified x, y, width, and height attributes. A dummy div above creates vertical spacing on the page. The example uses plain CSS for layout and D3's selection and append methods to construct the visualization.

Feb 4, 2023

Loading thumbnail…

Fork of d3 and scatterplot seperated and exported

This example creates a scatter plot from the classic Iris dataset, loading the CSV data from a GitHub gist. The chart is built as a reusable `ScatterPlot` class using d3.v7's `scaleLinear` for coordinate mapping and `axisLeft`/`axisBottom` for axes. The SVG visualization is appended to the page body with dimensions set to the full window size. Notably, the core plotting logic is commented out, so the example demonstrates the structure of separating data fetching and chart construction without rendering the actual points.

Feb 3, 2023

Loading thumbnail…

d3 and scatterplot

This example displays the classic Iris dataset as a scatterplot, plotting sepal width on the x-axis and sepal length on the y-axis. The code loads the data from a CSV URL and uses d3.csv to parse it, then constructs linear scales with d3.scaleLinear to map the data to screen coordinates. It renders circular marks via SVG circle elements and adds axes using d3.axisLeft and d3.axisBottom. The visualization is built with React, though the core charting logic relies entirely on D3 v7.

Jan 31, 2023

Loading thumbnail…

Fork of moving stuff

A line of twenty gold circles with black outlines moves vertically down the viewport, then reverses direction and moves up, bouncing between the top and bottom edges. The animation updates every 200 milliseconds using `setInterval`, with each frame positioning circles via `d3.selectAll('circle').data().join()`. The `cx` and `cy` attributes are computed from the circle radius and an incrementing time variable, creating a simple looping motion. Rendered as SVG with D3 v7, the example fills the browser window.

Jan 24, 2023

Loading thumbnail…

Fork of lowis awesome

This example uses the d3 library to render geometric line patterns within outlined symbols. It creates a grid of masked horizontal and vertical rectangles, alternating masks to display a symbol’s shape in contrast with its inverse. The SVG output uses `d3.symbol()` and `d3.range()` to generate each symbol and line count, producing a tiled, monochrome composition.

Jan 23, 2023

Loading thumbnail…

Fork of with D3 and group elements

This example generates an SVG grid of horizontal and vertical rectangles, precisely 960 by 500 pixels, using the D3.js library. The grid is composed of two groups of rectangles, each with a stroke width of 8 pixels, and is overlaid with circular masks to create a focal point in the center. The code leverages D3's `select`, `append`, `attr`, and `range` methods to build the structure, along with custom `setAttributes` and `join` helpers for efficient element creation. The visualization demonstrates how to combine SVG masks with D3's data-driven rect generation to produce a geometric pattern with a central spotlight effect.

Jan 23, 2023

Loading thumbnail…

Fork of lewis art with D3

This example generates a geometric pattern of horizontal and vertical rectangles overlaid on an SVG canvas. The rectangles are masked by circular regions, creating an intersecting grid with a circular reveal effect centered within the 960 by 500 viewport. The code uses D3.js version 7.8.2 to build the SVG elements, compute range data for the grid lines, and apply SVG masks to control visibility. The pattern emerges from alternating masks: one with a white circle on a transparent background and another with a black circle on a white background, producing a crosshatch-like composition.

Jan 23, 2023

Loading thumbnail…

Fork of lewis art

This example renders intersecting horizontal and vertical line patterns within a circular boundary on an SVG canvas. It uses the SVG Mask API and multiple `mask` elements to selectively reveal or hide line segments, creating a geometric art composition. The code constructs rectangles dynamically with `document.createElementNS` and positions them at regular intervals based on the canvas dimensions. The rendering logic relies on native JavaScript math functions like `Math.ceil` and `Math.min` to calculate line counts and spacing.

Jan 22, 2023

Loading thumbnail…

candle sticks

This example renders a scrollable SVG candlestick chart from synthetic financial data. Each candle shows open, high, low, and close prices, with green bodies for rising periods and red for falling ones, plus a vertical wick for the high-low range. The code generates a sequence of random price movements starting from a base value, then constructs SVG elements directly using native DOM APIs like `document.createElementNS` and `setAttribute`. No charting library is used; instead, candles are positioned and scaled manually within a large SVG canvas.

Jan 20, 2023