R

Rohith Reddy

@rohithbollareddy·17 public vizzes

Loading thumbnail…

Network graph

This network graph visualizes LinkedIn connections between eight individuals, with nodes labeled by name and grouped by affiliation. Edge thickness encodes the reported connection weight between pairs. The graph uses a force-directed layout via `d3.layout.force()` with gravity, charge, and distance parameters, rendering nodes and links as SVG elements. Node positions update on each tick, and dragging is enabled through the force layout’s drag interaction. Data comes from an external JSON file containing node group assignments and weighted link indices.

Loading thumbnail…

USA with States Texas and Maryland

This dendrogram-style tree visualization displays a hierarchical structure of the USA, branching into Texas and Maryland, with each state’s major cities as leaf nodes. Node size reflects each element’s `value`, while stroke and fill colors encode `type` and `level` attributes. Built with D3 v5 and rendered as SVG, it uses `d3.hierarchy` to process the nested data and `d3.tree` to compute layouts. Links are drawn as curved paths with colors from `level`, and nodes are positioned via the tree’s `x` and `y` coordinates.

Loading thumbnail…

Map of England

This map of England uses a teal fill for regions and light pink strokes to highlight interior borders, with the geographic boundaries projected using D3’s `geoNaturalEarth1` and rendered as SVG paths via `geoPath`. Built with React, the visualization loads TopoJSON topology from a GitHub gist, converts it to geographic features and mesh lines using `topojson.feature` and `topojson.mesh`, and applies a projection scale of 5000 with a custom translation to center the country. The code leverages D3 v7 and React 18, with explicit CSS styling for the region and interior path elements.

Loading thumbnail…

World Atlas

This visualization displays a world map with countries rendered in bright green against a blue ocean, using a natural Earth projection. The code leverages D3’s `geoPath` and `geoNaturalEarth1` to project geographic data, while TopoJSON’s `feature` function extracts country boundaries from a world-atlas JSON file. The SVG paths are styled with CSS for fill and stroke, and the sphere background is drawn first.

Loading thumbnail…

Scatter Plot For UCS Dataset

This scatter plot visualizes the UCS dataset, showing the relationship between dry mass and power for each satellite. Points are colored yellow or red based on whether launch mass exceeds 70 kg. The chart uses d3.csv and d3.autoType to load and parse the data from a GitHub gist. D3 v7 scales and axes position circles in an SVG, with d3.axisBottom and d3.axisLeft rendering the numeric axes.

Loading thumbnail…

Scatter Plot UCS Satellite Dataset

This scatter plot visualizes the relationship between dry mass and power for satellites in the UCS Satellite Dataset. Each circle represents a satellite, with its position determined by mass on the x-axis and power on the y-axis, while color encodes the satellite’s country of origin. The code loads the CSV data using D3’s `csv` method, applies linear scales via `scaleLinear`, and renders the SVG circles with `d3.schemeCategory10` for color mapping. Axis labels are added via `axisLeft` and `axisBottom`, demonstrating a straightforward D3 v6 data-binding workflow.

Loading thumbnail…

d3-x3d : 3D Bar Chart Example

This example shows a 3D bar chart displaying Toyota vehicle data loaded from a CSV file, with each bar representing a car model and its price, mileage, and engine size. The visualization uses the d3-x3d library to render interactive 3D graphics in the browser via X3DOM, while D3 v5 handles data parsing and DOM selection. The code calls `d3.x3d.chart.barChartMultiSeries()` to create the chart component and uses `d3.csv()` to fetch and parse the external dataset from a GitHub gist. The chart is attached to a div element using D3's data join pattern.

Loading thumbnail…

3D Scatter Plot

A 3D scatter plot displays Toyota car data, plotting price, tax, and mileage for one series of markers, while a second series shows price, tax, and miles per gallon. The visualization uses Plotly’s `scatter3d` trace type within a `Plotly.newPlot` call, rendering interactive markers with adjustable opacity and line styling. Data is loaded via `d3.csv` from a remote GitHub-hosted CSV file, and the layout collapses the chart margins to zero. The plot compares vehicle cost and efficiency metrics across two distinct attribute combinations.

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This interactive scatter plot explores the Iris dataset, cycling through different feature combinations on the x-axis—petal width, sepal width, petal length, and sepal length—against sepal length on the y-axis. Each species (setosa, versicolor, virginica) is color-coded with blue, red, and green points, while a legend identifies the colors. Built with React and D3 v6, it uses `scatterPlot()`, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and animated transitions via `setInterval`, displaying the data as SVG circles.

