H

hasinipriyad7@gmail.com

@hasinipriyad·17 public vizzes

Loading thumbnail…

ICE-8 Hasini 2A Tree

This example visualizes a character hierarchy from the TV series Stranger Things as a vertical tree chart. The root node branches into four main groups—The Party, Teens, Adults, and Creatures—which then split into individual character leaves. Using d3.stratify() to convert flat parent-child data into a hierarchy, the layout is computed with d3.tree() and rendered as SVG paths via d3.linkVertical(). Node shapes vary by depth: a diamond for the root, squares for groups, and circles for characters, with colors assigned through a d3.scaleOrdinal.

Loading thumbnail…

ICE-8 Hasini Map

This visualization presents two choropleth maps: one of global countries and another of U.S. states, displaying literacy rates. The world map uses a static color for all countries, while the U.S. map colors each state according to its literacy percentage, sourced from fictional data. Built with D3.js v7 and the topojson-client, the example projects geographic data using `d3.geoNaturalEarth1` and `d3.geoAlbersUsa`, and renders shapes via `d3.geoPath`. A color gradient legend and interactive tooltips, powered by `d3.select` and mouse events, reveal individual state values.

Loading thumbnail…

ICE-8 Hasini

This example presents a side-by-side comparison of two geographic visualizations: a world map displaying country borders with no data, and a map of India colored by state-wise literacy rates from Census 2011. The India map uses a sequential yellow-green color scale, ranging from 60 to 95 percent, to encode literacy data. It is rendered using `d3.geoMercator` and `d3.geoPath` on an SVG canvas, with interactive tooltips appearing on hover. The project loads geographical data from `visionscarto-world-atlas` and `india-atlas` JSON sources.

Loading thumbnail…

ICE-8 Hasini 2B Network

