Skip to main content
Log in
T

tarunskuruvadi@gmail.com

@ks-tharun-14·15 public vizzes

Loading thumbnail…

Task_9_Question_9

This example displays an area chart of the number of days in each month for the first half of the year, using a small hardcoded dataset of six monthly values. It renders an SVG visualization with D3 v7, employing `d3.scaleBand` for the categorical month axis, `d3.scaleLinear` for the day count, and a `d3.area()` generator to create the filled path. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labeled text for both dimensions. The chart is drawn entirely client-side using the D3 library loaded from UNPKG.

Apr 22, 2024
Loading thumbnail…

Task_1_Question_1

This chart displays housing costs for different urban areas as a pie chart, using color-coded slices to represent each location’s proportion of the total. A legend on the right maps slice colors to place names. The visualization is built with D3 v5, using `d3.pie` to compute arc data and `d3.arc` to generate SVG paths. Data is fetched as CSV from a GitHub gist, and `d3.scaleOrdinal` assigns slice colors from a predefined palette. The SVG output is centered and styled via CSS.

Apr 22, 2024
Loading thumbnail…

Task_9_Tutorial_1

This interactive scatter plot visualizes the Iris dataset, cycling through different measurement pairs on the x-axis to compare petal and sepal dimensions. Built with D3.js v6, the reusable `scatterPlot` module uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while `setInterval` drives the animation. Circles are colored by species?setosa in skyblue, versicolor in lightgreen, and virginica in orange?with a legend and axis labels updated dynamically. The example demonstrates custom SVG rendering, data parsing from a remote CSV, and a modular chart structure.

Apr 22, 2024
Loading thumbnail…

TASK-9

This animated scatter plot displays the Iris flower dataset, cycling through different combinations of sepal and petal measurements on the x-axis while keeping sepal length on the y-axis. Points are color-coded by species (setosa, versicolor, virginica) with a fixed legend. Built with D3.js (v6) using reusable chart modules like `scatterPlot`, it employs `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with a `setInterval` updating the x-axis dimension every few seconds. Data loads from a remote CSV via `d3.csv`, and the visualization renders as SVG with circles and labels.

Apr 22, 2024
Loading thumbnail…

Task8_Q4_9

This bubble chart visualizes the correlation between housing costs, cost of living, and safety across 40 cities from the expensessafety.csv dataset. Each circle’s position encodes housing and cost of living on the x- and y-axes, while its radius represents the safety score using a linear scale. The chart uses d3.csv to load data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with interpolateTurbo to assign distinct colors to each city. Interactive tooltips appear on mouseover, and a legend with reference circles explains the safety radius mapping.

Apr 11, 2024
Loading thumbnail…

TASK8_TUTORIAL4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each make represented by a colored circle positioned by horsepower and torque axes and sized by MPG. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color encoding, and includes a tooltip with mouseover events. The SVG includes a circle-size legend for MPG and a color legend for car makes, with data loaded from a CSV file.

Apr 11, 2024
Loading thumbnail…

Task8_Q3_6

This scatter plot visualizes the WineQT dataset, showing fixed acidity on the x-axis and citric acid on the y-axis, with each point colored by wine quality rating (from 3 to 8). The code loads CSV data from a GitHub repository, parses numeric fields using custom row parsing, and renders circles via D3 v6’s selection and join methods. Axes are generated with `axisLeft` and `axisBottom`, while linear scales map data ranges to pixel coordinates. The visualization also encodes residual sugar and volatile acidity into the circles’ `rx` and `ry` attributes, though these do not affect the default circle radius.

Apr 10, 2024
Loading thumbnail…

TASK8_TUTORIAL3

This scatter plot displays the Iris dataset, mapping petal length and width for each sample while using color to distinguish between the three species (setosa, versicolor, and virginica). It also encodes sepal dimensions as the `rx` and `ry` attributes, though the circles are rendered with a fixed radius, making these values not visually apparent. The visualization is built with D3 v6, loading the CSV data via `d3.csv`, and using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes. SVG circles are drawn on a full-window canvas, with a red title and green axis labels.

Apr 10, 2024
Loading thumbnail…

Task8_Q2_3

This stacked bar chart, built with D3 v7 and rendered as SVG, visualizes the impact of genre on movie ratings by displaying the percentage of each rating level within different genres. The chart uses D3's stack and scaleOrdinal functions to create the horizontal bars, with a hover tooltip showing precise percentages. The data is sourced from IMDb movie ratings, and the visualization employs tooltip elements and mouse events to provide interactive feedback, with a color scale distinguishing between rating categories.

Apr 10, 2024
Loading thumbnail…

TASK8_TUTORIAL2

A stacked bar chart displays the distribution of IMDb ratings across six movie genres, with each bar segmented into five percentage-based rating categories. Horizontal bars show how rating proportions vary by genre, using distinct colors for each rating range. The d3.stack() API constructs the stacked segments, while d3.scaleBand and d3.scaleLinear handle positioning. Hovering over any segment reveals a tooltip with the exact percentage for that genre-rating combination. The visualization renders as scalable vector graphics (SVG) and reads data from a CSV file containing genre and rating percentages.

Apr 10, 2024
Loading thumbnail…

Task8_Q1_2

A horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name. The visualization uses React to render SVG elements, with D3 scales (`scaleBand` and `scaleLinear`) mapping data to positions and lengths. Axis components built with D3’s `ticks()` and tick formatting via `format('.2s')` convert raw population values into billions. The data is loaded asynchronously from a CSV file using D3’s `csv` function, then parsed and sliced to the top twenty entries.

Apr 9, 2024
Loading thumbnail…

Task8_Q1_1

A horizontal bar chart displays the population of ten countries in the year 2000, ranked by country name on the y-axis and population values on the x-axis. The chart uses D3 v5 scales, including `scaleBand` for the categorical axis and `scaleLinear` for the numeric axis, with React components rendering SVG rectangles for each bar. Tooltips show formatted population values using D3’s `format` function, while axis labels and tick marks are built with custom `AxisBottom` and `AxisLeft` components. Data is loaded from a CSV file via `csv` from D3.

Apr 9, 2024
Loading thumbnail…

TASK8_TUTORIAL1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, rendered with SVG in a React application. D3 v5’s `scaleBand` and `scaleLinear` map country names and population values to the bar positions and lengths, while custom React components draw the axes and marks. The data is loaded as CSV from a GitHub repository, with the population column formatted using D3’s `format` function to appear in billions.

Apr 9, 2024
Loading thumbnail…

2 buddhas+

Two overlapping Buddha silhouettes appear against a black background, rendered as dense clusters of small colored circles. The visualization uses React to map nested arrays of coordinates into hundreds of semi-transparent SVG circle elements, each with randomized positions, radii, and RGB color values. The Buddha path data is drawn from an embedded SVG path string, while the surrounding circles are generated procedurally with JavaScript’s Math.random() function, creating a vibrant, textured effect over the dark canvas.

Mar 14, 2024
Loading thumbnail…

2 buddhas+

Two buddhas appear in front of a black background, each drawn as a single intricate SVG path outlined in a thick stroke. Overlaid across the entire canvas, hundreds of small, semi-transparent circles are randomly scattered, with positions and fill colors generated via nested array mappings and `Math.random()` calls within the React app. The image combines a hand-crafted vector figure with a generative, chaotic particle field, rendered through React’s SVG output at 960 by 1000 pixels.

Mar 14, 2024