R

rikhitakoganti12

@rikhitakoganti12·35 public vizzes

Loading thumbnail…

Presentation_Task7

This visualization displays a hierarchical tree of product categories and subcategories for the PeerFirm company, with the root node connecting to three main branches: Accessories, Bikes, and Components, each further subdivided into specific items. The SVG rendering uses D3 v6’s `stratify()` and `tree()` layouts to position nodes, with animated paths drawn to connect parent–child relationships and circles representing each node. Text labels appear inside the circles, with transitions staggered by node depth, while a gradient background and custom stroke colors style the overall presentation.

Loading thumbnail…

Presentation_Task6

This stacked area chart visualizes the total products available across five categories—Cosmetics, Clothing, Food/Beverages, Technology, and Books/Toys—from 2010 to 2023. Using d3.stack and d3.area with curveBasis, the SVG rendering displays each category as a filled area, colored via d3.scaleOrdinal with d3.schemeDark2. Labels are positioned through d3-area-label, while axes use d3.axisBottom and d3.axisLeft with a time scale for years. The code reads data from a CSV file and includes hover tooltips via SVG title elements.

Loading thumbnail…

Presentation Task5

A stacked bar chart displays the estimated 2010 religion breakdown of the world’s 20 most populous countries, sourced from Pew Research data. Hovering over bars reveals tooltips with payment-type–based revenue values, while hovering over the color legend highlights individual religion layers. The visualization uses D3 v3 with d3.layout.stack for stacking, d3.legend for the color key, and d3-tip for tooltips. The SVG output includes animated transitions and a custom tick formatter converting large numbers to billions.

Loading thumbnail…

Presentation_Task4

This bar chart displays the average customer spending on each product category, with horizontal bars representing the price values from the dataset. The visualization uses D3 v5 to load CSV data and render an SVG, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Axis labels are generated with `axisLeft` and `axisBottom`, while each rectangle’s height is set using the y-scale’s bandwidth, and hover effects reduce opacity via CSS.

Loading thumbnail…

Presentation_task3

This pie chart visualizes the number of unique products purchased across different shopping malls, with each slice colored and labeled by product count. Built with D3 v5, the visualization uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for color mapping, and `d3.format` for numeric tick labels. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes interactive legends displaying mall names and corresponding values.

Loading thumbnail…

Presentation_Task1

This chart displays the relationship between product quantity and price for five product categories, with each category represented by a distinct color: Clothing, Food & Beverage, Technology, Cosmetics, and Shoes. The data comes from a remote CSV file loaded via the `csv` function, and the visualization is rendered as an SVG using D3.js v5. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes, and `select` appends the chart to the body. Each data point is drawn as a circle with a fixed radius, and the color is determined by the category using a custom switch function.

Loading thumbnail…

Presentation_Task2

This visualization shows a red line chart tracking product prices from 2019 to 2023, with each year plotted as a point connected by a path. The data, loaded from a CSV file containing shopping mall transaction records, is aggregated by year. The code uses D3 v7 to create an SVG graphic, employing `d3.scaleBand` for the x-axis years, `d3.scaleLinear` for the price range, and `d3.line` to generate the path. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and text labels identify the year and price dimensions.

Loading thumbnail…

Activity8_Task3_linechart

This line chart shows the cost of sales from 2000 to 2013, with each year mapped along a band scale and cost values along a linear scale. The SVG visualization draws a thick yellow polyline through the data points, which are loaded from a local CSV file. The chart uses d3.scaleBand and d3.scaleLinear for positioning, d3.axisBottom and d3.axisLeft for tick marks, and d3.line to generate the path. Axis labels are added as SVG text elements in blue.

Loading thumbnail…

Assignment2_Task7_NetworkGraph

This interactive network graph visualizes social connections among seven named individuals, with link weights represented by line thickness. The graph is rendered as an SVG using D3.js v4, employing a force-directed layout to position nodes and links dynamically. Users can click and drag nodes to explore the network structure. The visualization uses the `d3.layout.force` API to simulate physical forces, calculating node positions and link movements in real-time, while node labels and link strokes are styled via CSS.

