prasaad.lakshme901@gmail.com

Fork of HTML Starter

Fork of ICE-8 Tree

Fork of HTML Starter

Network Graph

Network Graph

Tree Graph

Fork of Network Graph

Fork of Network Graph

Tree Graph

ICE-7(q4)

This area chart displays base experience values for the first 100 Pokémon from the PokeAPI, with the Pokémon index on the x-axis and base experience on the y-axis. The visualization uses D3.js v7 to fetch data via the PokeAPI, create linear scales, render axes with labels, and generate the area path using `d3.area()`. The SVG chart applies a steelblue fill to the area beneath the line, with clearly labeled axes for readability.

ICE-7(q3)

A line chart visualizes base experience values for 100 Pokémon fetched from the PokeAPI, with the Pokémon index on the x-axis and base experience on the y-axis. Built with D3 v7, it renders an SVG line plot and circles, using d3.axisBottom and d3.axisLeft for labeled axes. Hovering over a circle triggers a tooltip showing the Pokémon’s name and base experience, with d3.json and Promise.all handling asynchronous data retrieval.

ICE-7(q2)

This example visualizes the distribution of Pokémon types among the first 100 Pokémon from the PokeAPI. It fetches Pokémon data, extracts each creature’s primary type, and renders a pie chart using D3.js’s `d3.pie` and `d3.arc` functions. Each slice is labeled with the type name and count, while an interactive legend built with SVG `rect` and `text` elements identifies color associations. The chart uses `d3.rollup` for aggregation and D3’s ordinal color scale for slice coloring.

ICE-7 (q1)

This interactive scatter plot visualizes the height and weight of 100 Pokémon fetched from the PokeAPI. Each circle represents a Pokémon, with hover interactions enlarging the point and displaying a tooltip with its name and measurements. Built with D3.js v7, the visualization uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for labeling, and includes a legend and responsive SVG rendering.

Fork of HTML Starter

This bar chart visualizes average broadband speeds across multiple countries, sourced from a CSV file hosted on GitHub. The visualization uses D3.js v6 to load the data and render an SVG bar chart with rotated x-axis labels for country names and a linear y-axis for speed values. Bars are styled in steel blue and highlight orange on hover. The chart includes axis titles and a subtitle, with margins and dimensions configured to present the comparison clearly.

Fork of HTML Starter

This example visualizes the relationship between average broadband and mobile internet speeds across geographic regions. The scatterplot uses D3.js v6 to map each data point with circles, positioning them along the x-axis for broadband speed and the y-axis for mobile speed. The code loads CSV data from a GitHub repository, scales the axes with d3.scaleLinear, and renders the points with SVG circles. Axis labels and a chart title clarify the comparison, while the styling in CSS defines the layout, background, and hover effects for the visualization.

Fork of HTML Starter

This example demonstrates a CSV data viewer that summarizes internet speed statistics by country. It fetches a remote CSV file and displays key metrics in a modal dialog, including column names, row and column counts, and the countries with the highest fixed and mobile internet speeds. The visualization uses the Fetch API to load the data, JavaScript to parse and analyze the CSV text, and Bootstrap 4.5.2 for the button trigger and modal styling. No charts or graphical encodings are rendered; the presentation is entirely text-based within a styled HTML container.