D

dabbararakshitha@gmail.com

@Rakshithadabbara·27 public vizzes

Loading thumbnail…

Project 2

This interactive climate dashboard presents global temperature trends, CO₂ emissions, and their correlations through eight switchable Plotly charts. Users explore a time-series line chart of average temperature, a bar chart of emissions over time, a scatter plot linking CO₂ to temperature, and a bubble chart encoding year via marker size and color. Additional views include multi-line country comparisons, continent-level bar charts, a pie chart of emission sources, and a static heatmap. The interface uses Plotly's `newPlot` API with tabbed navigation controlled by custom JavaScript functions, fetching data from two CSV files hosted on GitHub.

Loading thumbnail…

Project 2

This dashboard visualizes global climate trends with three interactive tabs for temperature anomalies, CO₂ emissions, and their relationship. The temperature view uses a red line-and-marker scatter plot, while emissions appear as green bars over time, and the scatter plot shows purple markers correlating CO₂ with temperature. It loads its data from a GitHub-hosted CSV file. Built with D3 v7 for data loading and Plotly.js for chart rendering, the interface uses Tailwind CSS with tab-switching logic implemented in vanilla JavaScript.

Loading thumbnail…

line chart

This interactive line chart visualizes global temperature anomalies over time. It plots yearly temperature anomaly data from Berkeley Earth, sourced through Our World in Data, with red markers and lines. The visualization uses Plotly's `newPlot` API to render the chart within an HTML dashboard, while the data is loaded and parsed using `d3.csv` with `d3.autoType`. The page is styled with Tailwind CSS.

Loading thumbnail…

Activity_7.1_2

This area chart visualizes yearly temperature data as a light blue filled region beneath a line, using an SVG rendering approach. The code loads JSON data from a remote GitHub gist, then applies linear scales for year and temperature values. It constructs the shape using d3.area and renders axes with d3.axisBottom and d3.axisLeft, along with labeled X and Y axes for year and temperature in degrees Celsius.

Loading thumbnail…

Activity_7.1

This example shows a pie chart of survey responses by age group. The chart is built with d3.pie() and drawn with d3.arc(), colored using d3.scaleOrdinal() with the d3.schemeCategory10 palette. Each slice is labeled with its age group, and a legend on the upper left matches colors to categories. Data is loaded asynchronously from a remote JSON file using d3.json(). The visualization is rendered as SVG within a fixed 500 by 400 pixel viewport, with all graphical elements customized through D3’s selection and attribute methods.

Loading thumbnail…

Activity_7.1

This interactive scatter plot cycles through different Iris flower measurements, animating the x-axis to display petal width, sepal width, petal length, and sepal length in sequence. The visualization uses D3.js to load CSV data, scale axes, and render animated circles colored by species, with a custom legend and axis labels updating dynamically.

Loading thumbnail…

Activity6_Q9

This bubble chart compares engine performance across car makes, plotting horsepower on the x-axis against torque on the y-axis while encoding highway fuel efficiency as the radius of each circle. The color of each bubble corresponds to the car manufacturer, using a categorical scale with `d3.schemeTableau10`. The visualization is rendered as SVG using D3 v7, with linear scales for the axes and a sqrt scale for bubble size. Data comes from a local `cars.csv` file with aggregated values per make.

Loading thumbnail…

Activity6_4

This bubble chart uses D3.js v7 to show the correlation between engine horsepower, torque, and highway MPG for ten car makes. A circle's horizontal position encodes horsepower, vertical position encodes torque, and area encodes MPG, with color distinguishing car brands. The visualization includes legends for both color and size mappings. Data is loaded from a local CSV file using `d3.csv()`, and scalings are applied with `d3.scaleLinear` and `d3.scaleSqrt`. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, while the chart itself is drawn as SVG circles.

Loading thumbnail…

Activity6_Q6

A scatter plot displays horsepower versus torque for ten car brands, using a point for each model in a dataset. The visualization employs D3 v7 with SVG rendering, showing the relationship between the two engine performance metrics on a linear scale. The code uses `d3.scaleLinear` for both axes, `d3.extent` to determine domain ranges, `d3.axisLeft` and `d3.axisBottom` for ticks, and a `d3.scaleOrdinal` color scheme to distinguish brands. Axis labels, rendered via SVG text elements, identify the variables in green type.

