Y

Yaswanth

@dudduyaswanth·21 public vizzes

Loading thumbnail…

ICE_8_Yaswanth_duddu

This network diagram visualizes the tripartite relationships between cuisines, ingredients, and dishes using a force-directed layout. Node shapes encode the three categories—triangles for cuisines, circles for ingredients, and squares for dishes—while link width indicates the strength of association between connected entities. The visualization uses D3.js v7, specifically the d3.forceSimulation API for physical layout, with interactivity allowing users to drag nodes and zoom via mouse wheel. The data consists of 15 nodes and six links drawn as SVG paths, with a tooltip displaying node details on hover.

Loading thumbnail…

ICE_8_Yaswanth_duddu

This example shows a vertical family tree for the Duddu family, with a root node and three generations of descendants branching downward. The tree uses an SVG rendering with D3 v7’s `d3.stratify` to convert flat parent-child data into a hierarchy, then `d3.tree()` to compute the layout and `d3.linkVertical()` to draw the curved link paths. Each node is a clickable circle with a text label, and hovering a node triggers a CSS-based tooltip that displays additional information. The chart is styled with a clean, light theme and includes a legend for visual reference.

Loading thumbnail…

Yaswanth_ICE_8

This example presents two linked SVG maps of the world showing the geographic distribution of the largest lawsuits (in USD billions). A choropleth map displays all countries by settlement value, while a second map highlights the top N countries and dims the rest, with an interactive number input to adjust N. The visualization uses D3 v7 with `d3.geoPath` and TopoJSON from the world-atlas dataset. Hovering over countries reveals a tooltip, and highlighted countries are summarized as pills beneath the maps.

Loading thumbnail…

Fork of Map

This visualization demonstrates two geographic maps side by side: a world map using the Natural Earth projection and a US state map using the Albers USA projection. The maps show country and state boundaries rendered as SVG paths with light blue and green fills, overlaid on a subtle graticule grid for the world map. Built with D3 v7 and TopoJSON, the code loads geographic data from the `world-atlas` and `us-atlas` datasets via CDN, then applies `d3.geoNaturalEarth1` and `d3.geoAlbersUsa` projections with `d3.geoPath` to draw the features.

Loading thumbnail…

Yaswanth_duddu_Ice7

This example displays an area chart comparing flipper lengths across three penguin species (Adelie, Chinstrap, and Gentoo) from the Palmer Penguins dataset, with sample index on the x-axis and flipper length in millimeters on the y-axis. The visualization uses d3.area() to generate filled, semi-transparent areas for each species, colored via d3.scaleOrdinal with d3.schemeSet2. Axes are rendered using d3.axisBottom and d3.axisLeft, with a custom legend positioned to the right. Data preprocessing groups rows by species using d3.group before rendering the SVG output.

Loading thumbnail…

Yaswanth_duddu_ICE7

This visualization displays a line chart comparing average flipper lengths across three penguin species from the Palmer Penguins dataset. The chart uses d3.group to organize data by species, with d3.line generating separate colored paths for each category. Axes are rendered using d3.axisBottom and d3.axisLeft, while a legend identifies each species. The reusable lineChart factory function demonstrates a modular approach with configurable margins and scales, rendering to SVG with D3 v7.

Loading thumbnail…

Yaswanth_duddu_ICE7

This visualization displays a reusable scatter plot of the Palmer Penguins dataset, showing the relationship between bill length in millimeters and flipper length in millimeters, with each point colored by species. The chart uses D3 v7 to implement a custom scatterPlot factory function that creates distinct SVG symbols (circles, squares, and triangles) for each of the three penguin species. Axes include labeled scales for both measurements, and a legend maps each species to its corresponding shape and color using d3.schemeSet2. The data is loaded from a local CSV file using d3.csv with automatic type conversion.

Loading thumbnail…

Yaswanth_duddu_ICE7

This visualization displays the species distribution of the Palmer Penguins dataset as a stylized, animated 3D-effect pie chart. Using D3.js v7, it loads data from a CSV file and aggregates counts by species with `d3.rollup`. Pie slices are drawn with `d3.pie` and `d3.arc`, featuring linear gradients, animated entrance via `transition.attrTween`, and hover expansion effects. Connector lines and labels are added using `outerArc.centroid`, with the SVG rendered on a card-style background featuring drop shadows.

Loading thumbnail…

Yaswanth_Duddu_ICE7

This example displays a reusable pie chart showing category shares for a small retail dataset of six items like Grocery and Electronics, with hover tooltips revealing exact values. Built with D3 v7, the chart generates an SVG pie layout using `d3.pie` and arc generators, with slice labels placed along polylines and a separate legend. The code is structured as a configurable pie chart factory function, allowing flexible accessor settings for name and value, and supports responsive resizing within its container. A halo effect on labels and a fixed tooltip enhance readability.

Loading thumbnail…

Fork of Yaswanth

This gallery example displays a simple static “Hello HTML!” message centered on a plain background. The visualization consists of a single text element styled with CSS, with no dynamic data or interactive features. The implementation separates concerns into three files: an HTML document defines the page structure, an external stylesheet sets the font size and alignment, and a JavaScript file logs “hello world” to the console but does not affect the visual output. No charting, mapping, or animation libraries are used.

Loading thumbnail…

Yaswanth

