suchigeneralpur@gmail.com

Fork of barChart

This bar chart visualizes rice production across Indian states, using data from a CSV of crop statistics. It shows aggregated production totals per state, with each bar color-coded to its state, and a tooltip displaying the exact production value on hover. Built with D3 v7, the chart uses `d3.rollup` to aggregate district-level data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeCategory10` for colors. The SVG rendering includes rotated x-axis labels for readability.

Apr 22, 2024

SK_AGRICULTURE

This scatterplot displays the prominence of agricultural districts in the bee colony census by state, with each circle representing a district-year combination. Positioned by state on the x-axis and census year on the y-axis, the color hue encodes the agricultural district. Built with the vega-lite-api, it uses `markCircle` and encodes fields via `vl.x()`, `vl.y()`, and `vl.color()`. Data comes from a CSV loaded with d3’s `csv` function, while vega and vega-lite render the visualization.

Apr 20, 2024

Question2_SK_Assignment2

This area chart shows the growth of e-commerce sales in billions of USD over time. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for both axes and `d3.area` to generate the filled path. The visualization is built from a CSV file loaded via `d3.csv`, with axes labeled "Year" and "E-commerce Sales (Billions USD)". The area is filled with a light blue color, clearly depicting the upward trend of the data.

Apr 13, 2024

SucharithaKudapa_Assignment2

This pie chart visualizes market share distribution among makeup and skincare brands, displaying each brand’s percentage directly on its corresponding slice. The chart uses D3.js v7’s `d3.pie()` and `d3.arc()` generators to compute and render the arcs, with an ordinal color scale (`d3.scaleOrdinal`) assigning distinct colors to each brand. Data is loaded from a remote CSV file via `d3.csv`, with market cap values parsed numerically. A separate legend lists brands alongside their categories, while text labels on the chart show brand names and calculated percentages.

Apr 13, 2024

Sucharitha_Kudapa_Activity

This example presents a pie chart built with D3.js, visualizing categorical data as proportional slices. The code uses D3’s `d3.pie()` and `d3.arc()` generators to compute angles and render SVG paths, with colors assigned via a categorical scale. The chart displays labels and values for each segment, updating smoothly with `transition.attrTween` when the data changes. It demonstrates a clean, static layout with hover tooltips, relying on standard SVG rendering for a compact, readable presentation.

Apr 13, 2024

Bubble chart_sk_tutorial

This bubble chart displays device specifications from a CSV file, plotting processor speed on the x-axis, RAM on the y-axis, and storage capacity as bubble size. Each bubble is colored by brand and includes interactive tooltips showing brand and type on hover. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolated color scales for the legend. SVG circles render the bubbles with mouseover, mousemove, and mouseleave events driving the tooltip transitions.

Question3_sk

This scatter plot visualizes the handbags dataset, showing the relationship between price and stock quantity. Each circle is colored by the handbag’s material (e.g., Leather, Canvas, Nylon) and uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the data to SVG coordinates. The visualization is rendered as an SVG with circles positioned by price and stock quantity, and it loads data from a GitHub-hosted CSV file. The code includes custom axis labels for “Stock Quantity” and “Price.”

Fork of Activity6_question3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species. It also encodes sepal measurements as the horizontal and vertical radii of the circular marks, though the visual effect is subtle. Built with D3 v6, the code loads CSV data via `d3.csv`, scales it with `d3.scaleLinear`, and renders SVG circles using `selectAll` and `join`. Axis labels are added with `axisLeft` and `axisBottom`. Data is sourced from a GitHub-hosted CSV file.

Scatter Plot with Shape_tutorial3.2

This example demonstrates a scatter plot visualizing the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by different symbol shapes and shown in a legend. The visualization is built with D3 v7, using `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to assign shapes, and `symbolGenerator` to render each mark. Data is loaded as CSV from a remote source and parsed with `csvParse`, while reusable modules (`axes`, `scatterPlot`, `shapeLegend`) organize the rendering.

Activity6_Task3

