pavanireddy03sai@gmail.com

@DandaSaiPavani·9 public vizzes

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

A small network diagram shows six cities as nodes connected by flight routes, with labels positioned beside each node. The visualization uses d3.forceSimulation to run a force-directed layout, employing d3.forceLink for edge distances and d3.forceManyBody for repulsion, while d3.forceCenter keeps the graph centered. The SVG rendering updates node and link positions on each simulation tick, with circles styled in a single color and lines in gray.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

A force-directed network chart maps connections among six cities—New York, Los Angeles, Paris, Berlin, Tokyo, and Dubai—using circles for nodes and lines for links. Built with React and D3 v7, the visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position elements, while labels are added as SVG text. The SVG is rendered directly in the browser without an external data file, relying on hardcoded node and link arrays.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This example shows a network of six cities connected by airline-style routes, with nodes and links arranged through a force-directed layout. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the cities and update their coordinates on each tick. Links are rendered as gray SVG lines and nodes as orange circles, with city names displayed as SVG text labels. The code loads D3 v7 directly in an HTML file and appends all elements to the SVG, while a separate React component in `index.jsx` demonstrates a basic D3-React integration.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of React & D3 Starter

A static tree diagram shows the hierarchical structure of a daily meal plan, with a root node labeled "Meals" linking to Breakfast, Lunch, and Dinner, each with two leaf items like Pancakes, Biryani, and Pizza. The visualization uses React for component mounting, though the chart itself is rendered entirely with D3 v7 APIs, including `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` to compute and draw the curved edges and colored node circles on an SVG canvas.

Apr 12, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example visualizes a world map highlighting selected countries based on custom data. It loads country boundaries as TopoJSON from the world-atlas package, converts them to GeoJSON using `topojson.feature`, and projects them with `d3.geoMercator` fitted to the viewport. The SVG path elements are drawn with `d3.geoPath`, and each country receives a fill color determined by a lookup table: orange for the USA, India, and China, gray otherwise. The React component integrates with D3 through a ref and the `useEffect` hook, displaying a simple text message from D3 alongside the map.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

A single-page visualization renders a small area chart of annual sales data from 2018 to 2021 using React and D3 v7. The SVG displays light-blue filled regions beneath a line, with linear scales mapping years to the x-axis and sales to the y-axis, plus bottom and left axes. The D3 code uses `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` within a React component that references a DOM node via `useRef`. A separate `index.jsx` demonstrates React and D3 integration with a simple text update.

Mar 30, 2026

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example displays a line chart of sales data from 2018 to 2021, rendered as a light blue area chart. It uses D3 v7 APIs including `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.area` to generate SVG paths inside a 600x400 viewport. The React integration is minimal, with a separate `index.jsx` file importing `select` from D3 to update a DOM element’s text content. The chart axes are drawn with default D3 ticks, and the area fill is hardcoded to `lightblue`.

Mar 29, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a simple scatter plot of age versus salary for four sample data points, using circles positioned by linear scales. It renders to an SVG element with D3 v7 for the data-driven graphics and axes. The code also includes a React component that displays a "Hello D3 & React" message, showing integration between the two. The chart is static, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and margins applied within the 600x400 viewport.

Mar 29, 2026

Loading thumbnail…

Assignment

This scatter plot displays the relationship between students’ weekly music listening hours and their self-reported focus level, with each circle representing one student. The visualization uses D3.js v7 to load CSV data from a GitHub repository and render an SVG chart with linear scales, axes, and labeled axes for both variables. The `d3.csv` method parses the data, while `d3.scaleLinear` maps values to pixel positions, and circles are appended with a steelblue fill that turns orange on hover via CSS.

Mar 1, 2026