This example displays a static "Hello HTML!" message centered on a blank page, styled with a 12-em font size. The visualization demonstrates a minimal HTML/CSS/JavaScript setup, though the code only logs "hello world" to the console and does not render any data or interactive graphics. It relies on standard DOM elements and CSS styling, with no external libraries or data sources. The page serves as a basic starter template rather than a data-driven visualization.

Loading thumbnail…

Yaswanth_duddu_ICE7

A reusable scatter plot displays earthquake depth versus magnitude from a CSV file, with each point colored to distinguish whether a tsunami occurred. The visualization highlights the relationship between these seismic measurements while separating the data into two categories for comparison. Built with D3 v7, the code uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for the color mapping. It renders points as SVG circles with gridlines, axes, labels, and a legend, filtering out invalid rows before drawing.

Loading thumbnail…

Yaswanth_duddu_ICE7

This reusable scatter plot shows the relationship between hours studied and exam scores for 50 students, with attendance percentage encoded as color and assignment completion as point radius. The visualization is built with D3 v7, using a queryable ScatterPlot function that accepts custom accessors for x, y, radius, and color. The code implements scales for positioning and sizing, axis generators for the plot frame, and SVG circle elements with tooltips via the append('title') API. The dataset is loaded from a CSV file containing student records with eight variables.

Loading thumbnail…

Yaswanth_duddu_ICE7

The visualization explores the relationship between student study hours, attendance, assignments, and exam scores using a scatter plot. Each point represents a student, with positions derived from the CSV data and visual encoding mapping study metrics. Rendered using HTML5 Canvas with CSS styling, the plot demonstrates that increased study hours and attendance generally correlate with higher exam performance. A 12em bold message overlays the chart, suggesting a focused narrative element. This example uses Canvas drawing methods and encoded CSV parsing to illustrate academic achievement patterns.

Loading thumbnail…

Yaswanth_Duddu_ICE7

This scatterplot example uses D3.js to render a simple two-dimensional point distribution. The visualization displays individual data points positioned across the plotting area, with styling controlled through a custom stylesheet that includes a large message element. The implementation leverages standard D3 selection methods to append SVG circles for each data point, while the accompanying style sheet applies font sizing and text alignment rules. The example includes a basic JavaScript entry point that logs a message to the browser console, serving as a minimal demonstration of D3’s core data-binding capabilities.

Loading thumbnail…

ICE_7_Yaswanth_Duddu

This scatter plot shows the relationship between study hours and exam scores for 50 students, with point color encoding attendance percentage (using a `d3.scaleThreshold` with blue, purple, and red bands) and point radius encoding assignment completion via a `d3.scaleSqrt`. The visualization is built with D3 v7, using the `d3.select` fluent API to configure the reusable `ScatterPlot()` component, which appends an SVG with `d3.axisBottom` and `d3.axisLeft` scales. Data is loaded from a local CSV file using `d3.csv` and `d3.autoType`, with hover tooltips provided through SVG `<title>` elements.

Loading thumbnail…

ICE_7_Yaswanth_Duddu

A reusable D3 v7 scatter plot displays study habits across 30 students, mapping hours studied to exam scores. Each SVG circle encodes attendance through a purple-blue color scale and assignment completion via radius size. The chart includes gridlines, axes, and interactive hover tooltips showing all four data dimensions. A custom ScatterPlot component function applies margin conventions and D3 scales, with the gradient legend indicating three attendance categories.

Loading thumbnail…

ICE_7_Yaswanth_Duddu

This scatter plot shows the relationship between study hours and math scores for ten students, with each circle representing an individual student’s data point. The visualization uses D3.js v6 to load data from a CSV file, scales the x and y axes linearly, and renders circles in an SVG container. The code converts the CSV strings to numbers, creates x and y scales, appends axes, and positions the steel-blue circles using the scale functions to map study hours and scores to pixel coordinates.

Loading thumbnail…

Ice_6_Yaswanth_duddu

This visualization combines a bar chart and multi-series line chart to display monthly Sales, Profit, and Expenses trends from a CSV dataset. Expenses are rendered as semi-transparent green bars, while Sales and Profit appear as blue and orange lines, respectively. The chart uses D3.js v6 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for path generation. Interactive tooltips appear on bar hover, and the chart includes rotated month labels, axis titles, and a color-coded legend.

Loading thumbnail…

ICE_6_Yaswanth_duddu

This visualization is a scatter plot that shows the relationship between engine size and fuel efficiency (MPG) for different car types, with each point colored by vehicle category from the cars.csv dataset. The D3.js v6 code loads the data using `d3.csv` with `d3.autoType`, then creates linear scales for both axes via `d3.scaleLinear` and an ordinal color scale for the categorical variable. Circles are bound to data using the `enter()` selection, and interactive tooltips appear on mouseover. The SVG chart includes axes, labels, a title, and a legend, all rendered through D3's SVG rendering API.

Loading thumbnail…

ICE_6 Yaswanth

This bar chart displays the number of students enrolled in five different courses, with values ranging from 60 to 150. Each bar uses a vertical linear gradient that shifts from purple to blue, and hovering over a bar triggers both a color change to orange-pink and the appearance of a tooltip showing the course name and student count. The chart, rendered as an SVG, uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the numeric y-axis, with D3 v6 handling axes, data binding, and event listeners.