Loading thumbnail…

Assignment2_Task7_Part1

An interactive collapsible tree diagram visualizes a hierarchical dataset of fruits and their varieties from a JSON file. Node types receive distinct colors, and rectangular boxes represent each item. The visualization uses D3.js v3 for layout and rendering, with SVG elements for nodes and links. It supports zooming and panning via `d3.behavior.zoom`, and includes CSS-defined tooltips and drop shadows for enhanced interactivity.

Loading thumbnail…

Assignment2_Task6_CountryMap

This example displays a map of Greenland rendered as a filled SVG path against a blank background. It loads geographic data from the world-atlas TopoJSON collection, extracts the Greenland feature using `topojson.feature`, and fits a `d3.geoMercator` projection to the country’s bounds with `fitSize`. The resulting shape is drawn on an SVG canvas using a `d3.geoPath` generator. D3 v5 and the topojson-client library are loaded via CDN to handle the data processing and map rendering.

Loading thumbnail…

Assignment2_Task6

This visualization displays an interactive world map using a spherical representation with geographic country boundaries. The map is rendered as SVG with an equirectangular projection, allowing users to zoom the entire globe. Countries are colored pale green with black borders and turn white when hovered. The code uses `d3.geoPath` and `d3.geoEquirectangular` for map rendering, `d3.zoom` for pan-and-zoom interactions, and the `topojson` `feature` method to convert TopoJSON data from the world-atlas dataset into GeoJSON for drawing country paths.

Loading thumbnail…

Assignment2_Task5

This interactive scatter plot lets users explore relationships between car features from a CSV dataset by selecting any column for the X and Y axes via dropdown menus. Using D3 v5, the visualization renders colored circles on an SVG canvas, with axes and labels that update dynamically. The implementation leverages `scaleLinear`, `axisBottom`, `axisLeft`, and an enter-update-merge pattern, while `transition.attr` animates the circles to their new positions over two seconds when the selected attributes change.

Loading thumbnail…

Assignment4_Task4_BubbleChart

This bubble chart displays chip ratings on the x-axis against sodium levels on the y-axis, with bubble size representing calorie content and color indicating the chip brand. The visualization uses d3.csv to load data and d3.scaleLinear for positioning and sizing, while d3.scaleOrdinal with d3.schemeSet1 maps brand categories to colors. The SVG rendering includes axis labels, a calorie size legend with representative circles, and a categorical color legend listing seven chip brands.

Loading thumbnail…

Assignment2_Task3

This scatter plot visualizes the relationship between height and weight for men and women, using pink and blue markers to distinguish categories. Built with React and D3 v5, it loads CSV data from a GitHub gist and renders an SVG chart. The code uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map values, while circles are appended via `selectAll` and `join`. Axis labels are added as SVG text elements.

Loading thumbnail…

Assignment2-Task2

This stacked bar chart compares the counts of ten fast-food and coffee chains across ten cities in the Dallas area, with each bar segment representing a specific brand's store count per city. The chart uses a horizontal layout, with cities on the y-axis and a linear count scale on the x-axis. The visualization is built with D3.js, using `scaleBand` and `scaleLinear` for axes, `d3.stack()` to aggregate the categorical data, and `scaleOrdinal` with a custom color array for series differentiation. SVG rectangles render the bars, and mouse events trigger a custom tooltip that displays the precise store count for each segment. Interactive highlighting is achieved by adjusting rectangle opacity on hover, while a legend and axis labels clarify the data.

Loading thumbnail…

Assignment2_Task1

This horizontal bar chart displays the number of software developers per U.S. state, using a named dataset sourced from a CSV file. It visualizes the data with orange bars, ordered along a band scale for state names and a linear scale for developer counts, rendered as SVG. The implementation uses D3 v5 methods like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, along with hover opacity changes on the rectangles. The chart’s margins and explicit y-axis labels make state comparisons clear, with California leading at over 600,000 developers.

