Skip to main content
Log in
M

muchakurthisahithipatel@gmail.com

@muchakurthisahithipatel·7 public vizzes

Loading thumbnail…

three

This interactive network visualizes research collaborations, with nodes representing individual researchers and projects, and edges connecting them. Node colors encode research fields: blue for AI, green for Data Science, orange for Neuroscience, purple for Biotech, and yellow for Projects. The graph uses D3.js v7's `d3.forceSimulation` physics engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Users can drag individual nodes via `d3.drag()`, with a tooltip appearing on mouseover to display each node's name and field.

Nov 10, 2025
Loading thumbnail…

three

This interactive network visualizes research collaborations, with nodes representing individual researchers and projects, and edges connecting them. Node colors encode research fields: blue for AI, green for Data Science, orange for Neuroscience, purple for Biotech, and yellow for Projects. The graph uses D3.js v7's `d3.forceSimulation` physics engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Users can drag individual nodes via `d3.drag()`, with a tooltip appearing on mouseover to display each node's name and field.

Nov 10, 2025
Loading thumbnail…

two

This visualization shows a hierarchical tree of food categories, breaking down foods from broad categories like Fruits and Vegetables into specific types and items. The tree uses colored nodes by depth—root, category, type, and item—with a legend explaining the color coding. Built with d3.v7, the code uses D3’s hierarchical layout to position nodes and links, rendered as SVG elements. Each node displays its label, and hovering reveals a tooltip with the item’s calorie count. The accompanying legend highlights the depth-based color scheme, while the chart container is styled with rounded borders and a clean, minimal design.

Nov 10, 2025
Loading thumbnail…

two

A hierarchical tree visualization maps food categories such as Fruits, Vegetables, and Grains through types to individual items, with each node colored by depth and displaying nutritional calorie data via hover tooltips. The chart uses D3.js v7 with the `d3.hierarchy` and `d3.tree` layout functions to position nodes and links, rendered as an SVG with a custom tooltip div. Data is embedded inline from a food dataset, with link and node styling defined through CSS classes.

Nov 10, 2025
Loading thumbnail…

one

This interactive map visualizes 2024 renewable energy percentages and CO₂ emissions across twelve countries. A button toggle switches the choropleth’s color scale between green (renewable energy) and red (emissions), with a hover tooltip displaying both metrics. The map uses D3 v7's modular API, including `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with interpolators, over TopoJSON world-atlas data. Country fills transition smoothly via D3's `.transition()` method when switching metrics.

Nov 10, 2025
Loading thumbnail…

one

This interactive world map visualizes renewable energy usage and CO₂ emissions for 12 major countries in 2024. Users toggle between the two metrics via buttons, triggering smooth color transitions across the geography. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render countries from TopoJSON data, while d3.scaleSequential with interpolateGreens and interpolateReds drives the color encoding. Hover tooltips display detailed country statistics via mouse events. The SVG rendering includes an ocean-colored sphere background and grayscale borders for non-data countries.

Nov 10, 2025
Loading thumbnail…

Product details

This example displays a product catalog as a static HTML table. It shows a list of 18 products with their ID, name, category, price, stock level, and release date. Using plain HTML and CSS, the table is styled with clean borders, alternating row colors, and a dark header. A responsive design transforms the table into stacked cards on narrower screens, using CSS media queries and the `attr()` function to display row labels.

Oct 6, 2025