Kondreddy Saikiran reddy

ViewCircles

ViewCircles visualizes state-wise rice production in India as an interactive bar chart. The chart sums district-level data from a CSV file using `d3.rollup` and `d3.sum`, mapping states to bar heights with `d3.scaleBand` and `d3.scaleLinear`. Hovering over a bar triggers a tooltip showing the total production for that state. The SVG rendering uses `d3.axisBottom` and `d3.axisLeft`, with a `d3.schemeCategory10` color scale and mouse event handlers for interactivity.

LineChart

A bubble chart displays wheat production data for Indian states, sourced from a CSV file. Each state is represented by a circle positioned in a grid, with the circle's radius scaled to the production value in thousands of tons. The visualization uses D3.js v7, with circles rendered as SVG elements. Hovering over a circle triggers a tooltip that shows the state name and its production figure. The chart includes axes, labels, and a title, all styled through CSS.

PieChart

This visualization uses D3.js to display an interactive pie chart of wheat production by Indian states from 1966 to 2017. The chart aggregates production data from a CSV file, using `d3.pie()` to generate slices with an inner radius of zero, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Year checkboxes filter the underlying data via `d3.rollup`, recalculating totals and redrawing the chart, while `mouseover` events show tooltips with production values. The SVG rendering includes a legend and interactive state highlighting.

PieChart

This SVG area chart displays total annual rainfall in India from 1960 to 2017, aggregated by year across all states. It uses D3 v7 to load CSV data via `d3.csv`, group and sum rainfall values with `d3.group` and `d3.sum`, and render the area path with `d3.area`. A hover tooltip, built with a D3 overlay rectangle and `d3.bisector`, shows the exact year and rainfall total. The chart includes labeled axes and a title, with styling from CSS.

scatterplot

This scatterplot visualizes the relationship between annual rainfall and rice crop production in India from 1966 to 2017, with each point representing a year. The code aggregates two CSV datasets using `d3.rollups` and maps the merged data to an SVG circle chart with `d3.scaleLinear` axes, `d3.axisBottom`, and `d3.axisLeft`. Interactive tooltips are implemented with D3 mouse events, revealing year, production, and rainfall details on hover. The chart animates point transitions and is built with D3 v7, rendering SVG elements.

scatterplot

This example visualizes the total annual rainfall in India from 1960 to 2017 as an area chart. It aggregates rainfall data across all states for each year, then renders the trend using D3 v7’s `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs. A hover tooltip, powered by `d3.bisector` and `d3.pointer`, displays the exact year and total rainfall value as users move over the chart. The data is loaded via `d3.csv` from a remote GitHub gist, and the visualization is drawn as an SVG.

AreaChartRainFall

This area chart visualizes the total annual rainfall in India from 1960 to 2017, aggregating state-level data from a CSV file. The chart uses a lightsteelblue filled area to show the trend, with axes labeled for year and rainfall in millimeters. Hovering over the chart triggers a tooltip displaying the specific year and total rainfall value, while a black circle marks the corresponding point on the curve. The code leverages d3.csv for data loading, d3.group and d3.sum for aggregation, d3.scaleLinear for scaling, d3.area for the path, and d3.bisector for interactive lookups. The SVG rendering is styled via external CSS.

Barchart2

This interactive bar chart visualizes rice production across Indian states from 1966 to 2017, allowing users to filter the data by year using checkboxes. The chart aggregates production values with `d3.rollup` and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, with hover tooltips highlighting individual states. It loads data from a CSV file via `d3.csv` and updates the visualization dynamically in response to checkbox selections.

barChart

This bar chart displays rice production totals for each state, aggregated from district-level crop data using `d3.rollup` and `d3.sum`. The SVG rendering uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeCategory10` for per-state colors. Hovering over a bar triggers a tooltip via D3 transitions, showing the summed production in tons. Data loads asynchronously from a CSV file, with axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Apr 20, 2024

Assignment2Question2

This example shows a 2,400-pixel-wide area chart of New York City monthly temperatures across years, with red circular markers at each data point that reveal a tooltip on hover. The visualization uses D3 v7 to load CSV data from a GitHub gist, parse the Temperature column, and render an SVG path via the `d3.area` generator with `d3.scaleBand` and `d3.scaleLinear` axes. The tooltip is implemented as an HTML div that transitions opacity on `mouseover` and `mouseout`, while the chart includes rotated axis labels and a steelblue fill. The code runs in a plain HTML page with inline CSS for the container and tooltip styling.

