rajibbanerjee

@rajibbanerjee·6 public vizzes

Fork of Title to the Dot (Studying of D3 Scatter Plot)

This D3.js scatter plot visualizes the Iris dataset, plotting petal length against sepal length for each flower sample. Circles are positioned on an SVG canvas using a linear scale for both axes, with axes rendered via `axisLeft` and `axisBottom`. Tooltips appear on hover, showing the exact data coordinates via appended `title` elements. The code loads data from a CSV file using `d3.csv` and constructs the visualization with `scaleLinear` and `extent` functions.

Feb 14, 2023

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width while color-coding data points by species. Hovering over a species name in the color legend highlights only that species' points and fades the rest, using React state and event handlers. Built with React and d3.scaleOrdinal, d3.scaleLinear, and d3.extent, the SVG rendering includes custom axes and a color legend component. The code loads CSV data via d3.csv and displays tooltips through SVG `<title>` elements.

Feb 14, 2023

Loading thumbnail…

Scatter Plot - Fork1

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. It loads data from a CSV file using d3.csv, applies linear scales via d3.scaleLinear, and renders circles in SVG with tooltips showing coordinate values. The code uses D3 v6’s select, extent, axisLeft, and axisBottom APIs to generate the plot, which fills the browser window with a margin-based layout.

Feb 14, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3-Fork1

This reproduction of a Sol LeWitt artwork uses D3.js (v6) to draw a series of horizontal rectangles that fill the browser window. The piece shows a minimalist grid of 100 thin, full-width bars stacked vertically, each 10 pixels tall with 20-pixel spacing, rendered as SVG elements. The code leverages D3’s `select`, `range`, and `join` APIs to bind data to SVG `<rect>` elements, using the window’s inner dimensions to scale the artwork responsively. The rendering is pure SVG, with no external data source.

Feb 8, 2023

Loading thumbnail…

Sal Lewit Reproduction

This is a static SVG reproduction of a Sal Lewit artwork using basic HTML and SVG shape elements. The page creates a 960 by 560 pixel canvas with no margins or scrollbars, rendering directly through inline SVG markup. The code uses no JavaScript libraries or data sources, relying entirely on declarative SVG primitives defined in the document. The visual composition is achieved through simple rectangular and path elements, though the specific shapes and colors are not detailed in the available source. The example demonstrates how minimalist HTML and SVG can recreate a geometric art piece without external dependencies.

Feb 7, 2023

Loading thumbnail…

RB-SVGFundamentals

This example demonstrates fundamental SVG shapes rendered directly in an HTML document. It shows how basic drawing elements like circles and paths are defined using inline SVG syntax. The visualization features two overlapping red and green circles to illustrate layering, and a single black path composed of absolute and relative line commands. The code uses native SVG elements (`<circle>`, `<path>`) within an `<svg>` tag, with styling attributes such as `fill`, `stroke`, and `stroke-width`. No external libraries are employed; the graphic relies solely on standard SVG support in web browsers.

Feb 7, 2023