isZachariah

@isZachariah·6 public vizzes

Fork of D3 Fork

This example demonstrates a minimal SVG visualization where fifteen circles with a radius of 100 pixels are drawn across the full browser viewport. The code uses D3 version 7.4.4's `select`, `range`, and `selectall` APIs to append circles to the SVG container, with dimensions taken directly from `window.innerWidth` and `window.innerheight`. The visualization is embedded within a React 18.1.0 project, though the rendering itself relies solely on D3's selection and data-binding methods rather than React components.

May 23, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This example presents a full-screen, empty SVG scatter plot scaffold built with D3 v7. It reads the Iris dataset from a linked README, though the current code only creates an SVG canvas sized to the viewport. The visualization renders via SVG, with styling for axis text in the accompanying CSS. The implementation uses d3.select to append an SVG element to a fixed root container, preparing the foundation for future scatter plot data visualization.

May 23, 2022

Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how VizHub’s `package.json` support lets users declare dependencies and custom library mappings, enabling ES6 imports of React and D3. The interactive visualization uses ReactDOM to render a component, then appends an SVG via `d3.select` and generates circles from `range(15)`. The `vizhub.libraries` field maps package names to CDN paths and browser globals, while the license field specifies ISC.

May 23, 2022

Loading thumbnail…

D3 Fork

This example demonstrates how to set up a minimal D3 version 7 visualization. It creates an SVG canvas that fills the browser window and renders fifteen circles, one for each value in a range of data. The code imports the `ascending` and `select` functions from the D3 API, uses `select('body')` to attach the SVG element, and appends circles with `svg.selectall('circle')` and `.enter()`. The rendering uses SVG elements and relies on D3’s declarative data-binding to build the visualization.

May 23, 2022

Loading thumbnail…

first forHubg

This example demonstrates how to set up a D3.js visualization in VizHub, creating a full-window SVG canvas that spans the entire browser viewport. The code imports `ascending` and `select` from the D3 library via ES6 modules, then uses `select` to append an SVG element sized to the window dimensions. D3 is loaded from UNPKG alongside local CSS and JavaScript files. The visualization initializes an empty SVG surface, ready for future data binding and shape rendering, using D3 v5 version 7.4.4 as declared in the package configuration.

May 23, 2022

Loading thumbnail…

Fork of Fork of Fork of Cool Art : generated line data with d3 line generator api : circle on path

This visualization displays a dense scatter of small circles arranged along a curved line path, with randomized positions creating an organic, generative art composition. The SVG rendering uses D3 v7 to generate 7,000 data points, where each point’s coordinates are derived from random values multiplied by incrementing indices. The d3.line() generator with curveBasis interpolation creates the underlying smooth path, which is stroked with a randomly colored line. Circles are then plotted at the same coordinates, each filled with varying RGB values, producing a colorful, dynamic pattern against a black background.

May 22, 2022