K

kartheekgrpt@gmail.com

@KartheekGarapati·22 public vizzes

Loading thumbnail…

Area_Chart

This area chart visualizes expected EV production and sales in the US from 2010 to 2030. The graphic combines a smooth, black trend line with an orangered filled area beneath it, clearly showing the projected growth over time. The visualization is rendered as an SVG using D3 v5, with a time-scaled x-axis and a linear y-axis. The code leverages D3’s `area`, `line`, `curveBasis`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to generate the chart. Data is parsed from a CSV file hosted on GitHub, with years converted using `timeParse`.

Loading thumbnail…

PIE_CHART

This pie chart visualizes literacy rate distribution across selected countries, with each slice proportionally sized to its literacy rate and labeled with the value in thousands. A color-coded legend on the right identifies each country. Built with D3 v5, the visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute arcs and assign explicit section colors. Data is fetched as CSV from a GitHub repository, and both segments and legend text are rendered as SVG elements.

Loading thumbnail…

Activity6_Question2

This bar chart displays the top 20 countries by population in 2010, using a horizontal layout with red bars scaled linearly from zero to the maximum value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG rectangles for the marks. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values converted from thousands. Axes are custom React components, and hover tooltips show the formatted population using D3’s `format` with SI prefixes.

Loading thumbnail…

Activity6_Question6

This visualization shows the relationship between student study hours and exam performance, with gender distinguishing the data points. Male students appear as green star shapes while female students appear as red circles. The code uses D3 v6 to load a CSV from GitHub, parse the data, and render the scatter plot as an SVG. It employs D3's `scaleLinear`, `axisLeft`, `axisBottom`, `csv`, and `extent` functions for scaling, axes, and data handling, with a legend clarifying the shape-color mapping.

Loading thumbnail…

Activity6_Question 3

This stacked bar chart visualizes the distribution of fruit ratings across six categories, from “below 4.0” to “above 8.0.” Each horizontal bar represents a fruit, with segments colored by rating category and proportional widths indicating percentages. Built with D3 v7, the example uses `d3.stack()` for data transformation, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. It loads CSV data from a local file, renders SVG, and adds interactive tooltips on mouseover, styled with CSS.

Loading thumbnail…

Activity6_Question9

This bubble chart visualizes the relationship between screen size, camera resolution, and price for various mobile phone brands. Each circle represents a brand, positioned by its screen size on the x-axis and camera pixels on the y-axis, with the circle's radius encoding the device's price. The chart uses `d3.scaleLinear` for axis and size scaling, and `d3.scaleOrdinal` with `d3.schemeSet3` for brand coloring. Data is loaded from a local `Features.csv` file, rendered as SVG circles with black strokes and 0.7 opacity.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes, sourced from a CSV file. Data points are plotted with x-coordinates for horsepower, y-coordinates for torque, and bubble size scaled to MPG, colored by make using a d3.interpolateTurbo ordinal scale. Interactive tooltips display the car make on hover, while the D3.js code renders the chart as an SVG with animated transitions, including axes, a bubble-size legend, and a color legend for car manufacturers.

Loading thumbnail…

Activity6_Question6

This scatter plot visualizes the relationship between hours studied and exam scores for students, with data points colored by gender (blue for male, pink for female). It uses d3.csv to load the dataset from a GitHub URL, d3.scaleLinear to map data values to pixel coordinates, and d3.axisBottom and d3.axisLeft to render axes. The SVG chart includes a legend and displays axis labels for both variables.

Loading thumbnail…

Activity6_Question1

A horizontal bar chart displays the top 10 countries by population in the year 2000, with bars extending rightward from a blue baseline and red fills. The chart uses D3 v5 scales to map country names on the y-axis and population counts on the x-axis, with tick labels formatted using the `format('.2s')` shorthand. Data is loaded asynchronously from a CSV file via `d3.csv`, and the React-driven SVG renders axes and marks through custom components, including a tooltip showing the formatted population value on hover.

Loading thumbnail…

Activity6_Task3.2

This example renders a scatter plot of the Iris dataset, showing the relationship between sepal length and petal length while using different point shapes to distinguish the three species. The plot is built with d3.v7, using `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to map species to shapes, and `symbol` to generate the SVG path marks. The visualization is interactive, adapting to the window size, and fetches the raw `iris.csv` file from GitHub to parse and display the data.

Loading thumbnail…

Activity6_Task3.2

This example visualizes the Iris dataset as a scatter plot, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The plot uses D3 v6 to load CSV data, apply linear scales, and render SVG circles. Axes are generated with `axisLeft` and `axisBottom`, and axis labels are added via SVG text elements. The code also demonstrates direct access to the D3 API through destructured imports and includes margins and responsive sizing based on window dimensions.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for individual flowers while color-coding points by species (setosa, versicolor, virginica). The visualization is implemented with D3 v6, using `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Rendered as an SVG, the plot encodes sepal dimensions in the `rx` and `ry` attributes of each circle, though these are not visible with a constant radius. Axis labels are provided via SVG text elements.

