M

Manasa891-git

@Manasa891-git·22 public vizzes

Loading thumbnail…

Social Network graph - Manasa

This example shows a small social network as a force-directed graph with seven named nodes and six weighted links. Green circles represent people, with darker green strokes and maroon labels, and link thickness reflects the `weight` attribute from the JSON data. The visualization uses d3.layout.force from d3.v4 to position nodes, with drag interaction via `force.drag` and a tick handler that updates SVG line and circle positions. Data loads from the embedded `graphFile.json` file, and the graph is rendered entirely as SVG in a React-based Vite prototype.

Loading thumbnail…

ICE-8 Family Tree - Manasa V Jadda

This interactive family tree visualization displays the ancestral hierarchy of Manasa V Jadda, showing three generations of relatives connected by colored nodes and curved links. Using D3 v3's tree layout and SVG rendering, the diagram color-codes each generation—grandparents in light blue, parents in grey, siblings/cousins in yellow, and nieces/nephews in pink—with detailed labels showing names, node types, and relationships. The implementation leverages d3.layout.tree for positioning, foreignObject elements for text wrapping, and CSS tooltips for additional information. Clicking nodes triggers smooth transitions that expand or collapse branches, while arrow markers on links indicate parent-child directionality in the family structure.

Loading thumbnail…

ICE-8 Manasa V Jadda

This interactive tree chart visualizes a family tree, showing hierarchical relationships from a root ancestor down to multiple generations. Built with D3.js and rendered as an SVG with animation, the chart displays nodes as circles with names, connected by blue links. The tree uses a static layout with curved diagonal edges, and clicking a node animates the reorganization. The visualization is based on a hardcoded JavaScript data structure, and it employs D3’s layout and transition APIs to smoothly reposition nodes. The orange background and distinct cyan and red node colors aid visual differentiation.

Loading thumbnail…

ICE 8 - China Map - Manasa V Jadda

This example displays a static map of China using a Mercator projection centered on the country. The visualization renders geographic boundaries as SVG paths, with provinces filled in green and stroked with dark green outlines. The code loads GeoJSON data from a GitHub gist and processes it using the TopoJSON `feature` API within a d3.json promise. It applies the d3.geoPath generator combined with d3.geoMercator for projection, and appends each country path to an SVG canvas sized at 960 by 700 pixels.

Loading thumbnail…

World Map-ICE8 Manasa V Jadda

This world map displays global country boundaries and landmasses using a Natural Earth projection, rendered as SVG via React. It shows graticules, interior borders, and a light green background, with land colored teal and oceans pale tan. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw geographic features, sourced from the World Atlas TopoJSON dataset. Interiors are computed using topojson.mesh to highlight country borders distinctly.

Loading thumbnail…

Bonus ICE - 3D Scatter plot - Manasa

This 3D scatter plot displays movie collections across countries, with each point representing a movie’s global, Indian, and United States earnings plotted against the year of release. The visualization uses Plotly’s `Plotly.newPlot` to render three scatter3d traces, colored green, red, and orange, respectively, while loading data via `d3.csv` from a GitHub-hosted CSV file. The layout defines axes for collection, movie, and year, with no additional margins.

Loading thumbnail…

Fork of Bonus ICE - 3D Scatter plot - Manasa-1

This 3D scatter plot visualizes the relationship between sleep duration, REM sleep percentage, and deep sleep percentage, using data from a sleep-efficiency CSV file fetched from GitHub. The visualization uses Plotly.js to render the interactive `scatter3d` trace, with D3.js handling CSV parsing via `Plotly.d3.csv` and data extraction through the custom `unpack` function. Each point represents a sleep record, colored and sized uniformly, with axes labeled for all three variables.

Loading thumbnail…

Interactive 3D Bar chart-Manasa V Jadda

An interactive 3D bar chart displays the count of players for six sports (Football, Baseball, Softball, Cricket, Basketball, Volleyball) across seven countries (India, Australia, New Zealand, England, Sri Lanka, Pakistan, Bangladesh). Each sport is a distinct series with its own stack, rendered as three-dimensional columns with depth. The chart is built using the Highcharts library, specifically the `highcharts-3d.js` extension, with the chart type set to `column` and `options3d` enabling perspective, rotation (alpha 30, beta 45), and a view distance of 80. Data is provided directly in the series arrays.

Loading thumbnail…

Area Curve- ICE 7

This area chart displays US GDP growth over time, with the area beneath the curve filled in orange and labeled axes for year and GDP. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for scaling, `area` and `curveBasis` for the smooth path, and `axisBottom` and `axisLeft` for the grid and labels. Data is loaded from a CSV file using the `csv` function, with years parsed as dates and GDP values converted to numbers. The chart includes a red title and purple axis labels, styled via external CSS.

Loading thumbnail…

Pie Chart

This pie chart visualizes the percentage contribution of individual players to sports, sourced from a CSV file of players and their sports contributions. Built with D3.js v5, it generates an SVG pie chart where each slice is labeled with the student's name and colored using a categorical scale. A legend on the right maps colors to players, displaying their exact contribution percentages formatted with d3.format. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to construct the chart and its interactive elements.

Loading thumbnail…

Pie chart - Manasa