This visualization uses a D3.js force-directed layout to map the Harry Potter universe as a three-level network, with Hogwarts at the root, the houses Gryffindor and Slytherin at the middle level, and characters such as Harry, Hermione, Draco, and Snape at the leaves. The code builds an SVG scene using `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, color-coded by level with `d3.scaleOrdinal`. Nodes are draggable via D3’s drag behavior, and labels are drawn alongside circles to identify each entity.

Loading thumbnail…

ICE-7 Hasini Area Chart

A stacked area chart visualizes the cumulative Quidditch points earned by each Hogwarts house across a series of matches. Using a step-after curve, the chart shows the contribution of Gryffindor, Slytherin, Ravenclaw, and Hufflepuff as layered areas, with an interactive legend identifying each house. The code uses d3.stack, d3.area, and d3.scaleOrdinal to generate the SVG rendering, with data aggregated from match records sorted by match number.

Loading thumbnail…

ICE-7 Hasini Line Chart

This line chart shows the cumulative Quidditch points for four Hogwarts houses across match numbers, with each house represented by a distinct colored line and a legend. The visualization uses D3.js 6.7.0 with a linear x-scale for match numbers and a linear y-scale for points, rendering SVG paths via `d3.line` and axis generators. Data is loaded as CSV text from a GitHub gist and processed in `index.js` to compute per-house cumulative totals, while `lineChart.js` handles the chart structure and styling.

Loading thumbnail…

ICE-7 Hasini Pie Chart

This pie chart visualizes the distribution of Quidditch house points from a CSV dataset, aggregated by house and displayed with labeled slices and an HTML legend. It uses D3 v6’s `d3.pie` and `d3.arc` generators to compute angles and paths, while a `d3.scaleOrdinal` assigns house colors. The SVG renders slices and text labels, and a separate legend div shows total points and percentages.

Loading thumbnail…

ICE-7 Hasini Reusable Scatter Plot

This example shows a reusable scatter plot that compares Quidditch player performance, plotting total points against average points per match. Data is loaded from a gist and aggregated by player before rendering with D3 v6. The visualization uses d3.scaleOrdinal for house colors and symbols, d3.symbolGenerator for point shapes, and d3.axisBottom/Left for axes. Hovering highlights individual points and logs player details to the console, while a legend identifies the four houses.

Loading thumbnail…

ICE-6 Mutli Series Hasini

This visualization of Quidditch match performance combines a dark-green bar chart for goals scored with a gold line and points for snitch catches across successive matches. The data is aggregated from a Gist CSV file, grouped by match number using `d3.group`, and rendered as SVG. The chart features dual y-axes, a left axis for goals and a right axis for snitch catches, generated with `d3.axisLeft` and `d3.axisRight`. The code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for both y-axes, and `d3.line` for the trend line, within a styled container with a legend.

Loading thumbnail…

Fork of ICE 6 SUSHMITHA B ScatterPlot

This scatter plot visualizes the average points per race for F1 drivers in the 2023 season. Each point represents a driver, with the y-axis showing points scored and the color indicating their team, while a legend lists team colors. Data is loaded from a CSV file using `d3.csv` and processed with custom JavaScript to aggregate race results. The visualization is built with React and rendered as an SVG, using `d3.scaleBand` for driver categories, `d3.scaleLinear` for the point values, and Tailwind CSS for page styling.

Loading thumbnail…

ICE-6 Hasini Scatterplot

This scatter plot displays the highest individual score for each player in a dataset, with points colored by the player’s Hogwarts house. The x-axis uses a categorical band scale for player names, rotated for readability, while the y-axis linearly maps scores. Built with React and D3 v7, the visualization uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for axes, and SVG circles for marks. Data is aggregated to show each player’s maximum score, with tooltips revealing details.

Loading thumbnail…

ICE-6 ScatterPlot

This interactive scatter plot displays individual match points against total career points for players, with each point’s color corresponding to their Hogwarts house. Built with React and D3 v7, it loads tabular data via `d3.csv` and renders circles as SVG elements. The axes are generated using `d3.axisBottom` and `d3.axisLeft`, while linear scales (`d3.scaleLinear`) map the data domains to pixel ranges. The visualization highlights house-based distributions in the dataset, which is fetched from a GitHub gist.

Loading thumbnail…

ICE-6

This horizontal bar chart displays total Quidditch points earned by players from a CSV file, with bars colored by Hogwarts house (Gryffindor, Hufflepuff, Ravenclaw, Slytherin) and labeled with each player's point total. The visualization loads data via `d3.csv`, aggregates points per player using JavaScript's `reduce`, and renders SVG elements through React components. Axis ticks, grid lines, and bar labels are generated using `d3.scaleBand`, `d3.scaleLinear`, and `d3.format`, while the chart layout is defined by explicit margin and size constants.

Loading thumbnail…

ICE-6 Hasini

This example visualizes total Quidditch points per player as a horizontal bar chart, with bars sorted from highest to lowest and value labels placed beside each bar. Built with React and D3 v7, it uses a custom CSV parser to load and aggregate player-points data, then renders SVG marks via `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` for domain calculation, with grid lines and formatted tick labels from `d3.format`.

Loading thumbnail…

ICE-6

This interactive bar chart visualizes total Quidditch points per player, sorted from highest to lowest. It uses React 19 and D3 v7 to load CSV data, aggregate player scores, and render SVG rectangles as bars with axis labels and value annotations. D3 scales (scaleBand, scaleLinear) and formatting utilities (format) handle the positioning and tick generation, while React manages the component state and DOM updates.

Loading thumbnail…

ICE 6

This horizontal bar chart displays total Quidditch points aggregated per player from a CSV file, sorted from highest to lowest. The visualization uses React to manage state and render SVG marks, while D3 version 7 handles data loading via `d3.csv`, scaling with `scaleBand` and `scaleLinear`, and formatting with `format`. An indigo bar per player encodes point totals on the x-axis, with player names labeled on the y-axis and value labels at each bar’s end. Grid lines and tick labels along the x-axis aid quantitative comparison.

Loading thumbnail…

ICE-5 Hasini

This example presents a two-part visualization of Harry Potter Quidditch data. It loads and parses a CSV file using `d3.csv` and `fetch`, displaying total row and column counts, column names, file size, and the first ten records in a table. It then uses D3’s `selection.append` to render a simple SVG graphic of a Golden Snitch with a gold circle and two white wing paths. The data comes from a GitHub gist and is rendered with D3 v7 and SVG.