K

krishnavisheshkatta@my.unt.edu

@visheshkrishna·20 public vizzes

Loading thumbnail…

Area chart

This area chart visualizes the change in a numeric value over a sequence of years, with the area beneath the line filled in steel blue. The chart is rendered as an SVG and is built using D3.js v6’s modular API, including `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.area` to generate the area path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`. Data is fetched from a remote CSV file hosted on GitHub.

Loading thumbnail…

PieChart For Restaurant

This pie chart visualizes the profit in millions for various Indian restaurants, with each slice labeled directly and accompanied by a legend listing restaurant names and values. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths and text elements. Data is loaded as CSV from a GitHub gist, and the visualization includes a custom color scale and formatted numeric labels. The page styling relies on CSS with the Poppins font against a dark background.

Loading thumbnail…

PieChart For Restaurant

This pie chart visualizes the profit margins of the top 10 Indian restaurants, with each slice sized by profit in millions and labeled with its value. The chart uses D3 v5 APIs including `pie`, `arc`, and `scaleOrdinal` to compute slice angles, generate SVG path segments, and assign categorical colors from a predefined palette. A legend on the right lists restaurant names alongside their corresponding profit values, and the data is loaded from a CSV hosted on GitHub.

Loading thumbnail…

Task 9 tutorial-1

This animated scatter plot explores the Iris dataset, cycling through four different feature pairs on the x-axis (petal width, sepal width, petal length, sepal length) while displaying the petal width on the y-axis. The visualization uses D3.js (v6.7.0) with SVG rendering, featuring color-coded species markers with distinct styles. It demonstrates D3's `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, along with a custom reusable `scatterPlot` module. The animation utilizes `setInterval` to rotate through the x-axis attributes, updating the chart and its labels dynamically.

Loading thumbnail…

Activity6_Task4 question

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for a dataset of fictional car makes. Each circle's x-position maps to horsepower, its y-position to torque, and its radius to highway MPG. Color encodes the car make, with a legend showing the MPG scale and color categories. The visualization uses D3.js v7 with `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for color assignment. Animated opacity changes and a custom tooltip appear on hover via D3 transitions, with the SVG rendered directly from `bubblechart.csv`.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Circles are positioned by horsepower and torque on the x- and y-axes, with their radius scaled to highway MPG and color assigned via a categorical scale using `d3.interpolateTurbo`. A legend shows the MPG radius mappings, and interactive tooltips display the car make on hover. The D3 code uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for rendering, with SVG output and animated transitions on the tooltip.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for fictional car makes. Each circle's x-position maps to horsepower, y-position to torque, and radius to MPG, with color distinguishing individual makes. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for coloring, and `d3.interpolateTurbo` for the color palette. Hovering reveals a tooltip, and a legend displays the MPG scale. Data comes from the included `bubblechart.csv` file, rendered as SVG.

Loading thumbnail…

Activity6_Task3.2

This example displays a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by distinct symbols and a corresponding legend. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position marks and generate shapes. Data is loaded from a remote CSV via `csvParse` and fetched asynchronously. The visualization also demonstrates modular ES6 imports for reusable axis and legend components.

Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked with the most populous at the top. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are parsed from a remote CSV file via `d3.csv` and formatted using `d3.format` to show values in billions. SVG rectangles with tooltips, styled in light green, represent each country's population.

Loading thumbnail…

Activity6_Task3

This visualization shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each species (setosa, versicolor, virginica) colored using custom markers—skyblue, lightgreen, and orange respectively. The plot also encodes sepal dimensions by setting each circle’s rx and ry attributes to the sepal length and width values, creating elliptical shapes. The code uses d3.csv to load data, d3.scaleLinear with extent for scales, and d3.axisLeft and d3.axisBottom for labeled axes. SVG circles are joined to the data, with axis labels added as text elements.

Loading thumbnail…

Activity6_Task2

A stacked horizontal bar chart displays the percentage of IMDb movie ratings across six genres, broken into five rating brackets from below 5.0 to above 8.5. The chart uses D3 v7’s `d3.stack` and `d3.scaleBand` to generate the bars, with `d3.scaleOrdinal` assigning distinct colors to each rating category. Interactive tooltips appear on mouseover, showing the exact percentage for a specific genre and rating bracket. Data comes from the included CSV file, and the visualization renders as SVG.

