R

rushithareddyy

@rushithareddyy·51 public vizzes

Loading thumbnail…

Force Network

This force-directed network visualizes the relationships between actors, directors, and films, with nodes colored by their type (actor, director, or film) and links weighted by the number of collaborations. The layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` forces to position nodes, while user interaction is handled via `d3.drag` to manually reposition them. Node labels are displayed, and hovering highlights the node with a blue stroke. The data is loaded from `data.json` and rendered as an SVG, with markers on links to indicate direction.

Loading thumbnail…

Fork of Force Network

This force-directed network graph visualizes the relationships between actors, directors, and films using D3.js. It shows Tom Hanks as a central node connected to his films, while directors link to the films they directed. The visualization employs d3.forceSimulation with link, charge, collision, and center forces to position the SVG circles and lines. Node colors are assigned by group using a categorical color scale, and arrow markers indicate link direction. Data is loaded from a JSON file containing nodes and links with relationship metadata.

Loading thumbnail…

Visualizing Tree

This interactive tree diagram visualizes the corporate hierarchy of a car company, showing parent companies and their subsidiary brands using a horizontal node-link layout. The visualization uses D3.js version 3.5 with the `d3.layout.tree` API, generating SVG elements with collapsible nodes, curved diagonal links, and animated transitions. Each node is rendered as a white circle with a steelblue stroke and labeled text, while lightgreen paths connect parent to child nodes. The static dataset is hardcoded in JavaScript, and the entire diagram is rendered client-side using the SVG and animation capabilities of the library.

Loading thumbnail…

World Map

This example renders a world map using a natural Earth projection, displaying countries as violet landmasses with white borders against a light yellow sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the spherical outline and country boundaries from TopoJSON data loaded from the world-atlas package. The map is rendered as SVG paths, with the TopoJSON converted to GeoJSON via the `feature` method from topojson.

Loading thumbnail…

USA Country Map

This map of the United States displays all 50 states using a pink fill with white boundaries, and hover interactions change each state’s color to purple. It is rendered as an SVG via React, using D3’s `geoPath` with the `geoAlbersUsaTerritories` projection. Geographic data for state land and interiors is loaded from a TopoJSON file using `useData`, `json`, and TopoJSON’s `feature` and `mesh`. The code imports `d3` and `topojson` packages within a React functional component.

Loading thumbnail…

Internet Users World Map

This interactive world map visualizes internet usage per country for 2015, with countries colored on a green scale from 0-20% to 80-100% and a legend indicating the percentage ranges. Hovering over a country reveals a tooltip displaying the country name and its specific internet user percentage. The visualization uses D3's `geoPath` and `geoNaturalEarth1` projection to render the map, with `d3.schemeGreens` for coloring and `d3.scaleOrdinal` for the legend. It loads GeoJSON data from a TopoJSON file via `topojson.feature` and supports zooming through D3's `zoom` behavior.

Loading thumbnail…

Reusable Scatter Plot

The scatter plot visualizes the Iris dataset, encoding each flower by petal width and sepal length. The axes and displayed data points update every second, cycling through four different column combinations. The visualization uses d3 v6’s scale, axis, and symbol APIs within a reusable ES6 module, applying distinct shapes and colors to differentiate the three species through d3.scaleOrdinal and d3.symbol. Data is loaded from a CSV URL, with rendering handled by SVG paths and animated via setInterval.

Loading thumbnail…

Worldmap

This world map displays internet usage as a proportion of each country’s population for 2021, with countries colored on a sequential scale from low to high usage. Users can hover over any country to see its exact value in a tooltip and zoom or pan the map using d3.zoom. The visualization builds its geographic paths with d3.geoPath and topojson-client, loads data from the internet_users.csv file, and renders a legend using d3.scaleOrdinal and a custom colorLegend function.

Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each cereal’s rating on the x-axis against its sodium level on the y-axis. Bubble diameter encodes calorie count, while color distinguishes the seven manufacturers, with legends for both size and color. The visualization loads data from a CSV file and renders as SVG using D3 v7, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.schemeSet1` for colors, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Loading thumbnail…

Bar chart

