L

leelakrishnadivi7@gmail.com

@dlkrishna·17 public vizzes

Loading thumbnail…

Project

This example visualizes the income distribution of loan applicants using a pie chart. The chart is rendered as an SVG element within an HTML page, with each slice labeled by its category and displayed value. The visualization is built with D3.js version 5, specifically using the library’s SVG generation and layout capabilities to compute the pie slices and position text labels. The chart is presented with a bold title and a legend, all styled through CSS. The data, loaded from a bundled script, drives the pie’s proportions, while the rendering remains fully static SVG without animation or interaction.

Loading thumbnail…

Q2_AreaChart

This area chart displays reported US cancer cases from 2009 to 2022, using a smoothly curved line and a filled teal area beneath it to emphasize the trend over time. The visualization is rendered as an SVG using D3 v5, with axes and grid lines generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV source, parsed into numeric year and case counts, and mapped to positions using `d3.scaleLinear` for both axes, while `d3.line` and `d3.area` with `d3.curveBasis` construct the geometric paths.

Loading thumbnail…

Fork of Activity 7

This example shows the distribution of applicant incomes for approved loans using a pie chart, with each slice colored according to income level and a legend mapping loan IDs to their corresponding income values. The visualization fetches CSV data from a remote GitHub gist using `d3.csv`, then computes the pie layout with `d3.pie()` and renders SVG paths via `d3.arc()`; the color scale is built with `d3.scaleOrdinal`. The legend text is formatted with `d3.format` to display values in thousands, and the SVG canvas is selected and manipulated through `d3.select`.

Loading thumbnail…

Activity 7

This animated scatter plot cycles through different pairings of iris flower measurements, displaying petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length fixed on the y-axis. Points are color-coded by species (setosa, versicolor, virginica) using a legend with labels and colored circles. The visualization loads iris data from a CSV via D3's `csv` method, uses a reusable `scatterPlot` module built with `scaleLinear`, `axisLeft`, and `axisBottom`, and updates the chart every few seconds with `setInterval`.

Loading thumbnail…

Fork of Activity6_Task4_q9

This bubble chart shows the relationship between runs scored, lifespan, and medals won for a set of players, using bubble size to represent medal count. It also reveals player identity through color-coding. The visualization is rendered as an SVG using D3 v7, with axes for runs and lifespan, a legend, and interactive tooltips that display each player’s specific data on hover. It also includes an animated transition for the tooltip.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes, using circle size to encode MPG and color to distinguish makes. Built with D3 v7, it renders as an SVG with animated dots that respond to mouseover events, displaying a tooltip with the car make. The chart includes a legend for MPG values and color-coded make categories, reading data from a CSV file and using scales such as `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color, and `d3.interpolateTurbo` for the color palette.

Loading thumbnail…

Fork of Fork of Activity_6_Task_3_q6

This scatter plot visualizes the relationship between the percentage of ratings in the 5.0-6.5 range and the 6.5-7.5 range for different music genres, drawn from a CSV file hosted on GitHub. Each circle represents a genre, colored via a categorical scale, with tooltips showing genre and coordinates. The implementation uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, create scales, and render axes and circles as SVG elements.

Loading thumbnail…

Fork of Activity_6_Task_3.2

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length on the x- and y-axes, with species encoded by point shape. It uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to create the visualization, rendering SVG paths via `symbol()`. Data loads from a CSV via `csvParse`, with axes and a shape legend generated using `axisLeft`, `axisBottom`, and custom legend code.

Loading thumbnail…

Activity_6_Task_3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Each circle represents an individual flower, colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The code uses D3 v6 functions including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering as SVG in a React-free HTML page. Data is loaded from a remote CSV via `d3.csv`, with axes labeled in green and a red title.

Loading thumbnail…

Fork of Activity_6_task_2_3

This stacked bar chart displays car make ratings across three metrics: horsepower, torque, and highway MPG. It uses d3.stack() to prepare the data and d3.scaleOrdinal() for color coding. The chart renders in SVG with axes generated using d3.axisLeft() and d3.axisBottom(), and includes interactive tooltips that appear on mouseover, showing metric values. Data is loaded from the bubblechart.csv file via d3.csv().

Loading thumbnail…

Activity_6_task_2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. It shows the percentage of movies falling into five rating brackets, from below 5.0 to above 8.5, with each genre represented as a distinct bar. The chart is built with D3 v7, using d3.stack() to compute the stacked segments, d3.scaleOrdinal() for color encoding, and d3.scaleBand() for the categorical y-axis. Interactive tooltips reveal exact percentages on mouseover, using d3.select() and element event handlers. The data comes from a CSV file containing genre and rating proportion values.

Loading thumbnail…

Fork of Activity 6_Task 1_2

A horizontal bar chart displays the populations of 20 countries in 2010, ranked along the y-axis with population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to position bars, while custom React components `AxisBottom`, `AxisLeft`, and `Marks` render axes and rectangles. Data is loaded via `d3.csv` from a GitHub gist, formatted with `d3.format`, and styled with green fills and blue tick lines.

Loading thumbnail…

Activity 6_Task 1

This example renders a horizontal bar chart of population estimates for ten countries in the year 2000, with each bar colored light green and labeled with its country name on the y-axis. The chart loads CSV data via d3.csv, uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, and formats tick labels with d3.format to convert values into billions. React components compose SVG elements for the axes and bars, while d3.v5 provides the data loading and scaling utilities.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization displays six overlapping Buddha figures rendered in SVG, set against a floral background image loaded via CSS. The React application uses nested map functions to generate a grid of semi-transparent, colored null elements, creating a scattered point pattern that interacts with the Buddha paths. The Buddha shape itself is drawn using an SVG path with complex cubic Bezier curve data. The code imports React and ReactDOM to structure the SVG output, while each point's fill color is computed using the Math.random() function to produce varied RGB values. The entire composition is generated procedurally within a fixed 1000x1000 viewport.

Loading thumbnail…

Fork of 6 Buddha

This example displays an abstract, colorful composition of overlapping Buddha-like forms rendered on an SVG canvas. The visualization generates a dense matrix of semi-transparent colored rectangles using nested React `map` functions, with randomized positions and RGB fill values. The main visual element is a large, intricately detailed Buddha path drawn through an SVG `<path>` element with a complex `d` attribute, transformed and scaled to overlap the background pattern. The implementation uses React 16.10.0 and ReactDOM to manage the SVG structure, while the page includes a flower-pattern background image and a large text message.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

An abstract visualization overlays hundreds of translucent SVG circles atop a detailed Buddha path, creating a dense, layered composition against a black background. The circles scatter at random positions and colors through nested array maps, while the Buddha figure, rendered as an SVG path transformed and scaled, remains the central focus. The React app uses the core React and ReactDOM libraries to render the SVG elements, with randomness controlling circle placement and fill values.

Loading thumbnail…

5 buddhas

Five colored Buddha silhouettes overlap in a black field, each rendered from a shared SVG path definition. The visualization constructs a grid of random triangles behind the figures using React’s map method, producing a colorful, chaotic backdrop. The Buddha images are drawn with SVG path data, scaled and positioned via transforms, while the background uses triangle polygons with randomized coordinates, fill colors, and rotation. React and ReactDOM manage the SVG rendering directly.