H

HarshithaAru06

@HarshithaAru06·19 public vizzes

Loading thumbnail…

ICE-8

This interactive D3.js (v7) visualization presents global and India-specific renewable energy shares for 2022 using SVG maps. It employs `d3.geoPath` to render world countries and Indian states as interactive polygons, with hover effects and tooltips. A color gradient legend uses SVG linear gradients to indicate renewable percentages. The tooltip dynamically displays data, while the hover transition adjusts stroke width. The map uses a light blue sphere and graticule, with data-driven coloring applied to geographic regions.

Loading thumbnail…

ICE-8

This example shows an interactive social network of ten people divided into five community groups and connected by weighted links. The visualization uses D3.js v7 with force-directed simulation to position nodes on an SVG canvas, while the `d3.scaleOrdinal` color scale maps each community group to a distinct color. Users can click and drag nodes to rearrange the network, and a custom tooltip displays additional information on hover, while a legend identifies the group colors.

Loading thumbnail…

ICE-8

This example visualizes the multi-generational Smith family tree, showing 47 members across 4 generations as an interactive network. It uses D3.js v7 with a force-directed layout via `d3.forceSimulation`, rendering nodes and links as SVG elements. The data is embedded directly in the page as a flat array of parent-child relationships. Hovering over a node triggers a tooltip that displays member details, with `d3.mouse` positioning and CSS transitions controlling the tooltip’s appearance.

Loading thumbnail…

ICE-8 Map

This example presents two geographic maps side-by-side: a world map using the Natural Earth projection and an India map using the Mercator projection. Both are rendered as SVG elements via D3 v7 and TopoJSON, with country and state boundaries drawn using `d3.geoPath`. The world map includes a graticule layer and a blue fill for countries, while the India map displays all states with a light background. Data sources are the `world-atlas@2` countries file and a GitHub-hosted India states TopoJSON, respectively.

Loading thumbnail…

assignment

A filled area chart visualizes final exam scores for twenty students, ordered by their index in the dataset. The chart displays a single continuous line with a light blue fill, showing the distribution of scores, which range from about 64 to 100. Built with D3.js v7, the visualization loads `data.csv` using `d3.csv` and `d3.autoType`, then constructs the area using `d3.area` with a monotone curve, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for the tick marks. The chart is rendered as an SVG element.

Loading thumbnail…

assignment

A line chart shows final exam scores for students in a performance dataset, plotted sequentially by student index. The visualization encodes each student as a point connected by a blue line, with axes labeled "Student Index" and "Final Score." The code uses D3 v7's `d3.csv`, `d3.line`, and `d3.scaleLinear` to load data from `data.csv`, generate the SVG path, and draw circles for each data point.

Loading thumbnail…

assignment

This pie chart visualizes the pass/fail distribution of students from a performance dataset. The D3.js code (using `d3.pie`, `d3.arc`, and `d3.rollup`) aggregates the `pass_fail` column into slice counts, with each slice labeled as a category and its percentage. A right-side legend, built with `d3.select` and dynamic HTML joins, lists each category and its raw value. The SVG rendering uses ordinal colors from `d3.schemeTableau10` and includes slice borders and white text strokes for readability.

Loading thumbnail…

assignment

This scatterplot visualizes student performance, plotting study hours per week against final exam scores, with gender as a color-coded grouping variable. It uses the D3.js v7 library with a reusable `scatterPlot` function pattern, rendering SVG circles within a margin-based layout. The chart reads from `data.csv` and builds linear scales for both axes, applying ordinal color encoding via `d3.scaleOrdinal` with the Tableau color scheme.

Loading thumbnail…

Assignment

This scatter plot visualizes the relationship between students’ study hours per week and their GPA, with each circle representing a single student. The x-axis shows study hours, the y-axis shows GPA, and hover effects increase circle opacity and radius. The visualization loads CSV data from a GitHub Gist, uses d3.csv for parsing, and positions marks with d3.scaleLinear and d3.axisBottom/axisLeft. Grid lines are generated using a modified axis with tickSize, while circle color and size are fixed channels. The chart is rendered as SVG with D3 v7.

Loading thumbnail…

Assignment