A bar chart displays population density values for a list of countries, using horizontal bars ordered by country name along the vertical axis. The implementation uses D3 v7 with an SVG rendering approach, loading the data from a CSV file. It relies on `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to encode the density values as bar lengths and map countries to band positions on the y-axis.

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between flipper length and body mass for three penguin species, with each point colored by species (green for Adelie, brown for Gentoo, purple for Chinstrap). The visualization uses D3 v5 with SVG rendering, loading data from a CSV file via `d3.csv`, and employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Circle radii are set uniformly, while the chart includes labeled axes for flipper length and bill length, though the latter is mislabeled relative to its data mapping.

Loading thumbnail…

Fork of countries

This scatterplot of countries uses urban population as the x-axis and country names as the y-axis, with circles colored by each nation’s official language. Hovering over the color legend filters the displayed points to only those matching that language, dimming non-matching data. The visualization is built with React, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and custom React components for axes, marks, and the interactive legend. Data loads from a CSV via `d3.csv`, and all elements render as SVG inside a single `<svg>` canvas.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width. Each point represents an iris flower, colored by species: skyblue for setosa, lightgreen for versicolor, and orange for virginica. The visualization uses D3 v6 to load the CSV data and render circles as SVG marks scaled to the data’s extent. Axis labels identify the variables, and the chart includes references to sepal dimensions as point properties, though only petal dimensions drive the plotted positions.

Loading thumbnail…

fork country

This interactive scatterplot explores global health indicators across countries, plotting health expenditure against life expectancy with each point colored by continent. Users select which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights points from that continent while fading others. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding, and renders all marks as SVG circles with opacity transitions. Data is loaded as CSV from a GitHub gist.

Loading thumbnail…

Fork of country

This interactive scatterplot visualizes COVID-19 metrics across countries, plotting attributes like new cases against total cases on logarithmic-scaled axes. Each circle represents a country, colored by continent, with a legend to the right. The visualization uses React with D3 v5 scales (`scaleLinear`, `scaleOrdinal`) to render SVG marks and axes. Data is loaded asynchronously from a CSV file using D3's `csv` method, with dropdown menus allowing users to switch between different case and death metrics for the x and y axes.

Loading thumbnail…

Fork of country

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using color to distinguish Adelie, Gentoo, and Chinstrap. The visualization is rendered as an SVG using D3 v5, with scaled linear axes and custom tick styling. It also maps bill length and depth to ellipse radii, though the circle radius remains fixed. The code loads data from a CSV file, parses numeric fields, and uses D3's scaleLinear, extent, axisLeft, and axisBottom functions to generate the plot.

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each flower sample drawn as a circle. The styling includes Poppins typography, muted teal marks, and light gray grid lines. Built with React and D3 v5, the code uses `csv` for data loading, `scaleLinear` for axes, and custom SVG components for rendering. Axes are customized with tick formatting and labels, and hover tooltips show the x-axis value.

Loading thumbnail…

Fork of Stacked Movie ratings

This stacked bar chart shows the percentage distribution of movie ratings across genres, with each bar segment representing a rating level from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked series, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for the y and x axes. Hovering over a segment triggers a tooltip displaying the precise percentage for that genre-rating combination. The chart is rendered as SVG using standard d3-selection methods, with data loaded from a CSV file containing proportional values that sum to 1 for each genre.

Loading thumbnail…

Stacked bar chart

This stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, with each bar segment colored by religion. Hovering over bars displays tooltips with exact values, while hovering over the legend highlights corresponding segments by overlaying a foreground layer. The visualization uses D3 v3 with d3.layout.stack for stacking, d3.legend for the color legend, and d3-tip for tooltips, rendering as an SVG with animated transitions. Data originates from Pew Research Center’s Global Religious Landscape report.

Loading thumbnail…

Fork of q2

This visualization shows the distribution of movie ratings across six genres using a horizontal stacked bar chart. Each genre’s bar is divided into five rating categories, from below 5.0 to above 8.5, with segment lengths proportional to the percentage of movies in that category. The chart uses d3.stack to compute the stacked segments, d3.scaleLinear for positioning, and d3.scaleBand for genre spacing. SVG rectangles render the bars, with hover tooltips revealing exact percentages via mouse events. The data comes from a CSV file, and colors are assigned via d3.scaleOrdinal.

Loading thumbnail…

Building height Bar Chart

This bar chart displays population scores for countries, using horizontal purple bars scaled from 0 to 100. The visualization uses D3 v5 with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, accompanied by `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes hover effects that reduce opacity.