Loading thumbnail…

Activity6_3.2

This interactive scatter plot visualizes the classic Iris dataset, using D3.js v7 to map sepal length against petal length. Points are encoded with both color and shape to distinguish the three iris species (Setosa, Versicolor, and Virginica), with a legend showing the shape-to-species mapping. The visualization pulls data from a remote CSV file, parses it, and uses D3 scales for linear axes. The rendering uses D3 modules for scatterplot creation and shape-based legends, with circles, triangles, and squares representing each species.

Loading thumbnail…

Activity6_3

This D3.js (v7) SVG scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length. Each of the 150 flowers is shown as a circular point, with colors distinguishing the three species: skyblue for Setosa, lightgreen for Versicolor, and orange for Virginica. The visualization uses `d3.csv` to load data from a GitHub repository, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render the axes. Green Times-font labels identify the quantitative axes.

Loading thumbnail…

Activity6_Q2

This stacked bar chart visualizes the normalized proportions of horsepower, torque, and highway MPG for 31 car brands, showing how each metric contributes to a total value of 100% per make. The code uses d3.stack() to compute the layered segments, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the proportional x-axis. Data is embedded directly in the script and rendered as SVG rectangles, with a legend and percentage-formatted axis ticks.

Loading thumbnail…

Activity6_2

This visualization uses a stacked horizontal bar chart to show the distribution of IMDb movie ratings across six genres, comparing the percentage of titles falling into five rating bins from below 5.0 to above 8.5. The chart encodes each rating category with a distinct color via d3.scaleOrdinal, while d3.stack calculates the stacked segments. Rendering as SVG with d3.v7, the example positions axes using d3.axisBottom and d3.axisLeft, and implements custom mouseover interactions with tooltips displaying precise percentages. The data comes from a CSV file containing genre and rating proportion values.

Loading thumbnail…

Activity6_Q 1.2

A horizontal bar chart displays the 20 most populous countries in 2010, sorted in descending order, using steelblue bars. The chart is rendered as an SVG with D3 v7, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Population data is loaded from a remote CSV file via `d3.csv`.

Loading thumbnail…

Activity6_Q1.1

This bar chart displays the population values for the top ten countries in the year 2020, sorted by the source CSV data order. It uses D3 v7 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft` to visualize the data. The chart reads from a GitHub-hosted CSV file and uses a module-based structure with separate components for axes and marks.

Loading thumbnail…

Fork of Activity 7

This visualization shows the top 30 countries by 2020 population as a horizontal bar chart, with the x-axis formatted in billions using d3's `format` function. The chart uses React and d3.v5's `scaleBand` and `scaleLinear` to position bars, while `AxisBottom` and `AxisLeft` render tick marks. Data is loaded asynchronously via `useData` with d3's `csv` parser from a GitHub-hosted CSV file. SVG rectangles in `Marks` display the values, with native `<title>` elements providing hover tooltips.

Loading thumbnail…

Activity6_Q1.1

A horizontal bar chart ranks the ten most populous countries in the year 2000, showing each country’s population as a blue bar. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleBand` for positioning, while CSV data is loaded via the `useData` hook. Custom `AxisBottom` and `AxisLeft` components render tick marks, and hover tooltips display exact population values through SVG `<title>` elements.

Loading thumbnail…

Activity6_Q1.2

This D3.js v7 bar chart visualizes the population of 20 countries for the year 2000, sorted along a linear x-axis scale. Each country is represented by a light green rectangle, with its length proportional to population, using `d3.scaleLinear` and `d3.scaleBand` for positioning. The chart renders as an SVG, with axes annotated via `d3.axisBottom` and `d3.axisLeft`, including tick labels formatted to show millions and billions. Population data is fetched asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Activity_6 Q1.1