Loading thumbnail…

Area Chart

This area chart visualizes global warming trends by plotting annual CO2 emissions per capita against time. The chart uses a black filled area beneath a curve to emphasize emission levels over the years, with axes labeled for both time and emission intensity. Built with D3 v5, the visualization employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth path, while `axisBottom` and `axisLeft` add gridlines and tick marks. Data comes from the Data Canvas - Sense Your City dataset, rendered as SVG in the browser.

Loading thumbnail…

Line Graph

This line graph visualizes the total ticket sales of Southwest Airlines over time, with the x-axis showing years and the y-axis displaying sales figures. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and a `line` generator to plot the data. Data is loaded from a CSV file hosted on GitHub, with date parsing and numeric conversion applied before rendering. The graph includes labeled axes, a title, and a styled red line path, while gridlines are created via tick sizing.

Loading thumbnail…

Pie Chart

This pie chart displays COVID death rates per million for the top 20 states, using colored slices with labels and a corresponding legend that lists each state and its numerical value. The visualization is built with D3 v5, fetching data from a CSV via `d3.csv`, transforming it with `pie()` and rendering SVG paths using `arc()` and `arcGenerator.centroid`. Slice colors are assigned using `scaleOrdinal`, and the chart is presented on an SVG canvas with a fixed width and height.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between math and reading scores for individual students, with each point's color indicating whether the writing score exceeds 70. Built with D3 v7, the SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` with `d3.autoType` to parse the student performance data. Points are rendered as circles with a fixed radius and 70% fill opacity.

Loading thumbnail…

Math Scores Bar Chart

This bar chart visualizes the count of male and female students in a math performance dataset, using two bars to compare the totals. The chart is rendered as an SVG using D3.js v7, with bars drawn via `d3.selectAll` and `rect` elements. Data is loaded asynchronously from a remote CSV file using `d3.csv`, then filtered by gender to compute counts. Axes are generated with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with tick marks added via `d3.axisBottom` and `d3.axisLeft`. The visualization is presented in a 400x400 pixel SVG container, with margins for axis labels.

Loading thumbnail…

ICE 5 Data Vizualization

This visualization displays a map of domestic flight routes using a static SVG image with an embedded base64-encoded JPEG background. A section at the top of the page presents metadata about the underlying dataset, including file size in kilobytes, row count, and column count. The code loads the flight route data programmatically from a GitHub Gist URL using `d3.csv()`. It then formats the data with `d3.csvFormat()` to calculate the size in kilobytes and accesses the properties `data.length` and `data.columns.length` to determine the number of rows and columns. The result is rendered into the page via the DOM property `textContent` on a `<pre>` element. The page itself is structured with HTML and styled with CSS, while the D3 library version 5 is loaded from a CDN.

Loading thumbnail…

Fork of Buddha in colors

This visualization presents a colorful, generative composition overlaid with a detailed line tracing that forms the shape of a Buddha. The piece uses React to render an SVG canvas, where a large grid of semi-transparent, randomly colored squares creates a vibrant, abstract background. A specific SVG path element, containing a complex series of Bézier curves, is then drawn on top, its stroke defining the Buddha's silhouette. The code employs nested `A.map` functions to generate the squares and React's `ReactDOM` for rendering, with the path data representing the primary structured element in the otherwise random field.

Loading thumbnail…

Fork of Fork of Fork of Buddha image in random circles - 2

This visualization layers hundreds of semi-transparent randomly colored rectangles across a React SVG canvas, each positioned using nested array maps and Math.random calls. At the center, a detailed SVG path drawing of a Buddha figure is rendered and scaled, with the chaotic geometric background contrasting against the structured iconography. The code uses React 16.10 and ReactDOM to render SVG elements dynamically, with all visual data generated procedurally rather than from an external dataset.