Apr 13, 2024

Fork of Axes with Hover_drb

This example displays a simple scatterplot with a gray plotting area, using D3 v7 to render an SVG visualization. Linear scales map data from 0 to 100 to pixel coordinates, with axes and labels added via d3.axisBottom, d3.axisLeft, and custom label functions. The chart responds to container resizing through a ResizeObserver, recalculating dimensions and redrawing the visualization when the viewport changes. No data points are plotted, showcasing only the axes, labels, and background region.

Apr 13, 2024

Fork of Fork of Fork of ICE-7 (Part-2) - Pie Chart

This pie chart visualizes temperature distribution of cities from a weather dataset, categorizing temperatures into low (<20°C), medium (20-30°C), and high (>30°C) ranges. The SVG chart, built with D3 v7, uses `d3.pie()` and `d3.arc()` to generate segments, with a color scale from `d3.scaleOrdinal(d3.schemeCategory10)`. Labels are positioned via `path.centroid()`, and a separate HTML legend displays color-coded range names. Data loads from an external CSV using `d3.csvParse`.

Apr 12, 2024

Assignment2Question 1

An interactive pie chart visualizes US retail sales data for toys in 2023, sourced from a CSV file. The chart displays the proportional sales of different toy categories, using a color legend and a hover tooltip to show exact sales figures and percentages for each slice. Built with D3.js v7, the visualization uses `d3.pie` to compute arc data, `d3.arc` to generate path geometries, and SVG for rendering. The legend and chart are positioned side-by-side, with animations providing hover feedback and tooltip transitions.

Apr 9, 2024

Assignment2Question 1

This example visualizes 2023 sales data for different product categories as an interactive pie chart, paired with a color-coded legend. Using D3.js (v7), it loads CSV data via the `d3.csv` method and renders the chart with `d3.pie` and `d3.arc`. The chart employs a categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) for slices and legend items. Hover interactions display a tooltip showing the sales value in billions, with transitions controlling tooltip opacity. The layout places the legend on the left and the pie chart on the right within separate SVG containers.

Apr 7, 2024

Activity6_Task2_Q2

This example uses a stacked horizontal bar chart to display the distribution of app ratings across categories like Social Media and Gaming, with each bar segment representing a rating range's percentage. Built with D3 v7, the visualization relies on `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to compute and render segments from the CSV data. Tooltips, implemented via D3 selection and mouse events, display exact percentages on hover. The SVG output uses a custom color scale for the five rating categories.

Apr 6, 2024

Activity6_Task2_Q2

Apr 6, 2024

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Bubble size encodes highway MPG, while color distinguishes car brand. The visualization uses D3 v7 to render SVG circles, with a tooltip displaying the make on hover. It incorporates a legend for bubble size and color, using scales like `d3.scaleLinear` and `d3.scaleOrdinal`, and reads data from a CSV file.

Apr 6, 2024

Activity6_Task4_Question4

This visualization presents a bubble chart exploring the correlation between engine CC (cubic capacity), maximum speed, and highway MPG for various motorcycle models. Each bubble’s horizontal position maps to CC, its vertical position to max speed, and its size encodes highway MPG, while color distinguishes vehicle makes. Built using D3.js v7 with SVG and animation, the chart includes an interactive tooltip that reveals the vehicle make on hover, plus a size legend illustrating MPG value thresholds. Data is loaded from a CSV file using `d3.csv` and scales are computed with `d3.scaleLinear` and `d3.scaleOrdinal`.

Fork of Activity6_Task4_Question4

This bubble chart visualizes the correlation between engine displacement (CC), maximum speed, and highway MPG across a dataset of motorcycles, with bubble size representing MPG and color indicating the manufacturer. Built with D3.js v7, it renders as SVG and uses a linear scale for both axes. Interactivity includes tooltips on mouseover, implemented with event handlers that adjust the tooltip’s position and opacity, while legends detail the MPG scale and manufacturer color coding. The data is loaded from a CSV file named `bubblechart.csv`.

Activity6_Task3_Question3

This scatter plot visualizes fruit tree data from a CSV file, mapping fruit height to the x-axis and fruit width to the y-axis as colored circles—red for apples, orange for oranges, and green for other fruits. It uses D3 v6 with React, rendering to an SVG that fills the browser window. The code employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and `csv` to load the data, with axes labeled in green text.

Fork of Activity6_Task3_Question3