This interactive visualization renders the IRIS dataset as a scatter plot, displaying petal length versus petal width for individual flowers. Each circle is colored by species—sky blue for setosa, light green for versicolor, and orange for virginica—using d3.scaleLinear for positioning axes and d3.csv for data loading. The SVG is drawn with circles whose fill colors are determined by the species marker function, while axis labels are added as text elements with rotation. The code also includes unused sepal length/width dimensions as circle attributes.

Activity6_Task3

This visualization displays the Iris dataset as a scatter plot, using petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The code loads CSV data via `d3.csv`, maps values using `scaleLinear`, and renders the plot as an SVG with circles and axes. It also incorporates sepal length and width as custom `rx` and `ry` attributes on the circles. The chart uses D3 v6 with `axisLeft`, `axisBottom`, and `selectAll().data().join()` for data binding, sized to the full window.

Fork of Activity6_Task2_Question2

This stacked bar chart shows the percentage distribution of five rating levels across different handbag brands, revealing how ratings vary by genre. Each horizontal bar represents a brand, segmented by rating categories from “below 6.0” to “above 8.5”. The visualization uses d3.stack() to compute stacked segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Interactive tooltips appear on mouseover, displaying exact percentages formatted with d3.format('.2f'). The SVG rendering uses D3 v7 with axes generated by d3.axisLeft and d3.axisBottom.

Activity6_Task2

A stacked bar chart shows the percentage distribution of five IMDb rating levels across six movie genres, with each bar segment colored by rating category. D3 v7 builds the visualization using `d3.stack()` for data stacking, `d3.scaleLinear` and `d3.scaleBand` for axes, and `d3.scaleOrdinal` for colors. Hovering over a segment reveals a tooltip displaying the precise percentage for that genre and rating level, while the SVG renders the chart with horizontal bars and labeled axes.

Fork of Fork of activity 6_Question1_sub2

This visualization displays the 2010 population estimates for 20 countries as horizontal bar marks, with the data loaded from a remote CSV file using D3's `csv` function and rendered as SVG via a React component. The example demonstrates integrating React's declarative structure with D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting utilities, where the `Marks` component uses `xScale` and `yScale` to position rectangles, and the axes are built from reusable `AxisBottom` and `AxisLeft` components that generate tick marks and labels.

Fork of activity 6_Question

This chart displays the population of ten countries in the year 2000 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The code uses React with D3 v5, employing `scaleBand` and `scaleLinear` for coordinate mapping, and renders SVG rectangles through custom `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded from a CSV file using `d3.csv`, with population values converted from the ‘2000’ column and formatted using `d3.format`.

activity 6

This bubble chart displays the population of 30 countries in 2020, using horizontal bars where length corresponds to population size. The visualization is built with React and D3 version 5, rendering as SVG. It loads data from a CSV file via D3’s `csv` function, scales the x-axis with `scaleLinear` and the y-axis with `scaleBand`, and uses a custom `Marks` component to draw the rectangles, with tooltips formatted using D3’s `format` function.

Fork of Hello VizHub_sk

This example demonstrates how to build a minimal D3.js visualization using ES6 modules. It uses d3’s `select` function to update the text content of a `div` element with a greeting. A custom local module, `myMessage.js`, exports a string constant that is imported into the main script. The page loads D3 v5 from UNPKG and applies centered, large font styling via a separate CSS file.

Sucharitha kudapa

The visualization displays an overlapping Buddha in colors, formed by a grid of nearly invisible React `<null>` elements scattered randomly via `Math.random()` across a 1000×1000 SVG canvas. A single complex SVG `<path>` draws the Buddha silhouette, which is transformed and scaled, while a floral background image is set via CSS. The React code uses nested array maps with random fill colors and opacity to create a subtle, textured effect behind the central figure.

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

An overlapping, multi-colored Buddha figure emerges from a black background, rendered as a translucent vector path repeated in layered compositions. The visualization uses React to generate SVG polygons with randomized positioning and colors, while the Buddha path is drawn from hardcoded coordinate data and scaled within a transformed group. The piece combines generative random elements with a fixed reference image, creating an abstract, psychedelic reinterpretation of the original form. The code leverages ReactDOM for rendering and relies on SVG’s `<polygon>` and `<path>` elements with `Math.random()` for color variation.