Loading thumbnail…

Fork of Network Graph

This network graph visualizes a small social network of named individuals and their friendship connections, loaded from a `graph.json` file. It shows nodes as large light green circles with names, connected by blue directed lines, where link thickness indicates relationship value. Using the D3 v6 library, the layout is computed with `d3.forceSimulation`, combining forces for link distance, many-body repulsion, and collision avoidance. The SVG rendering includes interactive dragging, with node highlighting on hover.

Loading thumbnail…

Fork of MuscleCars tree

This interactive tree diagram displays the hierarchy of muscle car manufacturers and their models, branching from a central "Muscle Cars" root through Ford, Dodge, and their respective vehicles. Built with D3 v3, it renders the structure as an animated SVG tree where nodes can be clicked and expanded or collapsed. The visualization uses the `d3.layout.tree` API to position nodes, with custom styling for different node types and zoom-and-drag interaction enabled through `d3.behavior.zoom`. The underlying data comes from a `Tree.json` file containing the nested hierarchy.

Loading thumbnail…

Fork of Activity 8 Country

This example displays a choropleth-style map of India rendered as a single SVG path. It loads world country boundaries from the world-atlas TopoJSON dataset, filters the geometries to isolate India, and applies a Mercator projection fitted to the country’s bounding box. The code uses d3.json, topojson.feature, d3.geoMercator, and d3.geoPath to generate the map. The final visualization draws a static outline of India with no additional styling or interactivity.

Loading thumbnail…

Fork of Activity 8 Map

This visualization displays a world map using an equirectangular projection, with countries rendered in light green and an indigo stroke atop a sky-blue sphere. It shows geographic boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via d3.geoPath. The map supports interactive pan and zoom, implemented with d3.zoom, and country paths change to maroon on hover through CSS styling. The code uses d3.json to load the data and topojson.feature to convert it to GeoJSON.

Loading thumbnail…

Fork of Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, with a smooth curved line and a light green filled region beneath it. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `line`, and `curveBasis` to generate the SVG paths. The data is loaded from a remote CSV file, parsed with `d3.csv`, and formatted so the x-axis uses time scales while the y-axis applies a compact number format. Axis labels are styled with orange text, and grid lines are rendered via tick marks.

Loading thumbnail…

Fork of linechart

This chart visualizes the cost of sales from 2000 to 2013 using a simple line graph. The data, loaded from a CSV file via `d3.csv`, contains yearly cost values that are plotted against a linear Y-axis and a categorical X-axis. The visualization uses D3 version 6.7.0 to render an SVG line path with light green strokes, while red axis labels titled “Year” and “cost” are added using the `d3.select` and `d3.append` methods. The chart’s styling includes a red, underlined heading and a fixed width of 960 pixels.

Loading thumbnail…

Fork of Pie Chart

This pie chart displays the distribution of student counts across different majors at UNT, with each slice labeled with its value and a color-coded legend showing major names alongside student counts. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to compute slice geometry and assign colors, rendering paths and text labels in SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, with values formatted using `d3.format`.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This interactive scatter plot animates through the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Circles are colored by species using custom color mapping. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the chart, with SVG rendering and legend labels added directly to the DOM.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This visualization displays the Iris dataset as a scatter plot, with the x-axis cycling through petal width, sepal width, petal length, and sepal length over time, while the y-axis remains fixed on sepal length. Points are colored by species (setosa, versicolor, virginica) using a custom marker function. Built with d3.scaleLinear, d3.axisLeft, and d3.axisBottom, it animates via setInterval, updating axes and labels dynamically. The SVG render shows a legend, title, and axis labels, with data loaded from a remote CSV using d3.csv.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This example demonstrates a dynamic, animated scatterplot of the Iris flower dataset, showcasing how different species cluster across various measurement combinations. Through a cycling interval, the plot iterates through different x-axis variables (petal width, sepal width, petal length, and sepal length) while keeping sepal length on the y-axis, with species color-coded as skyblue, lightgreen, and orange. Built with D3.js version 6.7, the visualization uses a custom reusable `scatterPlot` function leveraging `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` for data loading, rendering circles in SVG with animated transitions and a static legend.