This scatter plot displays the relationship between bill length and flipper length for a sample of penguins, with each point representing an individual bird. The data comes from the `@curran/penguins` dataset and is filtered to remove rows with missing values. The visualization uses D3.js to render circles with a fixed radius and opacity on a light gray background, with axes and labels generated using the `@curran/responsive-axes` library. The chart employs linear scales for both dimensions, positioning points within margins and adding a subtle gray inner rectangle to frame the plot area.

Loading thumbnail…

assignment

This visualization shows average student GPA across different majors, using a horizontal bar chart where bar length encodes the numeric value and vertical position distinguishes each category. Built with React and D3 v7, it sorts the data in descending order and maps values to a linear scale for bar width while a band scale positions each major. The bars are rendered as `<rect>` elements with hover effects that adjust opacity and fill color. The chart includes labeled axes, gridlines, and loads CSV data from a GitHub Gist through a custom `useData` hook with `d3.csv`.

Loading thumbnail…

assignment

This bar chart visualizes the number of Nobel Prizes awarded per category, using data parsed from a CSV file containing laureate information. The D3.js v7 code loads the data, counts prizes by category, and renders the results using `scaleBand` and `scaleLinear` for axes. Bars are colored steelblue and sorted in descending order by prize count. The SVG visualization includes rotated category labels on the x-axis, a title, and axis labels, with the underlying data rows also including year, prize share, and laureate details.

Loading thumbnail…

assignment

This example visualizes the top 10 most populous countries using horizontal bar charts, displaying population estimates from the UN Population Estimates 2024 dataset. The bars are rendered as rectangles within a grey inner plot area, with axis labels for country names and population counts in thousands. The code leverages d3’s `scaleBand` and `scaleLinear` for positioning and scaling, and uses the `axes` helper from `@curran/responsive-axes` to generate the axes. The visualization dynamically resizes to fit its container via `observeResize`.

Loading thumbnail…

ICE-5 Harshitha

This visualization provides a text-based overview of a student performance dataset, displaying key statistics about the file size, number of rows, and columns in a message container above a table. The table presents the first ten rows of the dataset, with column headers formatted in uppercase and missing values displayed as "N/A." Built with D3 v7, the example uses `d3.csv` to fetch and parse remote CSV data, then leverages the `d3.select` API to dynamically create and populate the HTML table structure. The data is loaded from a GitHub Gist, and the page includes custom styling from an external CSS file.

Loading thumbnail…

ICE-5

This interactive scatter plot visualizes sepal length against sepal width for three Iris species, with interactive hovering in the legend highlighting corresponding data points. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and custom `join` operations for DOM updates. The legend supports hover interactions that fade unselected species. Data loads from the Fisher's Iris dataset CSV, and the visualization follows the BBC color palette with species-specific styling.

Loading thumbnail…

ICE-5 Harsh

This dashboard displays a summary and preview of a Student Performance dataset, showing the first five students in a styled table and a bar chart of their GPAs. The D3.js v7 code loads CSV data via `d3.csv` and uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the chart. A `<div>` message container reports dataset size, while the table uses CSS for zebra striping and hover effects.

Loading thumbnail…

student_performance

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three species. The chart uses a BBC-style color theme to distinguish setosa, versicolor, and virginica points. Hovering over legend items fades non-matching data points. The visualization is rendered with D3.js, using `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to build the plot.

Loading thumbnail…

shuttle

This visualization displays the Iris dataset as a scatter plot comparing sepal length against sepal width, with species shown as colored points and an interactive legend that fades non-hovered categories. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear for both axes, and d3.scaleOrdinal for color encoding. It includes a legend with mouseenter and mouseleave events that trigger opacity changes to highlight selected species. The code also uses d3.axisBottom and d3.axisLeft for chart axes.

Loading thumbnail…

ICE-5

This interactive scatter plot visualizes the Iris dataset, comparing sepal length against sepal width across three flower species. The visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft to render the chart, with each species mapped to a distinct BBC color palette. Hovering over the legend items triggers a fade effect on non-selected species using mouseenter/mouseleave events, while the title, subtitle, and source notes are overlaid using SVG text elements.