Hari Kiran

@harikirank·11 public vizzes

Task 9_t_2

This example shows a reusable scatter plot built as a custom D3 function. It renders circles positioned by scaled x and y values with labeled axes, and appends an additional "TEXT" label to the x-axis. The scatter plot module exposes setters for width, height, data, value accessors, margins, and radius. Using D3’s scaleLinear, extent, axisLeft, and axisBottom, the chart reads data from a CSV file and draws SVG elements. The example demonstrates a modular, configurable chart pattern.

Apr 22, 2024

Loading thumbnail…

Task 9 2

This visualization displays a time-series area chart tracking a single data series over time, with the area filled in green beneath the curve. The x-axis uses a time scale for dates, while the y-axis uses a linear scale for values. The code loads CSV data from an external GitHub gist, parses dates with `d3.timeParse`, and renders the area using `d3.area` with SVG paths. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, and the visualization is built with D3 v7.

Apr 22, 2024

Loading thumbnail…

Task 9_t

This example presents a reusable scatter plot built with a custom D3 module, though the primary rendered chart in the main script is a pie chart displaying departmental data. The pie chart visualizes categorical values and percentages, with color-coded slices and an accompanying legend. The code uses D3 v6 APIs such as `d3.pie`, `d3.arc`, and `d3.csv` to load and transform data from a GitHub-hosted CSV file. The scatter plot module demonstrates a separate, configurable chart function with `scaleLinear`, `axisLeft`, and `axisBottom` for potential reuse, though it is not invoked in the index file.

Apr 22, 2024

Loading thumbnail…

Task 9

This example demonstrates an animated scatterplot of the Iris dataset, cycling through different pairings of sepal and petal measurements on the x-axis while the y-axis remains fixed on sepal length. It uses D3’s `csv` loader, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll`/`join` to render the SVG points and axes. A custom ES6 module defines a reusable `scatterPlot` function, while `setInterval` triggers the axis updates. Color-coded legend markers distinguish the three Iris species.

Apr 21, 2024

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the correlation between average price, weight, and capacity across 15 consumer electronics products. Each circle’s x-position maps price, y-position maps weight, and radius encodes capacity, while color distinguishes product type via a categorical scale using `d3.interpolateTurbo`. The D3 v7 SVG implementation includes axes, a capacity legend with reference circles, and a tooltip that appears on mouseover using `d3.pointer` events. Data is loaded from a CSV file with `d3.csv`, and hover interactions adjust opacity through CSS transitions.

Apr 10, 2024

Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot of flower measurements, encoding bloom length and stem length along the axes while using distinct symbols to represent different flower species. It shows how D3 v7’s `scaleOrdinal`, `symbolsFill`, and `symbol` APIs can map categorical data to visual shapes, accompanied by a custom legend built with reusable ES6 modules. The visualization loads CSV data from a GitHub repository, parses it with `csvParse`, and renders the plot across the full browser window using modular functions for axes and the legend.

Apr 10, 2024

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying petal length against petal width while coloring each point by species (setosa, versicolor, or virginica) using D3 v6. The code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear`, and renders SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. Data parsing converts numeric fields, and the chart fills the browser window with responsive dimensions. The visualization distinguishes species through custom color mapping and includes labeled axes for petal measurements.

Apr 10, 2024

Loading thumbnail…

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres using a horizontal stacked bar chart. Each bar segment represents the proportion of ratings within a specific range (below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, above 8.5), with a sequential color scale distinguishing the categories. The chart is rendered as SVG using D3 v7, employing `d3.map`, `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` to construct the layout. Interactive tooltips display the exact percentage for each segment on hover, implemented via mouse event listeners.

Apr 10, 2024

Loading thumbnail…

Fork of activity 6_Task 1

A horizontal bar chart displays population figures for ten countries in 2000, with bars colored light green and axis ticks in blue. The visualization loads CSV data from a GitHub repository using D3 v5’s `csv` method, then renders SVG elements through React components. D3’s `scaleBand` and `scaleLinear` position the categorical y-axis and quantitative x-axis, while the `format` function converts population values into abbreviated units like billions.

Apr 10, 2024

Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the population of 20 countries for 2010, sourced from a CSV file, with bars sorted by country name. The chart uses D3's `scaleBand` and `scaleLinear` to map data to SVG coordinates, rendered as `rect` elements within a React component. Axes are drawn with custom components, and tick labels are formatted using D3's `format` function to abbreviate large numbers.

Apr 10, 2024

Loading thumbnail…

Buddha Assignment Viz

A dense field of tiny, semi-transparent SVG circles is generated by nested loops in React, each colored with randomized RGB values and positioned using deterministic pseudo-random scaling. Layered over this generative backdrop is a large, intricate path element depicting the Buddha, drawn from a complex SVG path string and transformed with translation and scaling. The visualization combines algorithmic randomness with a fixed geometric figure, set against a stark black background with the title styled in oversized red text.

Mar 18, 2024