S

sushmithameher-patnam

@sushmithameher-patnam·20 public vizzes

Loading thumbnail…

Social network graph for ice 8

A social network graph visualizes character connections from the ice 8 dataset, showing six nodes (Sita, Rama, Lakshman, Hanuman, Arjuna, Bheem) linked by seven edges with directional arrows. The SVG rendering uses d3.forceSimulation with link, charge, collision, and center forces to position nodes dynamically. Nodes appear as purple circles with labels, support drag interaction, and highlight on mouseover. The visualization loads data from a JSON file and applies custom CSS styling for hover states and edge strokes.

Loading thumbnail…

Network graph for ice 8

A force-directed network graph renders ten people as pink circles labeled with names, connected by directed lines with arrowheads to depict mutual friendship links. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to compute the layout, drawn as an SVG. Nodes can be dragged, and hovering highlights a node with a thicker stroke. The `data.json` file provides the node and link data, and `d3.json` loads it asynchronously.

Loading thumbnail…

Animal tree fork for ICE 8

This example visualizes a hierarchical animal classification tree, from "Animals" down to specific groups like mammals, birds, and arthropods. It shows the branching structure of the data with color-coded nodes and animated SVG rendering. The visualization is built with D3.js v3, using the `d3.layout.tree` API to compute the layout and coordinates. Link labels and directional arrows are included, and the tree supports zooming and dragging via `d3.behavior.zoom`. The underlying data is loaded from a JSON file, and node colors are assigned based on type attributes during a breadth-first traversal.

Loading thumbnail…

Country map for ice 8

This visualization displays a map of the United States using a plum fill for land areas and purple strokes for state borders. The geographic data comes from the US Atlas TopoJSON file, processed with `d3.geoPath` and the `geoAlbersUsaTerritories` projection to render SVG paths for all states and their interior boundaries. React manages the component state, while the `useData` hook fetches and transforms the TopoJSON topology into GeoJSON features and meshes.

Loading thumbnail…

country map ice 8

This choropleth displays the 50 US states as blue landmasses with black borders, highlighting each state in purple on hover. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features from a TopoJSON file loaded via `json()` from D3 v5. React manages the component state, while TopoJSON’s `feature` and `mesh` functions extract state boundaries. The SVG output is generated through React, with styling defined in CSS.

Loading thumbnail…

Fork ICE 8 world map

This visualization displays a world map with countries rendered in saddle brown against a light blue sphere, using a simple equirectangular projection. Countries highlight in rosy brown on hover. The code loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using TopoJSON’s `feature` method. It renders the map with D3’s `geoPath` and `geoEquirectangular` APIs, appending SVG path elements for each country. Styling is handled via CSS classes for the sphere and country fills.

Loading thumbnail…

Fork ICE 8 world map

This example displays a world map using an equirectangular projection, rendering each country as a green SVG path with black outlines that turn orange on hover. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method from TopoJSON. D3 v5’s `geoPath` and `geoEquirectangular` generate the sphere background and country shapes, while CSS handles the color styling and interactive hover states.

Loading thumbnail…

ICE 7 Reusable Scatter Plot question 1

This reusable scatter plot visualizes the Iris Dataset, encoding the species of each flower with distinct shapes and colors. Built with D3 v6, it uses a custom `scatterPlot` module and a functional, object-oriented chart API. The visualization dynamically cycles through the four numeric attributes (petal width, sepal width, petal length, sepal length) on the x-axis every four seconds using `setInterval`, while the y-axis remains fixed to sepal length. SVG paths are drawn using D3's `symbol` API for shape mapping and `scaleOrdinal` for color assignment, with axes rendered via `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of ICE7 Area Chart

This visualization displays Honda stock prices over time as a smooth, filled area chart. The code loads CSV data from a GitHub gist and uses d3.scaleTime, d3.scaleLinear, and d3.area with a curveBasis interpolation to render the SVG path. Axes are generated with d3.axisBottom and d3.axisLeft, featuring custom tick formatting and labels. The chart is built using D3 v6 within a React framework.

Loading thumbnail…

Fork of Line Chart ice-7

This example displays Honda stock prices over time as a red line chart, with the year on the x-axis and stock price on the y-axis. It uses d3.scaleTime and d3.scaleLinear to map the data, with d3.axisBottom and d3.axisLeft generating labeled ticks. The data is loaded from a CSV file using d3.csv and parsed with d3.timeParse. The chart is rendered as an SVG, with a line generator from d3.line drawing the path, and gridlines created via tickSize.