This scatter plot visualizes fruit data, plotting fruit height against fruit width, with each circle colored by fruit species (apples in red, oranges in orange, and others in green). The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `csv` loads data from a GitHub gist containing tree and fruit measurements. Circles are drawn as SVG elements with fixed radius, and the code attempts to apply tree height and width as `rx` and `ry` attributes, though these do not affect circle shape. Axis labels are added via SVG text elements with rotation.

Activity6_Task3_Question3.1

This scatter plot visualizes the Fruit Tree dataset, mapping fruit height and width while coloring each point by fruit species (apple, orange, banana, or green). The visualization uses D3.js v6 to load the CSV data via `d3.csv`, create scales with `scaleLinear`, and render SVG circles. The code defines x and y axes using `axisBottom` and `axisLeft`, and applies custom color mapping based on the fruit name. The chart is built within a React framework, though it directly manipulates the DOM, and uses the `join` pattern to bind data to circle elements.

Fork of Activity6_Task3_Question3.1

This scatter plot visualizes fruit data, mapping fruit height and width along the axes while coloring each point by fruit type (apple, orange, banana, or other). The plot incorporates tree height and width as additional visual properties for the circular markers. The visualization uses D3 v6, loading CSV data from a GitHub gist, and employs `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to construct the SVG chart. The code also uses the `join` operation to bind data to SVG circles and custom text labels for axis descriptions.

Activity6_Task4_Question4

This bubble chart visualizes correlations between average engine displacement (cc), torque, and highway MPG for motorcycle makes from a CSV dataset. Circle positions map torque against cc on linear scales, while bubble size encodes MPG values and colors distinguish motorcycle brands. Built with D3 v7, the SVG visualization includes interactive tooltips on mouseover and legend circles for MPG scaling. Hover effects and animated opacity transitions highlight individual data points, with axes labeled and colored by manufacturer using an interpolated color scale.

Activity6_Task3_Question3.1

This scatter plot visualizes fruit data from a CSV file, mapping fruit height and width against tree height and width. The visualization uses D3 v6 with the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to create the axes. It renders colored circles in an SVG, with each fruit species assigned a distinct color (apple, orange, banana). The chart displays the relationship between fruit dimensions and tree dimensions, with the x-axis labeled "Tree Height" and the y-axis labeled "Fruit Height", though the code contains a minor bug where `tree_height` is not parsed to a number.

Activity6_Task4

Activity6_Task3_Question3.2

This example visualizes the iris dataset, plotting sepal length against petal length and encoding species using different symbol shapes. It builds a scatter plot with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `symbolsFill` to map species to shapes, and custom modules for axes and a shape legend. Data is fetched as CSV from a GitHub gist and parsed with `d3.csvParse`. The visualization is wrapped in a React-like state management pattern, though it renders directly into the DOM using `d3.select` and SVG elements.

Activity6_Task3.2

This visualization renders the classic Iris dataset as a scatter plot, using D3 v6 to map petal length and petal width on the x- and y-axes. Each circle’s fill color encodes the iris species (setosa, versicolor, or virginica) via a switch statement, while the circle’s rx and ry attributes are set but not visually distinct since the radius is fixed. The code loads CSV data from a GitHub gist, applies linear scales with `d3.scaleLinear` and `d3.extent`, and draws axes with `d3.axisLeft` and `d3.axisBottom`, all rendered as SVG elements in the browser window.

Activity6_Task3.1

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and petal width to the y-axis. It colors each point by species—setosa in skyblue, versicolor in lightgreen, and virginica in orange—while also encoding sepal length and width as additional shape properties on each circle. The visualization loads data from a CSV via a GitHub gist, uses D3 v6 modules such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, and renders circles in an SVG. Axis labels are added for petal and sepal length.

Activity6_Task3_Question3.1

This scatter plot visualizes the Rose dataset, encoding petal length on the x-axis and petal width on the y-axis, with each circle colored by species (gold, tomato, or mediumorchid) to distinguish Hybrid Tea, Floribunda, and other roses. The visualization uses D3 v6 APIs including `select`, `csv`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft`, rendering as SVG with a red title and green axis labels. It loads the data from a gist URL, applies linear scales with fixed margins, and maps circle position and color from the parsed attributes.

Fork of Activity6_Task3.1

This scatter plot visualizes the Iris dataset, displaying petal length and width for three species, color-coded by species type. It uses D3 v6, loading data from a GitHub-hosted CSV file and rendering SVG circles. The visualization demonstrates core D3 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to create interactive axes and custom-styled markers.

