Skip to main content
Log in
V

Varshith Peddineni

@Varshithhh·23 public vizzes

Loading thumbnail…

Activity7_Q2

This area chart visualizes the average lifespan of different tree species, using a filled orange path to highlight the data. The code loads CSV data from a GitHub gist, parsing it with a custom row function that converts numeric values. D3 v7 scales and generators, including `scaleBand`, `scaleLinear`, `area`, and `axisBottom`/`axisLeft`, construct the SVG chart, with labeled axes and a legend indicating the measured metric.

Nov 6, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Activity7_Q2

This visualization displays an area chart of tree species lifespans, with each species plotted along the x-axis and its average lifespan in years along the y-axis. The chart uses `d3.area()` to generate the orange filled area and `d3.scaleBand` and `d3.scaleLinear` for the axes. The data is loaded asynchronously from a CSV file via `d3.csv`. Axis labels and a legend clarify the mapping, while the chart is rendered as an SVG within a responsive container.

Nov 6, 2024
Loading thumbnail…

Fork of Fork of Fork of Activity7_Q2

This example presents a responsive SVG area chart that compares the average height and lifespan of various tree species. It visualizes two distinct categories over a categorical species axis, using blue and orange filled regions to represent each metric. The chart loads CSV data from a GitHub gist and builds overlapping areas with D3’s `scaleBand`, `scaleLinear`, and `area` generators, while `axisBottom` and `axisLeft` render the axes. The visualization demonstrates asynchronous data loading via `csv` and D3 v7’s modular imports.

Nov 6, 2024
Loading thumbnail…

Fork of Fork of Activity7_Q2

This D3.js v7 example displays an area chart comparing the average height and lifespan of various tree species, with each metric represented as a separate filled area. The code loads data from a GitHub-hosted CSV file using `d3.csv` and maps the fields to categorical and linear scales via `d3.scaleBand` and `d3.scaleLinear`. Areas are generated with `d3.area`, and axes are positioned using `d3.axisBottom` and `d3.axisLeft`.

Nov 6, 2024
Loading thumbnail…

Fork of Activity7_Q2

This fork of Activity7_Q2 presents a comparative area chart of tree species, visualizing average height and lifespan. The chart uses two overlaid area paths, colored blue and orange, to represent the categories. The visualization is built with D3 v7, loading data from a remote CSV file. It employs `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and D3's `area` generator for the paths, with axes created using `axisBottom` and `axisLeft`.

Nov 6, 2024
Loading thumbnail…

Activity7_Q2

This visualization demonstrates a minimal Hello World example using D3.js version 5, loaded via UNPKG. The code imports the `select` function from D3 and uses it to target a DOM element with the ID "message", setting its text content. A local ES6 module named `myMessage.js` exports a string constant that provides the displayed text. The example also includes a CSS file for styling the message with center alignment and large font size, showcasing how D3 can integrate with modular JavaScript and custom styling.

Nov 6, 2024
Loading thumbnail…

Activity7_Q2

This example displays an area chart comparing tree species by average height and lifespan, with two overlapping translucent regions representing each metric. It loads data from a CSV file hosted on GitHub Gist and renders the visualization as an SVG. The code uses D3 v7 APIs including `csv`, `scaleBand`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` to construct the chart. The `area` generator creates the filled paths, with categorical color coding—blue for height and orange for lifespan—and the chart adapts to the viewport size.

Nov 6, 2024
Loading thumbnail…

Fork of Activity 7

This example visualizes badminton player tournament wins as a pie chart, with each slice sized by the number of wins for 20 players from a CSV dataset. A legend lists player names with matching color swatches to identify each slice. The chart is built using D3 v6 APIs including `pie()`, `arc()`, `scaleOrdinal` with `schemeCategory10`, and `csv()` for data loading, rendered as SVG elements. Player names and win counts are parsed from a remote CSV file, and the visualization fills the browser window.

Nov 6, 2024
Loading thumbnail…

Activity 7

This example demonstrates a minimal VizHub project that displays a centered text message using D3.js. It loads D3 v5 from UNPKG and employs the `select` function to target the `#message` div, setting its text content from a local ES6 module. The project illustrates how to import from both the D3 library and custom JavaScript modules, with styling applied through an external CSS file. The page’s visual output is simply large, centered text reading “Hello VizHub!”.

Nov 6, 2024
Loading thumbnail…

Activity6_Task4_Question

This example shows a bubble chart of badminton tournaments, plotting total prize money on the x-axis against the number of players on the y-axis, with bubble size encoding tournament popularity and color encoding location. It renders as an SVG using d3.csv to load the tournament data and d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to create the axes, bubble radii, and color mapping. The chart includes rotated x-axis labels, axis titles, and a custom legend listing each tournament with its corresponding location and color.

Oct 23, 2024
Loading thumbnail…

Activity6_Task4_Question

This example presents a bubble chart visualizing coffee consumption across ten countries, plotting per capita consumption on the x-axis against total consumption on the y-axis. Each circle’s radius encodes population size, with a tooltip showing the country name on hover. The visualization loads data from an inline CSV string, parsed with d3.csvParse, and renders as SVG using D3 v7 scales and selection methods. A legend identifies each country by color, and axis labels clarify the measured variables.

Oct 22, 2024
Loading thumbnail…

Activity6_Task4

A bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position encodes horsepower on the x-axis and torque on the y-axis, while its size and color represent highway MPG and car make respectively. The visualization uses D3 v7 to load CSV data, create SVG scales and axes, and render interactive bubbles with mouseover tooltips. A legend explains the bubble size scale, and hover effects highlight individual data points.

Oct 22, 2024
Loading thumbnail…

Actvity6_Task3_Question

This example displays a scatter plot of the Palmer Penguins dataset, mapping bill length on the x-axis and bill depth on the y-axis. Each point is colored by species using a categorical color scale, and a legend identifies the three penguin species. The visualization uses D3.js v7 to load the CSV data, scale axes with `d3.scaleLinear`, render the SVG circles, and construct the legend with `d3.select` and `d3.append`. Axes and labels are formatted with `d3.axisBottom` and `d3.axisLeft`, while `d3.schemeCategory10` assigns point colors.

Oct 22, 2024
Loading thumbnail…

Actvity6_Task3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length. Points are color-coded and shaped by species, categorized via a legend. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbolGenerator` to render icons. Data loads asynchronously from a CSV file and is parsed with `csvParse`. The chart includes axis labels and a shape legend.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes, with each point colored by species via a custom `marker` function. The D3 v6 code loads CSV data from a GitHub gist using `d3.csv`, scales the axes with `scaleLinear`, and renders circles in an SVG. Axis labels appear for petal length and sepal length, though the latter label mismatches the plotted x-values. The chart uses `axisLeft` and `axisBottom` for ticks and fills margin-controlled space.

Oct 22, 2024
Loading thumbnail…

Activity6_Task2_Question

This stacked bar chart visualizes the proportional representation of seven beverages across five serving style categories: hot, cold, carbonated, alcoholic, and non-alcoholic. The chart uses d3.stack() to aggregate data values and d3.scaleBand() for the categorical beverage axis, with d3.scaleLinear() handling the numeric proportion scale. Each bar segment is rendered as an SVG rect, colored via a d3.scaleOrdinal() palette, with a manual legend appended to the right side. The data is embedded directly in the script as a static array of beverage objects.

Oct 22, 2024
Loading thumbnail…

Activity6_Task2

A stacked bar chart displays the distribution of IMDb movie ratings across six genres, with each bar segmented by five rating bands from below 5.0 to above 8.5. The chart uses D3 v7 loaded via UNPKG to process CSV data, applying d3.stack for stacking and d3.scaleOrdinal for color mapping. Interactive tooltips reveal the exact percentage for each genre-rating combination when hovering, with SVG rendering handled through d3.axisBottom, d3.axisLeft, and margin-based layout.

Oct 22, 2024
Loading thumbnail…

Activity6_Q1.2

This example shows a horizontal bar chart displaying the populations of 20 countries in 2010, sorted by country name. The visualization uses React to render SVG elements while leveraging D3’s scaleBand and scaleLinear for positioning and scaling. It loads population data from a CSV file via d3.csv and formats tick labels using d3.format. The bars are colored light green, with a blue axis line and gray text labels.

Oct 20, 2024
Loading thumbnail…

Activity6_Q1.1

This example displays a horizontal bar chart of population figures for ten countries in the year 2000, using SVG rendering within a React framework. The chart loads data from a CSV file via D3’s `csv` function and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, while the `Marks` component renders rectangles whose widths encode population values, with hover tooltips provided by SVG `<title>` elements.

Oct 20, 2024
Loading thumbnail…

Fork of Fork of A6_Q1.1

A horizontal bar chart displays the population of ten countries for the year 2000, with countries listed on the y-axis and population values on the x-axis. Population data is loaded via `d3.csv` from a GitHub-hosted CSV file and rendered as SVG. The chart uses `scaleBand` and `scaleLinear` for positioning, with tick marks colored blue and bars in light green. Hovering over a bar shows its population via a native SVG `title` element. Built with React and D3 v5, the code defines reusable axis and mark components to structure the visualization.

Oct 20, 2024
Loading thumbnail…

Activity6_Task1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, using a light green fill and blue tick marks. Population values are formatted with SI prefixes, converting "G" to "B" for billions. The visualization is built with React and D3 v5, loading CSV data via `d3.csv` and rendering SVG bars using `scaleBand` and `scaleLinear`. The `AxisBottom` and `AxisLeft` components generate ticks, while `Marks` renders rectangles with tooltip titles.

Oct 20, 2024
Loading thumbnail…

6 Reflections

A kaleidoscopic Buddha portrait emerges from hundreds of translucent, randomly colored diamonds, layered and rotated to create a dense, geometric mosaic over a floral background. The composition uses React with SVG rendering, mapping nested arrays to generate diamond shapes with dynamic fill colors, opacity, and rotation transforms. A large intricately detailed SVG path traces the Buddha figure, overlaid and centered within the repeated pattern.

Oct 18, 2024
Loading thumbnail…

Buddha

Inspired by a Buddha icon, this generative artwork layers hundreds of randomly placed, semi-transparent polygons to create a dense, colorful composition. Rendered as SVG within a React application, the piece uses React’s `map` function to create nested loops, producing overlapping diamond shapes with random positions, fill colors, and rotations. The code also embeds a detailed SVG path that outlines a Buddha figure, which is transformed and scaled over the chaotic polygon field, contrasting structured iconography with algorithmic noise.

Oct 18, 2024