Loading thumbnail…

Reusable D3 Scatter Plot ICE 7

This interactive scatter plot visualizes the Iris dataset, with each point colored by species (setosa, versicolor, virginica). A timer cycles the x-axis through four flower measurements every four seconds, updating the layout smoothly. Built with D3 v6, the chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles. The reusable `scatterPlot` function accepts configurable accessors and margin settings, demonstrating a modular pattern for animated, dimension-switching visualizations.

Loading thumbnail…

Fork of ICE - 7 Pie Chart OTT and subscription

This visualization presents a pie chart comparing monthly subscription prices in Indian Rupees across various OTT platforms, using data fetched from a GitHub-hosted CSV file. Each slice is labeled with its price, and a color-coded legend identifies the platform names alongside their corresponding rates. The chart is built with React, D3 v5’s `pie()` and `arc()` generators, and `scaleOrdinal` for coloring, rendering in SVG. The code uses asynchronous `csv` loading and `d3.arc` for both slice geometry and centroid-based text placement.

Loading thumbnail…

Fork of ICE - 7 Pie Chart student dataset

This fork of ICE-7 visualizes student GPA and study-time data from a CSV file as a pie chart rendered in SVG using D3 v5. Each pie slice represents a GPA value, with text labels showing the GPA and a legend mapping slice colors to student time values. The code loads data via `d3.csv`, computes arc paths with `d3.arc()`, and uses `d3.scaleOrdinal` for category coloring. The chart is embedded in a React starter HTML page, with styling applied via CSS classes.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, where the x-axis attribute cycles through petal width, sepal width, petal length, and sepal length every two seconds, while the y-axis remains sepal length. Built as a reusable D3 chart, it uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and circles, and the `join` operator to update marks efficiently. The SVG is sized to the browser window, with data loaded via D3's `csv` function.

Loading thumbnail…

ICE-6 Penguin Dataset scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, plotting flipper length against bill length, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization uses D3 v5 within a React framework, rendering as SVG. It employs `d3.csv` to load the data, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes. Labels are added for both axes and the title, while circle markers use radius 5 and fill colors mapped via a switch function.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & SVG

A horizontal bar chart displays the age of 30 students by school year, using a React component that renders SVG marks. The visualization uses `scaleBand` for the y-axis school-year categories and `scaleLinear` for the x-axis age values, with tick marks and red grid lines generated manually through `xScale.ticks()`. Data loads from a CSV file via `d3.csv`, and React's `useState` and `useEffect` hooks manage the asynchronous data fetching. The bars show age increasing across school years, with the code leveraging `d3.max` and `format` from the D3 v5 library.

Loading thumbnail…

ICE-5-PS

This visualization displays the metadata of an Olympic participants dataset, showing the file size, row count, and column count of a Tokyo Olympics CSV. A large text message presents these figures, while the page background features an Olympics-themed SVG image. The implementation uses D3 v7’s `d3.csv` to load the dataset from a GitHub gist and `d3.csvFormat` to calculate its size in kilobytes. The page is styled with custom CSS, including a hyperlink to the raw dataset and decorative headings.

Loading thumbnail…

This fork is made by me

This example assembles a stylized, asymmetric smiley face from modular React components, with SVG elements placed inside a centralized `<g>` group. The face includes a gradient-filled background circle, a single eye on the left, mismatched eye shapes on the right, a mouth arc, and teeth rendered as a brown arc with vertical black lines. The visualization uses d3.arc to generate the mouth and teeth paths, while all geometry is defined by hardcoded numerical props passed through the `Face` component. The gradient is created with SVG `linearGradient` inside a `<defs>` block.

Loading thumbnail…

Fork of Smiley Task

This example shows a stylized smiley face built with React and rendered as SVG. The face uses red circles for the head and eyes, with white highlights, and a mouth drawn using D3’s `arc` generator. The code defines the mouth arc with specified inner and outer radii and angles, then places all shapes inside a translated SVG group. The visualization demonstrates basic D3 shape generation combined with React’s declarative component structure, using `ReactDOM.render` to mount the app.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face drawn with SVG animates its eyebrows through a repeating D3 transition. Using `d3.select` and `d3.arc`, the code builds concentric circles and an arc-based mouth within a centered group. Eyebrows move via chained `transition().duration()` calls that shift the group’s `transform` attribute, while static eyes and face shapes demonstrate basic DOM manipulation with d3.v5.