Loading thumbnail…

Activity8_Task6_Network Graph

A social network graph visualizes friend connections among ten people, with nodes labeled by name and linked by directional lines with arrow markers. The network uses D3's force-directed layout (`d3.forceSimulation`) with link distance, charge, collision, and centering forces to position nodes. Nodes are green circles with white strokes that highlight yellow on hover, while links are blue. The data loads from a local `graph.json` file, and the visualization renders entirely as SVG, with drag interactions enabled via D3's `d3.drag` behavior.

Loading thumbnail…

Activity8_Task2_Pie Chart

This pie chart displays the distribution of student counts across different majors at the University of North Texas, using proportional slices with numeric labels and a color-coded legend. The visualization loads CSV data from a GitHub gist using d3.csv, then applies d3.pie to compute arc angles and d3.arc for SVG path generation. Color mapping uses d3.scaleOrdinal with custom section colors, while d3.format abbreviates student values in thousands. The chart renders as SVG with appended legends, text labels, and styled rectangles indicating each major's name and count.

Loading thumbnail…

Activity8_task6_MuscleCars tree

This example shows an animated, interactive tree diagram of muscle car models, branching from a root node through Ford and Dodge to specific vehicles and their trims. Built with D3 v3, it renders the hierarchy as an SVG using a collapsible tree layout (`d3.layout.tree`), with colored rectangles for nodes, links, and arrow markers defined in a `defs` section. The code supports zoom and drag via `d3.behavior.zoom`, and includes tooltips and collision detection between nodes. Data comes from a local `Tree.json` file.

Loading thumbnail…

Activity8_Task5_CountryMap

This example displays a map of Australia rendered as an SVG using D3.js v5 and TopoJSON data from the world-atlas package. It uses the `d3.geoMercator` projection and `d3.geoPath` to draw the country’s outline onto a 960×500 canvas. The code fetches geographic data via `d3.json`, selects the Australia feature from the TopoJSON, and appends the path to the page.

Loading thumbnail…

Activity8_Task5_WorldMap

This world map visualization displays countries as light green polygons with indigo borders on a skyblue spherical backdrop, using an equirectangular projection. It renders topojson country boundaries from the world-atlas dataset via d3.geoPath and d3.geoEquirectangular. The map supports zooming through d3.zoom, while CSS hover styling changes country fill colors to maroon. All shapes are drawn as SVG paths in a single svg element.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis every few seconds while keeping petal width on the y-axis. Points are colored by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica—with a legend and axis labels. Built with D3 v6, the reusable `scatterPlot` module uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render scales and axes, while ES6 modules load CSV data from a GitHub gist. The animation leverages `setInterval` to update the x-value mapping and re-render the SVG.

Loading thumbnail…

Activity8_Task4

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth curve to connect annual data points and a light green fill beneath the line to emphasize the trend. The visualization is built with D3 v5, employing `scaleTime` and `scaleLinear` for axes, along with `line` and `area` generators with `curveBasis` to create the smooth path. Data is loaded from a CSV via `d3.csv`, parsed into `Date` and numeric cost values, and rendered as an SVG with styled axis labels and tick marks.

Loading thumbnail…

IMDb Movie ratings

A stacked horizontal bar chart shows the distribution of IMDb ratings across six movie genres, with each bar segment representing the percentage of movies falling into rating bands from "below 5.0" to "above 8.5". The code loads CSV data via `d3.csv`, stacks series using `d3.stack`, and scales positions with `d3.scaleLinear` and `d3.scaleBand`. Interactive tooltips appear on mouseover via D3 event handlers. The visualization is rendered as SVG with a custom ordinal color scale and legend.

Loading thumbnail…

Activity 7_Part1

