hemantsharma64

@hemantsharma64·3 public vizzes

Fork of Bubbles with Json Data

This example visualizes a dataset of people and monetary values as a bubble chart using D3.js v5. Each bubble represents a person, with the circle radius and displayed amount corresponding to their "valor" field. The visualization is built from hierarchical JSON data using `d3.pack` and `d3.hierarchy` layouts. The circles are rendered as SVG elements, with click handlers that reference a process loading function, and each bubble includes tooltip text and labeled values.

Oct 7, 2023

Loading thumbnail…

react

This example shows a static orange circle centered near the top of an SVG canvas, rendered inside a minimal React project. The circle is drawn directly in JSX using SVG elements (`circle`, `svg`), with inline CSS styling for page layout. No React components, hooks, or data visualization libraries are used; the visualization relies solely on the browser’s native SVG rendering. The code defines a fixed 600×600 viewport and positions the circle at coordinates (300, 150) with a radius of 100. It serves as a bare-bones starting point for integrating React with SVG graphics.

Sep 27, 2023

Loading thumbnail…

react-d3

This React and D3 example demonstrates a reusable SVG container component that establishes a standard margin convention for data visualizations. The `VizContainer` component abstracts the SVG and group elements, rendering a gray background rect and an inner plotting area with a transform translation. Using React and ReactDOM for the component structure, it accepts width, height, margin, and inner dimensions as props, with an optional `showMargins` flag to display the boundary rectangles. The code sets up a 960x500 canvas with 30-pixel margins, providing boilerplate for future chart development within the translated coordinate system.

Sep 27, 2023