Loading thumbnail…

Fork of Fork of Area Chart Activity 8

This D3.js area chart visualizes the cost of sales from 2000 to 2013, with the x-axis representing the year and the y-axis representing the cost value. The chart combines a black smoothed line and a light green filled area beneath it, using the `areaGenerator` and `lineGenerator` with `curveBasis` to create curved paths. Data is loaded from a CSV file via `d3.csv`, parsed with `new Date()` for the year, and rendered as SVG. The visualization uses `scaleLinear` and `scaleTime` for axes, with `axisBottom` and `axisLeft` for tick marks, and includes custom styling from an external stylesheet.

Loading thumbnail…

Fork of Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013 using a smooth, curved line and a light green filled region beneath it. The visualization employs d3.csv to load external data, with d3.scaleTime and d3.scaleLinear mapping years and cost values, while d3.line and d3.area generators with curveBasis create the smoothed path. Axes are rendered using d3.axisBottom and d3.axisLeft, with rotated axis labels and custom tick formatting applied.

Loading thumbnail…

Fork of Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013 using a smooth basis-curved line and a light green filled region beneath it. The SVG rendering leverages d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft providing tick marks, while d3.line and d3.area generators with curveBasis create the path. Data is loaded via d3.csv from a GitHub gist, parsed into dates and numeric costs, and styled with custom CSS for colored axis labels and ticks.

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, presented as a smooth, curving line above a filled light-green region. The x-axis maps years using `d3.scaleTime`, while the y-axis uses `d3.scaleLinear` with a tick format via `d3.format`. The chart is rendered as an SVG using `d3.area` and `d3.line` with `d3.curveBasis`, and data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays the count of students from each major at UNT. The visualization uses a standard pie chart with labeled segments and a legend to identify each major, sourced from a CSV file hosted on GitHub. Built with D3 v5, the code uses the `d3.pie` and `d3.arc` functions to generate the chart as SVG, with `d3.scaleOrdinal` mapping colors to data values and `d3.format` for tick labels.

Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013 using data loaded from a CSV file. It renders an SVG path with a light green stroke, showing cost trends over time with labeled axes. The visualization uses D3 v7 scales and axes, specifically `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to construct the path. The chart is styled with red axis labels and a red title.

Loading thumbnail…

Pie Chart

A pie chart displays the count of students from each major at UNT, using a dataset fetched from a CSV hosted on GitHub. The chart uses D3 v5 with SVG rendering, employing the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to create the slices, colors, and labels. It also includes a legend with major names and student counts, formatted using `d3.format`.

Loading thumbnail…

Fork of Fork of Reusable Scatter plot Activity 8.2

This animated scatter plot visualizes the Iris dataset, cycling through four feature pairs to reveal relationships between sepal and petal measurements. Colored points distinguish the three iris species (setosa, versicolor, and virginica) with a color legend. Built with D3 v6, the visualization uses `d3.csv` to load data, `scaleLinear` with `extent` for axes, and `setInterval` to switch axis variables, re-rendering the chart with `axisBottom` and `axisLeft` while updating labels and titles dynamically.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8.2

This visualization displays the Iris dataset in an animated scatter plot that cycles through different sepal and petal measurements on the x-axis. Species appear as colored circles—skyblue, lightgreen, and orange for setosa, versicolor, and virginica—with a static legend on the left. Built with D3 v6, it uses `scatterPlot()` to generate SVG axes and scales, while `setInterval` updates the x-axis data every few seconds. The code loads CSV data via `d3.csv`, parses numeric fields, and renders circles with explicit `cx`, `cy`, `rx`, and `ry` attributes.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris flower dataset, cycling through petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Using d3.csv to load data and d3.scaleLinear with axisBottom and axisLeft for axes, the visualization updates every few seconds via setInterval, re-rendering circles with d3 transitions. Each species (setosa, versicolor, virginica) is color-coded with custom SVG circles, and a legend with colored point markers appears alongside rotating axis labels, all rendered as animated SVG in the browser.

Loading thumbnail…

Transforming Data

This example demonstrates data transformation from a CSV file using D3.js. The visualization loads fruit pricing data and calculates the average sepal length for each species using `flatRollup` and `sum`. The transformed data is then rendered as a JSON string in a `<pre>` element. The code utilizes `csvParse` for data ingestion, `select` for DOM manipulation, and the `flatRollup` aggregation API to summarize the dataset.

Loading thumbnail…

Activity 7

This horizontal bar chart displays the population of ten countries in 2010, using a D3.js `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The application, built with React, renders SVG `rect` elements scaled to population values, with D3's `format` function converting large numbers into abbreviated labels like “B” for billions. Data is loaded asynchronously via `d3.csv` from a remote GitHub repository, while custom `AxisBottom` and `AxisLeft` components generate the chart’s tick marks and labels.