This visualization displays the population of ten countries in 2020 as a horizontal bar chart, with countries sorted on the y-axis and population shown on the x-axis. The bars are rendered as SVG rectangles using React components, with the population values scaled by a linear axis and formatted in a compact, readable way (e.g., "1.2B"). The chart is built with D3.js v5 for data loading and scaling functions, including `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `csv` for fetching the dataset from a remote GitHub source. Axis ticks and labels are styled with a brown line color and a Poppins font, and each bar includes a tooltip showing the population value.

Loading thumbnail…

Activity 7_Part2

This example shows a horizontal bar chart of population data for 20 countries in 2020, using purple bars to encode each country’s population value. The visualization loads population data from a GitHub-hosted CSV file via `d3.csv` and renders the chart as SVG elements using React components. It applies `d3.scaleBand` for the categorical country axis, `d3.scaleLinear` for the numeric population axis, and `d3.format` to abbreviate tick labels from billions to “B”. The code demonstrates local ES6 module imports and D3 integration within a React framework.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position mapped by d3.scaleLinear axes for horsepower (x) and torque (y), while its radius encodes highway MPG using another linear scale. Color distinguishes car makes via d3.scaleOrdinal with d3.interpolateTurbo, and interactive tooltips appear on mouseover using D3 event handlers. The SVG renders from a CSV file, with a legend for bubble sizes and color categories, all built with d3.v7.

Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers. Each point’s shape encodes the flower species using D3’s `symbolsFill` and `symbol()`, with a legend generated via a custom `shapeLegend` component. The chart uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs, pulling data from a remote CSV file. A custom `symbolGenerator` renders distinct geometric markers (circles, squares, etc.) for each species, while axes and labels are assembled through the reusable `axes` module.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, comparing petal length and width for three species: setosa, versicolor, and virginica. Each circle is colored according to species—blue, green, or purple—using a simple switch function. Built with D3 v6, the visualization loads CSV data from a GitHub gist and uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes in SVG. The plot demonstrates D3’s data-joining with `join('circle')`, mapping attributes like `cx`, `cy`, and `fill` directly from parsed data fields.

Loading thumbnail…

Assignment1_Q10

This example loads a CSV dataset from a GitHub gist using D3’s `csv` function and displays the first ten rows as formatted JSON inside a `<pre>` element. The page renders a static SVG background image embedded as a base64-encoded JPEG, with D3 v5 loaded via UNPKG. The code imports utilities from D3, appends text elements to the document body, and uses a local ES6 module, though the module’s message is not displayed. It demonstrates basic data fetching, JSON serialization, and SVG backdrop composition.

Loading thumbnail…

Activity 6

This example displays the first 10 rows of a CSV crop dataset as JSON text on a black background, using D3 v5 to load and format the data. The code imports `select`, `csv`, and `csvFormat` from D3, fetches the CSV via a gist URL, and appends a styled `<pre>` element to the body, with the file size computed in kilobytes.

Loading thumbnail…

BMI by Age

This visualization shows the average Body Mass Index (BMI) across different ages, using a bar chart where each bar represents a binned age range and its height corresponds to the mean BMI for that group. The code loads data from a CSV file via a Gist URL, parses and transforms the values to calculate BMI, and uses D3 v7’s `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, `bin`, and `sum` functions to bin the data, scale the axes, and render the SVG output. The axes have grid lines, and the chart includes a title and labeled age and BMI axes.

Loading thumbnail…

Transforming Data

A data-transformation example reads the classic Iris dataset from a CSV and computes the average sepal length per species using D3’s `flatRollup` and `sum` APIs. The result is rendered as a formatted JSON summary displayed inside a `<pre>` element, demonstrating the library’s data-wrangling capabilities. The code highlights loading D3 via UNPKG and the use of local ES6 modules alongside a state-management pattern for asynchronous data fetching.

Loading thumbnail…

5 Buddhas

The visualization "5 Buddhas" renders a cluster of five Buddha-like figures constructed from SVG polygons and paths on a black background. Built with React and ReactDOM, it generates a field of random, colored polygons via nested array maps, filling the canvas with semi-transparent, rotated shapes. The central figures are drawn using detailed SVG path data, scaled and translated into position, while the `fill` and `opacity` attributes create vibrant, overlapping hues against the dark backdrop.