Vishnu Mallampalli

@VishnuMallampalli·5 public vizzes

Fork of Reusable Scatter plot Activity 8

This fork of a D3.js scatter plot demonstrates the iris dataset’s four measured features (petal and sepal length/width) with the x-axis cycling through each variable on a timer while the y-axis stays fixed on sepal length. Colored circles distinguish iris species, and the plot includes a static legend. The code uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a custom `scatterPlot` generator, animating via `setInterval` and rendering to SVG. The data is loaded from a CSV file using D3’s `csv` function.

Jul 12, 2024

Loading thumbnail…

Assignment_2.1_Student_Alcohol_Consumption

A pie chart displays the distribution of student alcohol consumption by age, with each slice representing the count of entries for a specific age group. Built using D3 v7, the visualization loads data from a CSV file, aggregates counts with `d3.rollup`, and generates arcs with the `d3.pie` and `d3.arc` helpers. A legend with color-coded rectangles maps the ordinal color scale to age values, while labels placed at arc centroids identify each slice. The chart is rendered as an SVG element.

Jul 12, 2024

Loading thumbnail…

Assignment_2.2

This example displays a global renewable energy production area chart, using a dataset of countries and their total renewable energy output. The D3.js v7 code fetches CSV data from a GitHub repository, parses it with `d3.csvParse`, and renders a single area path using the `d3.area` generator. The visualization includes a rotated x-axis for country labels via `d3.axisBottom` and a linear y-axis for energy values, all rendered as SVG within a styled HTML page.

Jul 11, 2024

Loading thumbnail…

Assignment2

This example presents an interactive scatterplot of the Iris dataset, cycling through different flower measurements on the x-axis every few seconds. The visualization colors each of the three species—setosa, versicolor, and virginica—with distinct hues and includes a legend with labeled color swatches. Users see dynamically updated axes and titles as the displayed variable changes. The code loads data from a GitHub-hosted CSV and uses D3 v5’s `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` with `join` to render animated SVG circles.

Jul 8, 2024

Loading thumbnail…

Assignment2_Q1

This animated scatter plot explores the Iris dataset, cycling through different x-axis attributes (petal width, sepal width, petal length, sepal length) every few seconds while keeping sepal length on the y-axis. Colored circles distinguish the three Iris species, with a legend and axis labels updating dynamically. The visualization loads data via `d3.csv` and renders SVG elements using D3 v5, building a reusable scatter plot component with `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` for animation.

Jul 8, 2024