Loading thumbnail…

Activity6_Task3

This example displays the text "Hello VizHub!" centered on the page. It loads D3 via UNPKG and uses the `d3.select` API to set the text of the message div. The code also demonstrates importing a local ES6 module, `myMessage.js`, which exports the displayed string. A CSS file styles the message with large, centered font.

Loading thumbnail…

Activity6_Question 2

This visualization presents a stacked bar chart of movie ratings by genre and percentage. Built with D3 v7, it loads CSV data and uses `d3.stack()` to create the stacked segments, with `d3.scaleOrdinal()` for color coding. A custom tooltip, implemented as a styled HTML div, displays the exact rating percentage on hover. The SVG output is generated via D3’s selection and layout APIs, including `d3.axisBottom` and `d3.axisLeft` for axes.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of titles falling into one of five rating bins. The code loads data from a CSV file and uses D3 v7’s `d3.stack()` to generate the stacked series, `d3.scaleBand()` for genre categories, and `d3.scaleLinear()` for the percentage axis. Interactive tooltips display exact percentages on mouseover, while an ordinal color scale distinguishes rating ranges.

Loading thumbnail…

Fork of Activity6_Task1

This visualization displays the populations of 30 countries in 2020 as a horizontal bar chart, with the x-axis labeled “POPULATION-2020.” Built with React and D3 v5, it uses `scaleBand` for the categorical Country axis and `scaleLinear` for the Population axis, with `csv` loading data from a GitHub-hosted dataset. SVG rectangles are rendered from the `Marks` component, with axes drawn by `AxisBottom` and `AxisLeft`, and a `format('.2s')` tick formatter converting numbers to abbreviated labels.

Loading thumbnail…

Activity6_Tutorial1

A horizontal bar chart displays population figures for ten countries in the year 2000, ranked by country name on the y-axis. The chart uses D3 v5’s `scaleBand` and `scaleLinear` for positioning, with React components rendering SVG rectangles and axes. Data loading relies on D3’s `csv` parser, applying a formatter that converts values to billions for tick labels.

Loading thumbnail…

6 buddhas

A decorative visualization renders a field of randomly positioned, overlapping SVG circles atop a floral background image. The circles, generated through nested React array maps, use random coordinates, sizes, and RGB color values, creating a dense, layered effect. The composition is anchored by a large, intricate Buddhist figure drawn as an SVG path, which is scaled and translated into the center of the chaotic circle field, merging organic imagery with structured geometric noise. The code relies on React for component rendering and SVG elements for all visual output.

Loading thumbnail…

5 Buddhas

Five overlapping buddha silhouettes form a layered mandala-like composition on a black background. The piece uses nested React maps to generate hundreds of random semi-transparent SVG polygons, each with randomized positions, colors from the RGB spectrum, and 45-degree rotations. The buddha paths are rendered from hardcoded SVG path data, scaled and translated in separate groups. The visualization combines generative geometry with static religious iconography using React and SVG elements.

Loading thumbnail…

5 Buddhas

Five Buddhas displays five dense, multi-layered scatter plots of colorful SVG circles overlapping a large, detailed Buddha silhouette path. The visualization is generated with React and rendered as an SVG. The code maps over an array of numbers, creating circles with random positions, colors, and opacity, while the Buddha shape is defined by a complex SVG path element.

Loading thumbnail…

Fork of Buddha in colors -overlapping Buddha

A black background displays a dense cluster of small circles, randomly placed across the canvas using nested `Array.map` calls and `Math.random` to determine their x and y coordinates. Each circle uses a random RGB fill and opacity. Overlaid on top is a Buddha silhouette drawn as a single SVG `path`, rendered with a thick stroke in a white color scheme, creating a contrasting colorful scatter effect behind the religious figure. The visualization uses React to generate the SVG elements within a 960x1000 coordinate space.

Loading thumbnail…

Fork of Buddha in colors -overlapping Buddha

A black background displays a dense cluster of small circles, randomly placed across the canvas using nested `Array.map` calls and `Math.random` to determine their x and y coordinates. Each circle uses a random RGB fill and opacity. Overlaid on top is a Buddha silhouette drawn as a single SVG `path`, rendered with a thick stroke in a white color scheme, creating a contrasting colorful scatter effect behind the religious figure. The visualization uses React to generate the SVG elements within a 960x1000 coordinate space.