R

revanthdasari10@gmail.com

@Revanthdasari10·16 public vizzes

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows a small network graph with two clusters of nodes, colored green and orange, linked by five edges. The layout is fixed by group: nodes in group 1 are placed on the left and nodes in group 2 on the right, with vertical spacing. The visualization uses the D3.js v7 library to build the SVG scene, manipulating `selectAll`, `enter`, and `append` to add lines and circles. Node positions and link coordinates are defined manually in the JavaScript data arrays, not through an automatic layout algorithm.

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows a family tree as a hierarchical node-link diagram, with color-coded nodes that distinguish generations: red for the root, blue for grandparents, green for parents, and orange for children. Using D3.js v7, it builds the hierarchy with `d3.stratify()` and lays it out with `d3.tree()`, then renders the structure as an SVG. The code draws black links as lines and labels each node with text, positioning all elements based on the computed tree coordinates.

Loading thumbnail…

Fork of D3 Starter

This example visualizes a family tree as a static node-link diagram, using color-coded circles to show generational depth from root (red) to children (orange). The hierarchical data is defined as an array of node-parent pairs, then converted into a tree structure using the `d3.stratify()` API and laid out with `d3.tree()`. Links are drawn as lines, with nodes and labels rendered as SVG circles and text elements, all positioned using the computed layout coordinates.

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a world map colored by per-country values from a small CSV dataset, using a blue sequential color scale to encode the data. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and renders them as SVG paths with a Mercator projection (d3.geoMercator). The visualization relies on d3.json for fetching, topojson.feature for conversion, and d3.geoPath to generate the map shapes.

Loading thumbnail…

Fork of React & D3 Starter

A line chart depicts China's population from 1950 to 2020, using five data points with a smooth monotone curve. The chart renders as SVG, built with React and D3 v7. It uses `d3.line`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to create the visualization, which includes labeled axes, a title, and tick formatting. The y-axis displays population values, while the x-axis shows years.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates population growth in India from 1960 to 2020 with a blue area chart and a three-pixel-wide line overlay. Built with React and D3 v7, the chart uses `d3.scaleLinear` for both axes and `d3.area` to generate the filled path. SVG rendering is used, with axes created via `d3.axisBottom` and `d3.axisLeft`, and standard D3 selectors append the visualization to the root element. The data is a small inline array of year-population pairs.

Loading thumbnail…

Fork of React & D3 Starter

A pie chart displays population figures for China, India, the USA, Indonesia, and an aggregated "Others" category in millions. Built with React and D3 v7, the visualization uses `d3.pie()` and `d3.arc()` to generate SVG paths, with a categorical color scale from `d3.schemeTableau10`. A manually positioned SVG legend lists each country name with its corresponding population value. The chart renders entirely through direct DOM manipulation via `d3.select` within a React application.

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot built with React and D3.js, displaying country-level data with land area on the x-axis and population on the y-axis. The chart renders a single SVG with circles for data points, labeled axes for both scales, and a hardcoded x-axis label. The code defines a custom `scatterPlot` function that uses D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs, along with the `join` operator to create incremental SVG elements within a React environment.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a minimal React application that renders a static SVG visualization. It displays a single blue circle positioned at the center of a 200x200 pixel SVG canvas, accompanied by a simple "Working Test" heading. The code imports React and defines an `App` component that returns the SVG markup directly using JSX. It uses the React 19 and D3 v7 libraries via an import map, with rendering handled through React's declarative component structure rather than direct D3 API calls.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a minimal React application that renders a static blue circle within an SVG element. It uses the React library to define an `App` component that returns the SVG markup, along with the D3.js library available for potential data manipulation. The application imports React and renders the SVG directly, showing a basic integration of React with SVG graphics. The code includes a sample dataset in a CSV file, though the visualization itself does not currently display this data.

Loading thumbnail…

Fork of React & D3 Starter

A React component combines D3.js v7 scales and SVG shapes to display 150 days of simulated coffee shop data from a local CSV file. Orange bars encode daily sales values on a band scale while a blue line path shows profit trends on the same linear y-axis. The visualization uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom/axisLeft for tick marks. The React wrapper manages the SVG container through a ref and useEffect hook.

Loading thumbnail…

Fork of React & D3 Starter

A multi-line chart displays coffee shop performance over 150 days, tracking sales, profit, and customer counts as three colored paths (red, blue, green) against shared day and value axes. The example loads data from a CSV file using d3.csv, converts values to numbers, and renders the lines with d3.line, scaling positions with d3.scaleLinear and adding d3.axisBottom and d3.axisLeft. The visualization is built within a React component using refs and the d3-selection library, outputting to SVG.

Loading thumbnail…

Fork of React & D3 Starter

This example displays a static scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It renders purple circles within an SVG element using D3.js v7’s `scaleLinear`, `axisBottom`, and `axisLeft` functions. The data is loaded asynchronously from a CSV file hosted on GitHub. Despite being a React project, the visualization itself is created entirely with imperative D3 code, while the React component only injects a separate text message.

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows a bar chart of coffee product sales, plotting each product’s total units sold with steel-blue bars on an SVG canvas. It loads `coffee_sales.csv` via `d3.csv`, parses the `Units_Sold` values, and uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, plus `d3.axisBottom` and `d3.axisLeft` for ticks. The chart is rendered with D3 v7 selections inside a plain HTML page, while the accompanying React code uses `useRef` and `useEffect` only to display a static text message.

Loading thumbnail…

Fork of CV: Bar Chart

This example shows an interactive bar chart of coffee product sales, aggregating monthly units sold per product using d3.rollup and d3.sum. Built with React and D3 v7, the chart renders SVG bars that change fill color and stroke on click, with scales created via d3.scaleBand and d3.scaleLinear. Axes are drawn using d3.axisBottom and d3.axisLeft, with labels added through d3 selection joins. Data loads from a CSV file, and the chart resizes responsively using a ResizeObserver.

Loading thumbnail…

ICE-5

This example visualizes January coffee sales as a bar chart, displaying total records, total units sold, and average price in a text summary above the chart. The bar chart uses d3.scaleBand and d3.scaleLinear to map product names to unit counts, with axes created via d3.axisBottom and d3.axisLeft. Data is loaded asynchronously from a CSV file using d3.csv, and hover interactions change bar color. The visualization is rendered as SVG with D3 v7.