Manikyapavan

@NMPavan·3 public vizzes

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser resizing by redrawing its content to match the new dimensions. The page uses a CSS-styled container and a redraw function that reads `clientWidth` and `clientHeight` to set the SVG’s `width` and `height` attributes. It draws two green lines forming an X across the full viewport, with strokes updated on each resize event. The code uses D3 v5 with `d3.select`, `svg.attr`, and `window.addEventListener` to handle the dynamic resizing.

Jun 2, 2020

Loading thumbnail…

welcome to D3Js

This example demonstrates a minimal D3.js setup within a React project, rendering a red SVG rectangle and adding a text paragraph to the page. The code uses `select` from D3 v5 to target the existing SVG element and apply inline styling, while also appending a new paragraph to the DOM. The visualization shows basic SVG rendering with D3’s selection API, using a static HTML page with a bundled JavaScript file. The rendering approach relies on SVG elements and D3’s DOM manipulation methods.

Jun 2, 2020

Loading thumbnail…

welcome to D3Js

This example demonstrates a minimal D3.js setup within a React framework, rendering a single red SVG rectangle as the main visual output. The code uses D3’s `select` function to grab the SVG element and apply a red background style, while also appending a paragraph with the text “hey” to the page body. The SVG is 400 by 200 pixels, generated via HTML, and all D3 operations are executed through the `bundle.js` script. The visualization serves as a basic introduction to integrating D3 with React and SVG rendering.

Jun 2, 2020