This example visualizes the basic cost of Netflix subscriptions by country, using a pie chart to show the proportional contributions of each nation. The chart is rendered as an SVG using D3.js (v5) within a React framework, with slices colored via a categorical color scale. Data is loaded from a CSV file hosted on GitHub, and the chart displays the top ten countries by contribution, with a legend listing each country and its corresponding cost in dollars. Mouseover events log the contribution value to the console.

Loading thumbnail…

ICE - 7 Pie - Manasa

A pie chart visualizes the population distribution across continents, sourced from a CSV file fetched via `d3.csv` and represented as proportional slices. The D3 code uses `d3.pie` to compute arc segments, `d3.arc` with inner and outer radii to generate the shapes, and `d3.scaleOrdinal` with a custom color array for section fills. Each slice displays its population value as text, positioned using the arc’s centroid. A legend, built with SVG rectangles and text, maps continent names to their corresponding colors and formatted population counts, rendering everything within an SVG canvas.

Loading thumbnail…

ICE-7 PIE CHART - Manasa

This pie chart visualizes COVID death statistics across seven US states, with each slice’s size proportional to the reported death value. The chart uses SVG rendering with D3 v4, employing `d3.pie()` and `d3.arc()` to generate the geometric paths, while `d3.scaleOrdinal` assigns categorical colors. Hovering over a slice triggers interactive mouseover events that display a tooltip with the state name and value, and adjusts slice opacity to highlight the selected segment.

Loading thumbnail…

Sample Line Chart

This sample line chart displays US GDP data from 1980 to 2020, drawing a smooth basis curve through the points. The code uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with curveBasis to generate the path. It loads data from a CSV hosted on GitHub, parses the numeric values, and renders the chart as SVG with red strokes and a pink background. The title and axis labels are added via d3 text elements.

Loading thumbnail…

Reusable Scatter Plot - Manasa

This interactive scatter plot, built with React and D3, visualizes the Iris dataset, mapping sepal and petal measurements. The visualization cycles through different x-axis columns—Petal Width, Sepal Width, Petal Length, and Sepal Length—at set intervals, while the y-axis remains Sepal Length. Each of the three Iris species (Setosa, Versicolor, and Virginica) is distinguished by color, with a legend identifying them. The plot uses D3's `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and data is loaded via `d3.csv`. SVG circles represent the data points, and the animation uses `setInterval` to update the chart.

Loading thumbnail…

Scatter Plot of Sleep Efficiency Dataset

This scatter plot visualizes the relationship between age and sleep efficiency using a dataset loaded from a GitHub-hosted CSV file. The visualization shows individual data points as red markers, with age plotted on the x-axis and sleep efficiency on the y-axis. The implementation uses Plotly.js, specifically the `Plotly.d3.csv` method to parse the remote data and `Plotly.newPlot` to render the interactive chart. The code defines a single scatter trace with marker styling and a layout that includes axis titles and a chart heading.

Loading thumbnail…

ICE 6 Scatter Plot Manasa V Jadda

This scatter plot visualizes sleep efficiency against age, with each circle colored by deep sleep stage and sized to reflect sleep duration and REM sleep percentage. It uses D3 v6’s `csv` loader to parse the sleep-efficiency dataset, `scaleLinear` for both axes, and `axisLeft`/`axisBottom` for tick marks. The SVG is rendered full-window with static circle markers, colored via a hardcoded switch on species-like values, and manually rotated axis labels styled with inline fonts.

Loading thumbnail…

Ice 6 MVJ task 2

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (blue for setosa, yellow for versicolor, and red for virginica). The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft and d3.axisBottom for axes, rendered as SVG circles. It also reads sepal measurements for potential use in point sizing, though the radius remains fixed at 5 pixels. The visualization is built with d3.v6 within a React framework.

Loading thumbnail…

ICE 6 Manasa V Jadda

This visualization displays earthquake magnitudes using a horizontal bar chart of the top 12 seismic events. The chart highlights each earthquake’s title on the y-axis and its magnitude on the x-axis, with red gridlines marking tick values. The code uses React with hooks and D3 v5’s `scaleBand`, `scaleLinear`, `csv` parsing, and SVG rendering to draw the bars. Data is loaded from a GitHub-hosted CSV file, with a basic color scheme and minimal styling.

Loading thumbnail…

ICE 5

A scatter plot displays 20 randomly positioned circles, each with a random RGB color, generated using JavaScript's `Math.random`. Overlaid on this is a single complex SVG path of a flame-like shape, drawn with a thick stroke, rendered using React's `svg` and `circle` elements. The visualization combines procedural randomness with a fixed vector graphic, showcasing a simple, abstract data-art composition.

Loading thumbnail…

ICE 5 Manasa

This visualization displays recent earthquake data from a live feed, mapping occurrences geographically. The page uses an SVG element with a patterned background and an embedded base64-encoded JPEG map image to provide the contextual geography. The implementation loads D3 v7 from a CDN and relies on standard JavaScript to fetch and process the dataset, while the visual layout is styled with custom CSS that sets a sky-blue page background and centers the descriptive headings.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A generative artwork renders one thousand randomly colored and positioned triangles overlaid with a large, white Buddha path. The triangles are drawn as SVG polygons with variable sizes and opacity, creating a vibrant, chaotic background. The Buddha itself is a complex SVG path, scaled and translated within the same `<svg>` element. This example uses React with ReactDOM to construct the SVG output programmatically, combining random geometric primitives with a detailed vector figure.