Loading thumbnail…

Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for different car makes, with each bubble’s position on the x- and y-axes representing horsepower and torque, and its radius scaled to highway MPG using d3.scaleLinear. The color of each bubble encodes the car make via d3.scaleOrdinal with interpolated turbo colors. The chart is rendered as SVG with interactive tooltips on mouseover, and includes legends for bubble size and make colors. Data is loaded from a CSV file using d3.csv.

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes the relationship between sepal length and petal length for three iris species, using different symbol shapes to distinguish species categories. The visualization loads CSV data from a GitHub-hosted iris dataset, converts numeric fields, and renders it with d3.scaleLinear for both axes and d3.scaleOrdinal with symbolsFill to assign shape encodings. A custom shape legend displays the mapping between species and symbols. The code relies on d3.csvParse, d3.extent, and the d3.symbol generator to create the marks.

Loading thumbnail…

activity 7.2

This stacked bar chart visualizes how movie ratings are distributed across genres, with each bar segment representing the proportion of films falling into rating brackets from below 5.0 to above 8.5. Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses d3.stack to generate the stacked data, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for positioning. Data comes from a CSV file, and the SVG rendering includes a custom legend and axis labels.

Loading thumbnail…

IMDb Movie ratings

A stacked horizontal bar chart visualizes the distribution of IMDb ratings across six film genres. Each bar shows the proportion of movies falling into five rating brackets, from below 5.0 to above 8.5, with Action clearly dominated by lower scores and Documentary leaning toward higher ratings. The code uses D3.js v7 to load data from a CSV file, stack the categories with `d3.stack()`, scale the bars with `d3.scaleLinear` and `d3.scaleBand`, and add interactive tooltips that display precise percentages on mouseover via SVG rectangles.

Loading thumbnail…

BMI by Age

This visualization shows average Body Mass Index (BMI) across age groups, using orange rectangular bins to aggregate individual data points into age intervals. The chart applies the CDC formula (weight in pounds divided by height in inches squared, multiplied by 703) to compute BMI from the loaded dataset. It uses d3.csv for data loading, d3.bin for histogram binning, and d3.scaleLinear with d3.axisBottom and d3.axisLeft to render the axes. The SVG rendering includes gridlines via tick sizing and custom labels for both axes.

Loading thumbnail…

Activity 6

This example displays the first 10 rows of a CSV dataset as formatted JSON text on a page. The code uses D3 v5’s `csv` method to fetch data from a remote GitHub gist, then appends the sliced rows to the body with `select` and `append`. The visualization itself is minimal, showing raw data rather than a chart, with a black background and aqua text styled via an HTML `<pre>` element. The page also embeds a YouTube video in an iframe.

Loading thumbnail…

Transforming Data

This example demonstrates data transformation using the Iris dataset, loading CSV data and computing the average sepal length for each species. The visualization displays the resulting summary as formatted JSON text. Built with D3 v7, the code uses `csvParse` to parse the data, `flatRollup` and `sum` to aggregate values, and `select` to render the output. The example also illustrates asynchronous data loading with `fetch` and state management through a custom `setState` pattern.

Loading thumbnail…

5 Buddhas

A grid of scattered, rotated polygons in vibrant colors fills the screen, overlaid by a large, hand-drawn black-and-white path of a seated Buddhist figure. The piece uses React to render an SVG scene, mapping nested arrays to generate hundreds of random polygon positions, sizes, and fill colors. The central path data defines the buddha's intricate silhouette, while the randomized background creates a chaotic, abstract contrast.