Activity6_Task3.2

A scatter plot displays iris flower measurements, using D3 v7 scales and SVG symbols to encode sepal length on the x-axis and petal length on the y-axis, with species represented by distinct symbol shapes. The example loads the iris dataset from a GitHub CSV, parses it with d3.csvParse, and renders axes with axisBottom/axisLeft plus a custom shape legend. A modular structure imports d3 functions like scaleLinear and scaleOrdinal across separate ES6 modules, demonstrating local and external imports within a VizHub project.

Activity6_Task3.2

Activity6_Task3.2

This example displays the text “Hello HTML!” centered in large type, demonstrating a minimal static webpage. It uses a simple CSS class for styling and presents content within a standard HTML document structure. The page contains no interactive elements or data-driven visualizations, serving purely as a basic starter template. The implementation relies on core HTML and CSS features, with no external libraries or JavaScript logic beyond the static markup.

Activity6_Task3

This scatter plot visualizes the iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3.js v6, loading data from a GitHub CSV file via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisLeft` and `d3.axisBottom` for chart axes. The SVG circles have a fixed radius but their `rx` and `ry` attributes are set to sepal measurements, though these do not affect circular rendering.

Activity6_Task2_Q2

This example shows a stacked horizontal bar chart of app category ratings, displaying the percentage distribution of ratings across five bins from “below 2.0” to “above 5.0” for ten app categories. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for categorical positioning. Tooltips on mouseover reveal exact percentages using `d3.format`. The data comes from a CSV file loaded and parsed by D3.

Activity6_Task2

A stacked bar chart displays the distribution of IMDb movie ratings across six genres, with each bar segmented into five rating brackets from “below 5.0” to “above 8.5” as percentages. The chart uses D3 v7’s `d3.stack` to compute the stacked series and `d3.scaleOrdinal` with a categorical color palette for the segments. Interactive tooltips reveal exact percentages on hover, and axes are rendered with `d3.axisBottom` and `d3.axisLeft`. Data comes from the bundled `data.csv` file, and the visualization is drawn as SVG elements within a fixed-size viewport.

Activity6_Task2

Fork of Activity 6_Task 1_Q1.2

A horizontal bar chart displays the 2010 populations of 20 countries, loaded as CSV data via `d3.csv` in a custom `useData` hook. React components render the SVG, with `scaleBand` and `scaleLinear` mapping countries and population values, while `AxisBottom` and `AxisLeft` create axes. The `Marks` component draws rectangle bars with tooltips, and populations are formatted using `d3.format`.

Activity 6_Task 1

This bar chart displays population data for twenty countries in 2010, using horizontal bars with a green fill. The visualization is built with React and D3 v5, leveraging d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate large numbers. Data is loaded from a remote CSV file via d3.csv, and all marks and axes are rendered as SVG elements.

Fork of Activity 6_Task 1_Q1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with a linear scale for population and a band scale for country names. The visualization is built with React and D3 v5, fetching data from a remote CSV file and rendering SVG elements. Custom axis components generate tick marks and labels, while rectangular marks include tooltips showing the formatted population value via the d3 `format` API.

6 Buddhas with flower image

A generative SVG artwork depicts six overlapping Buddha silhouettes rendered in vibrant, randomized colors. The composition uses nested React `map` functions to generate hundreds of rotated diamond shapes with coordinates and fill values computed via `Math.random()`, creating a chaotic, colorful backdrop. The Buddha paths are embedded as SVG `<path>` data, transformed and scaled, with a flower background image set through CSS `background-image`. The visualization combines procedural geometry with static religious iconography using React and ReactDOM.

Fork of 5 buddhas

This gallery piece presents a generative composition of Buddha-like forms, created by layering and rotating semi-transparent polygons. The visualization derives its structure from a series of nested `A.map` operations in React, which generate coordinates and color values through repeated calls to `Math.random()`. The primary Buddha figure is rendered as a detailed SVG `path` using `d` attribute data, while the background is populated with a grid of small, randomly colored polygons. The piece is built with the React and ReactDOM libraries, outputting all graphics as an SVG within an HTML page.

5 buddhas

Five overlapping Buddha silhouettes in bright, varied colors are rendered on a black background against a field of randomly generated, semi-transparent diamond polygons. The React application uses the `react` and `react-dom` libraries to construct an SVG scene, defining each shape's geometry and fill through `Math.random()` calls. A series of complex path elements define the Buddha forms, which are positioned and scaled via SVG `transform` attributes.