Loading thumbnail…

Fork of activity6_task1 Q1

This example displays the population of ten countries in the year 2000 as a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The bars are rendered as green SVG rectangles using React's JSX, with axis ticks generated by the `AxisBottom` and `AxisLeft` components. The chart loads its data from a CSV file using the `d3.csv` function and scales the axes with `d3.scaleBand` and `d3.scaleLinear`. Tooltip text is provided via the `d3.format` function, which also customizes the x-axis tick labels to show values in billions.

Loading thumbnail…

Activity-6 Task 1

This example uses D3.js and React to render a simple visualization of text elements. It loads D3 via UNPKG and demonstrates importing both D3 API functions and local ES6 modules. The code uses the `select` method from D3 to set text content of a `div` element, while also defining a regular expression and a constant value. The page includes styled SVG axes with blue tick lines and green marks, though no actual data plot is visible in the provided code.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of cosmetic brand ratings across five percentage-based categories, from "below 5.0" to "above 8.5". Each horizontal bar represents a brand (e.g., Clinique, ELF, Sephora), with segments colored by rating category. The D3.js code uses `d3.stack()` to compute cumulative values, `d3.scaleLinear()` for the x-axis, and `d3.scaleBand()` for the categorical y-axis. It renders to SVG, includes interactive tooltips on mouseover showing exact percentages, and loads data from a CSV file.

Loading thumbnail…

activity6_Task 1

This example presents a horizontal bar chart showing the 2010 population for 20 countries, sourced from a GitHub-hosted CSV file. It uses React with D3 v5 for rendering SVG elements, including `scaleBand`, `scaleLinear`, and `csv` from imported D3 modules. The chart displays population values with SI-formatted tick labels and tooltips, with axes and bars rendered through modular components. The visualization demonstrates ES6 module imports and D3 integration within a React framework.

Loading thumbnail…

5 buddhas

Five overlapping, semi-transparent Buddha heads radiate outward from a central point, each composed of layered diamond-shaped polygons. The geometry is generated procedurally from a set of nested array mappings, with each polygon’s position, size, and color determined by a constant value (20) and pseudorandom functions, producing a repetitive, kaleidoscopic effect. A single orange Buddha figure is also overlaid, drawn with an SVG path, while the rotating, multi-colored diamonds create a dense, shimmering backdrop against the black canvas.

Loading thumbnail…

5 buddhas

Five overlapping buddha silhouettes are arranged in a circular pattern on a black background. Each buddha is rendered as a semi-transparent polygon with a diamond-like shape, colored via RGB values with high opacity. The visualization is built with React and rendered as SVG, using nested array mappings to position and rotate the buddha paths in a repetitive, almost generative layout. The piece explores repetition, geometric distortion, and vibrant color contrast against the dark canvas.

Loading thumbnail…

Fork of 5 buddhas

This visualization, titled "Fork of 5 buddhas," displays a generative geometric composition of overlapping, rotated polygons arranged in a grid-like pattern. The artwork is created with React and rendered as SVG, featuring an array of semi-transparent, multicolored triangles whose positions and colors are determined by random values, creating a vibrant, abstract mosaic against a black background. The piece incorporates five small, detailed Buddha-like iconographic path elements, layered on top of this generative pattern, adding a distinct focal point. The use of random color values (RGB up to 500) and varying transparency gives the visualization a lively, dynamic quality while the central icon provides a meditative anchor.

Loading thumbnail…

5 buddhas

Five overlapping diamond shapes, rendered as rotated squares, form the centerpiece of this black-background SVG visualization. The diamonds are positioned in a loose vertical column with slight random jitter in their coordinates and color, drawn from nested array maps that generate semi-transparent polygons with rainbow-like hues. The piece is titled "5 buddhas" but features no axes or data labels—instead, the composition relies on geometric repetition and randomized placement to create a meditative, abstract pattern. A separate Buddhist-figure path element sits at the top left, overlapping the grid, tying the visual theme together with the title.

Loading thumbnail…

5 buddhas

Five translucent, colorful Buddha silhouettes overlap in a dark, full-screen SVG. Each Buddha is drawn from path data and randomly scattered within a 960×1000 viewport, rendered as semi-transparent circles layered atop one another. The piece uses React to generate the shapes procedurally, with each circle’s position and RGB color randomly assigned, producing a kaleidoscopic effect against a black background.