D

dr_nareshvet@yahoo.in

@Bramhapuri·27 public vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays the frequency of letters in a small dataset, rendered with React and D3. The visualization updates dynamically as users click bars to filter and highlight specific categories. Built with React 19 and D3 v7, the code leverages `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart. A `ResizeObserver` tracks container dimensions, while the `csv` API loads the sample data. The chart uses the `join` pattern for declarative SVG updates, with CSS transitions for smooth hover and selection effects.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays the frequency of letters in a small dataset, rendered with React and D3. The visualization updates dynamically as users click bars to filter and highlight specific categories. Built with React 19 and D3 v7, the code leverages `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart. A `ResizeObserver` tracks container dimensions, while the `csv` API loads the sample data. The chart uses the `join` pattern for declarative SVG updates, with CSS transitions for smooth hover and selection effects.

Loading thumbnail…

Fork of demo

This demo shows an interactive bar chart of letter frequencies from a CSV dataset, with clickable bars that highlight the selected letter while dimming others. Built with React and D3 v7, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to position bars, `d3.axisBottom` and `d3.axisLeft` for labeled axes with gridlines, and a ResizeObserver to make the SVG responsive to container size changes. A custom `useDimensions` hook feeds updated dimensions back into the rendering pipeline, while D3 selections manage bar transitions for hover and selection states.

Loading thumbnail…

Fork of demo

This demo shows an interactive bar chart of letter frequencies from a CSV dataset, with clickable bars that highlight the selected letter while dimming others. Built with React and D3 v7, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to position bars, `d3.axisBottom` and `d3.axisLeft` for labeled axes with gridlines, and a ResizeObserver to make the SVG responsive to container size changes. A custom `useDimensions` hook feeds updated dimensions back into the rendering pipeline, while D3 selections manage bar transitions for hover and selection states.

Loading thumbnail…

demo

This example shows an interactive bar chart that displays the frequency of letters from A to G. Clicking a bar highlights it and dims the others, while clicking it again deselects it. The chart renders bar elements with rounded corners and includes labeled axes with gridlines. Built with React and D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and `ResizeObserver` to adapt to container dimensions. Data is loaded from a local CSV file using `d3.csv`.

Loading thumbnail…

Fork of Fork of US States with Hover

This interactive map of United States counties and states uses a Voronoi overlay to enable hover detection across the entire geographic area, including small islands. The visualization renders state boundaries with a white mesh and highlights the hovered state in dark gray with a black outline. Built with d3.geoPath, d3.geoCentroid, and Delaunay triangulation, it loads geographic data from the us-atlas TopoJSON source. Hovering over any state or invisible Voronoi cell triggers a mouseover event that updates the foreground highlight state.

Loading thumbnail…

Fork of US States with Hover

This fork of the US States map adds hover interactions using invisible Voronoi cells for precise detection, even over small islands. Built with D3 and topojson-client, it loads US Atlas topology from a CDN, renders state shapes via `d3.geoPath`, and highlights hovered states with a distinct fill and stroke. The map uses a memoized background layer and a foreground hovered-state layer, with a feature flag to optionally visualize the Voronoi overlay.

Loading thumbnail…

Fork of US States with Hover

This fork of the US States map adds hover interactions using invisible Voronoi cells for precise detection, even over small islands. Built with D3 and topojson-client, it loads US Atlas topology from a CDN, renders state shapes via `d3.geoPath`, and highlights hovered states with a distinct fill and stroke. The map uses a memoized background layer and a foreground hovered-state layer, with a feature flag to optionally visualize the Voronoi overlay.

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive bar chart, built with React and D3 v7, visualizes the frequency distribution of letters from a CSV dataset. Clicking a bar toggles its highlight, dimming unselected bars to focus attention on specific categories. The chart uses `scaleBand` and `scaleLinear` for positioning and includes gridlines from `axisLeft`. A `ResizeObserver` in `useDimensions` tracks container size, and React renders while D3 handles SVG elements through selections and the data join pattern.

Loading thumbnail…

Fork of US States with Hover

This fork of the US States map adds hover interactions using invisible Voronoi cells for precise detection, even over small islands. Built with D3 and topojson-client, it loads US Atlas topology from a CDN, renders state shapes via `d3.geoPath`, and highlights hovered states with a distinct fill and stroke. The map uses a memoized background layer and a foreground hovered-state layer, with a feature flag to optionally visualize the Voronoi overlay.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of Clickable Circles

This fork displays a smiley face constructed from seven interactive circles, with a yellow face, blue eyes, a red nose, and a smile created by clipping a larger circle. Clicking any circle highlights it with a black stroke and raises it to the front, while clicking the background clears the selection. The visualization uses D3’s `select` and data join API to bind CSV data to SVG circles, managing state through `setState` and handling clicks with event listeners.

Loading thumbnail…

Fork of ThreeJS Starter

A glowing blue cube rotates continuously in a 3D scene, rendered with Three.js and WebGL. The cube uses a MeshPhongMaterial with directional and ambient lighting, creating visible highlights and shading. Users can orbit and zoom the camera using OrbitControls with damping enabled, while the animation loop updates the cube's rotation. The scene responds to browser resizing, with a canvas-based renderer set to antialias.

Loading thumbnail…

Fork of My Home

This example demonstrates a simple nighttime house scene with a sky, grassy ground, a house, roof, door, windows, a streetlight, and bushes, all built from basic SVG shapes. The code uses D3.js v5 to select the SVG element, apply a viewBox for responsive scaling, and append geometric elements like rectangles, paths, and circles. It also employs D3’s data-driven approach to iterate over an array of bush positions, creating multiple circles with a forEach loop. The result is a static, procedural illustration showcasing D3’s ability to compose SVG graphics without external data sources.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow circle with black outlines becomes a cartoon face, complete with eyes, eyebrows, and a curved mouth. The eyebrows animate downward and back upward over two seconds each, repeating the motion. Built with D3 v5, the SVG is rendered using `select`, `arc`, and `transition` calls, with circles for eyes and a path generated by `d3.arc` for the mouth.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow circle with black outlines becomes a cartoon face, complete with eyes, eyebrows, and a curved mouth. The eyebrows animate downward and back upward over two seconds each, repeating the motion. Built with D3 v5, the SVG is rendered using `select`, `arc`, and `transition` calls, with circles for eyes and a path generated by `d3.arc` for the mouth.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the static text “Hello HTML!” centered in the browser window. The page is built with a basic HTML structure that links to an external stylesheet and a JavaScript module. The stylesheet (`styles.css`) applies a large font size and text alignment to the message element, while the JavaScript file (`index.js`) simply logs “hello world” to the console, providing a trivial script entry point. The visualization demonstrates a simple, unstyled HTML starter template without any data or dynamic rendering.

Loading thumbnail…

Fork of Melting Data for Multiple Lines

A multi-line chart displays population over time by region from 1950 to 2100, with each line colored by region and a color legend on the right. The visualization uses d3.nest and d3.line with curveBasis to generate smooth paths, while d3.scaleTime and d3.scaleLinear map the time and population axes. Data is melted from UN population estimates CSV files, combining estimates for 1950–2014 and medium variant projections for 2015–2100, with a d3.axisBottom and d3.axisLeft showing gridlines and formatted tick labels.

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter displays a static message, “Hello KANTHAK AND MAURYAN !”, centered on the page with large, 13-em font styling via CSS. The code uses no JavaScript visualization libraries; instead, it relies on plain HTML structure, a linked `styles.css` for layout, and an `index.js` that only logs “hello world” to the console. The example demonstrates a minimal setup with a `<div>` element and no data-driven rendering or interactive features.