Fork of Viz Function Conceptdrb

100%

Fork of Viz Function Conceptdrb

✓ Published0🌍 Public

Last edited Mar 16, 2024

Created on Mar 16, 2024

This example demonstrates a reusable "viz function" pattern for structuring D3.js graphics. It renders a simple rectangle with configurable margins, dimensions, and fill color, computed from the container size. The code separates the visualization logic in `viz.js`, which accepts an SVG selection and an options object, while `index.js` initializes the SVG using D3's `select` and `join` methods. This refactoring highlights how to encapsulate and parameterize chart code for flexibility.

AI-generated description

A refactoring that introduces the "viz function" as a way to encapsulate configurable logic for graphics and visualization.

MIT Licensed

Similar vizzes

Loading thumbnail…

Viz Function Concept

This example demonstrates the Viz Function concept, a refactoring that encapsulates configurable logic for graphics and visualization. The main script imports a `viz` function from `./viz` and calls it with parameters for dimensions and an inner rectangle fill color, rendering an SVG with a gray inner rectangle inside the container. The `viz` function uses D3’s `select` and `join` APIs to create and update the SVG rectangle, calculating its size based on provided margins. The code relies on the D3 library (version 7.8.5) and is structured as a reusable, parameterized visualization component.

CCurran Kelleher

85% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a reusable React component called `VizContainer` that abstracts SVG and group elements following the margin convention, rendering a dark outer rectangle, a light inner rectangle, and a pink circle. The code uses React 16 and D3 v6 via CDN links, with props controlling dimensions, margins, and colors. The `showMargins` boolean toggle visually highlights the chart’s margin area, which can be removed by deleting that prop. It serves as a minimal starter template for building React-based D3 visualizations.

PPedram

80% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a clean React and D3.js starter template that sets up a basic SVG visualization container. It renders two nested rectangles—an outer gray rectangle and an inner light gray rectangle—to visualize the margin convention. The `VizContainer` React component abstracts the SVG and group elements, accepting props for dimensions and margins, with an optional `showMargins` prop to toggle the rectangles. Built with React 16.13 and D3 v6 loaded via CDN, it provides a minimal foundation for building custom charts.

RRutvik Kokate

80% match

Loading thumbnail…

Fork of React + D3 Viz Starter

A fork of the React + D3 Viz Starter demonstrates a reusable `VizContainer` React component that abstracts SVG and group elements using D3’s margin convention. The example renders a blank SVG with gray outer and inner rectangles to visualize the chart area and margins, which can be toggled via the `showMargins` prop. It uses React 16 and D3 v6, loaded via CDN, to structure the visualization, while the included `graph.json` file provides hierarchical data for future chart implementation.

JJediquu

79% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a minimal React and D3.js starter project for SVG visualizations. It shows a simple SVG canvas with a light gray background, a darker gray border, and a single red circle in the top-left corner. The code defines a reusable `VizContainer` component that handles the standard margin convention, translating the inner coordinate system and optionally displaying the margin boundaries. It uses CDN-loaded React, ReactDOM, and D3, with dimensions and margins set as variables, and renders the visualization through the `ReactDOM.render` API.

Jjon65

79% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example presents a minimal React and D3 visualization scaffold. It shows a blank SVG canvas with light gray inner and outer rectangles delineating chart margins, as defined by the margin convention. The code uses `VizContainer`, a React component that abstracts the SVG and group elements, and leverages ReactDOM to render the application. Data visualization code would be placed as children within the container, ready for D3 v6 integration.

JJames

79% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This visualization demonstrates a blank SVG canvas with visible margin boundaries, ready for React and D3.js content. The `VizContainer` component abstracts the SVG and group elements, following the standard margin convention by translating the inner group. The code uses `ReactDOM.render` to mount the app, and shows the outer and inner rectangles as gray and light gray fills when `showMargins` is true. The example uses CDN-loaded React, ReactDOM, and D3 v6 libraries, with dimensions and margins defined as variables.

Ppete0707

78% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example shows a minimal React + D3.js visualization scaffold with a flexible `VizContainer` component that wraps SVG elements using the standard margin convention. It renders gray rectangles to visualize the outer and inner chart areas, which can be toggled via the `showMargins` prop. The code uses React 16 for component rendering, ReactDOM for mounting, and D3 v6 loaded via CDN, with fixed dimensions of 960×500 pixels. The container abstracts the SVG `<g>` transform for margins, allowing children to be placed directly in the plotting area, though no actual data marks are present yet.

Mmfakboo

78% match