This horizontal bar chart displays the population of ten countries in the year 2000, with bars extending rightward from a shared baseline. The visualization uses React to render an SVG, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Colored green with blue tick lines, each bar includes a tooltip showing the formatted population value (e.g., “1.2B”). The data is loaded from a remote CSV using D3’s `csv` parser, which multiplies the raw values by 1000 to obtain the final population figures.

Loading thumbnail…

Activity6_2000

This bar chart displays the populations of ten countries in the year 2000, using green horizontal bars sorted along a categorical y-axis. The chart loads CSV data from a GitHub repository, parses the population values, and scales them linearly on the x-axis using d3.scaleLinear, while d3.scaleBand positions each country on the y-axis. React components render SVG rectangles for each bar, with axes and tick labels generated by custom AxisBottom and AxisLeft components. Tooltips reveal formatted population values via SVG title elements, and the chart includes a labeled x-axis for context.

Loading thumbnail…

Activity_6

This example uses D3.js v6 to display a simple text message on a webpage. The code selects a div element and uses the `select` function from D3 to set its text content. A separate ES6 module exports the string "Hello VizHub!" which is then applied to the selected element. The styling, defined in CSS, centers the text and sets a large font size for visual emphasis.

Loading thumbnail…

Activity_6 Task - 1

This example displays a simple web page with the text “Hello VizHub!” centered prominently using CSS. The visualization uses D3.js (version 5) to select the HTML element with an ID of “message” and set its text content dynamically. The code imports the `select` function from D3 and a custom ES6 module that exports the message string. The page also defines a regular expression pattern, though it is not used in rendering. The styling applies a large font size and centers the text horizontally for clear presentation.

Loading thumbnail…

Fork of 6 Buddha's image

This visualization displays six overlapping Buddha images rendered as complex SVG paths, each composed of layered concentric circles with randomized coordinates, colors, and rotations. The code uses React to render SVG elements, mapping over nested arrays to generate up to 21³ circles with dynamic fill colors derived from random RGB values and transforms. The Buddha paths are drawn from large string data with scale and translate transformations. A background flower image is applied via CSS, while React and ReactDOM handle the component mounting and DOM updates.

Loading thumbnail…

6 Buddha's image

A dense arrangement of overlapping Buddha path outlines repeats in a rotated, layered pattern, creating a kaleidoscopic effect over a floral background image. The visualization uses React to render SVG circles with random coordinates, colors, and opacity, while the Buddha shape itself comes from a single complex SVG path element. The code generates hundreds of these scattered elements using nested array maps and the `Math.random()` function for chaotic positioning, with the background set via CSS. ReactDOM mounts the entire composition into the root div, combining generative randomness with a fixed iconic silhouette.

Loading thumbnail…

Fork of Buddha's image

The visualization renders a chaotic scatter of colored, rotated polygons layered beneath a detailed SVG path drawing of Buddha's image. Using React to generate the geometric elements, each polygon receives random coordinates, colors, and rotations, creating an abstract, overlapping backdrop. The Buddha path is drawn with a single complex `d` attribute, scaled and translated into position. The result contrasts the structured, recognizable figure with the dense, randomized foreground of semi-transparent shapes, demonstrating React's ability to compose both procedural and hand-authored SVG content.

Loading thumbnail…

Fork of Buddha's image

The example displays a series of overlapping, multi-colored Buddha-like silhouettes arranged diagonally across a black background, with varying scales and opacities creating a depth effect. Built with React and rendered as SVG polygons, the code generates random colored triangles based on a numeric array, while the Buddha paths are repeated with different fill colors, stroke styles, and transform attributes. The visualization uses ReactDOM to render the SVG element, with random number generation for polygon points and colors, and explicit SVG path data for the Buddha shapes.

Loading thumbnail…

Buddha's image

The visualization depicts a Buddha-like figure formed from hundreds of overlapping semi-transparent circles, plotted on a black background. Using React and SVG, the code generates random circle positions and colors via nested array mappings, with each circle given an opacity of 0.8, creating a vibrant, layered mosaic effect. A detailed SVG path, drawn from a complex coordinate series, outlines the Buddha's silhouette, while the background circles fill the space around and within the figure. The rendering relies on ReactDOM to inject the SVG elements dynamically, combining generative randomness with a fixed geometric shape.