Kovvuri Supraj

@kovvurisupraj·15 public vizzes

ICE-8(11630234)

A force-directed network diagram visualizes seven named nodes connected by weighted links, with groups indicated by node clusters. The nodes are rendered as white circles with red outlines and violet-labeled text on a light yellow background. Using d3.layout.force from D3 v4, the simulation applies gravity, charge, and distance constraints, while link thickness reflects the `weight` value from the loaded graphFile.json. Nodes are draggable, and the tick event updates line and transform attributes as positions change.

Apr 10, 2023

Loading thumbnail…

ICE-8(11630234)

This interactive D3.js tree diagram displays a manually defined family hierarchy, with clickable nodes that collapse or expand their child branches. The visualization uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for the connecting links, with smooth transitions between layout states. Node circles are colored red by default or lightsteelblue when collapsed, and text labels show names. The SVG rendering includes animated enter, update, and exit transitions driven by click events that toggle a node’s `children` and `_children` properties. The code loads D3 v3.5.17 from a CDN.

Apr 5, 2023

Loading thumbnail…

ICE-8(11630234)

This visualization displays a world map using an orthographic projection, with country boundaries rendered as SVG paths. Users can click on any country to switch projections: clicking the United States switches to a Mercator projection, while clicking any other country returns to the orthographic view. The map supports dragging to rotate the globe and zooming via `d3.drag` and `d3.zoom`. Data is loaded from the World Atlas TopoJSON files, with country names mapped from TSV data. The code uses `d3.geoPath`, `d3.geoOrthographic`, `d3.geoMercator`, and `d3.geoGraticule`.

Apr 5, 2023

Loading thumbnail…

ICE-8(11630234)

This example displays an interactive world map using an equirectangular projection, with countries rendered in green and a blue ocean sphere. The map loads geographic data from a world-atlas TopoJSON file and visualizes it as SVG paths. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` for projection and path generation, and TopoJSON's `feature` method to convert the data into GeoJSON features. Hovering over a country highlights it in red via CSS.

Apr 4, 2023

Loading thumbnail…

ICE-7 (11630234)

This visualization displays a scatter plot of the Iris dataset, mapping petal width against sepal length. The plot uses distinct symbols and colors (orange, purple, and grey) to differentiate the three plant species. The D3.js library (v6.7.0) constructs the chart, employing functions like `scaleLinear`, `extent`, `axisLeft`, and `symbol` to generate axes and data points. The SVG output is dynamically sized to fit the browser window and includes labeled axes and a bold title.

Mar 25, 2023

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes the change in house prices over time, with cost on the y-axis and year on the x-axis. The chart uses a smooth line and a filled area beneath it to emphasize the price trend. The SVG rendering is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, and `area` and `line` generators with `curveBasis` to create the smoothed path. Data is loaded from a CSV file into the chart.

Mar 24, 2023

Loading thumbnail…

ICE-7

This visualization shows the change in house prices over time, plotting yearly data points connected by a line to reveal the overall price trend. Using D3 v5, the code imports specific modules like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart. Data is loaded from an external CSV file, with cost values converted to numbers and years to JavaScript Date objects. The SVG output includes labeled axes with gridlines, a rotated y-axis label, and a bold title, all styled through external CSS.

Mar 24, 2023

Loading thumbnail…

ICE-7

This pie chart visualizes the duration distribution of the top ten most streamed songs on Spotify. It displays each song as a colored slice, with a legend to the right showing the song name and its percentage of total duration. The visualization is built with D3 v5, using the `pie`, `arc`, and `scaleOrdinal` APIs to compute and draw the chart from a CSV file. The data is loaded asynchronously from a GitHub Gist, and the chart is rendered in SVG.

Mar 24, 2023

Loading thumbnail…

ICE-6(11630234)- Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Archipelago penguin dataset, plotting flipper length against body mass for three penguin species, with each species distinguished by a distinct color. The visualization is built using D3 v5 and renders to an SVG canvas, leveraging `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map the data. Additional attributes like bill length and bill depth are stored on each circle, though not displayed, and the plot includes axis labels and a title.

Mar 9, 2023

Loading thumbnail…

Fork of Data Visualization - ICE-6 Scatter Plot Graph

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (yellow, blue, or red). Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG axes and circles for data marks. The code maps data fields to circle positions and radii through `rx` and `ry` attributes, presenting the flower measurements in a clean, full-window display.

Mar 9, 2023

Loading thumbnail…

ICE-6(11630234)

A horizontal bar chart displays the top 15 streamed Spotify songs by duration, loading data from a CSV file via `d3.csv`. The React app uses `useState` and `useEffect` to fetch and slice the dataset, then renders SVG rectangles with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axis ticks are drawn manually with SVG lines and text, while the chart is styled against a grey background.

Mar 9, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart rendered with React and D3 v5. The code uses `scaleBand` and `scaleLinear` to map country names and costs to SVG coordinates, with blue axis ticks and labeled bars showing each nation’s pricing. Data loads from a CSV file via `d3.csv`, while React hooks (`useState`, `useEffect`) manage the asynchronous fetch and re-render the SVG marks.

Mar 9, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example uses React with D3 v5 to render a horizontal bar chart showing the basic cost of Netflix in different countries. The code loads CSV data from a gist URL, processes the values with D3’s `csv` function, and displays the top 15 countries. It employs D3’s `scaleBand` and `scaleLinear` to map countries and costs, while custom React components generate SVG rectangles and axis tick labels. The visualization updates state asynchronously via React’s `useEffect` and `useState` hooks, with axes and gridlines drawn through D3’s `ticks` and imported axis functions.

Mar 9, 2023

Loading thumbnail…

ICE-5

This visualization presents a dataset of the top 100 songs on Spotify, displaying its column and row counts on a black backdrop with a custom background image. The page uses D3 v7 to fetch the CSV file from a GitHub gist via the `d3.csv` method, then passes the parsed data to a custom JavaScript function called `datalength`. This function programmatically updates the text content of a `<pre>` element, summarizing the dataset's dimensions. The presentation relies on standard HTML elements styled with CSS, including hyperlinks for data access and centered headings for context.

Feb 28, 2023

Loading thumbnail…

ICE-4 (11630234)

This example shows a stylized face rendered with red circular head, eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down through a two-stage transition sequence. The visualization uses D3 v7 to draw SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and arc-generated paths for the right eyebrow and mouth. The code applies D3 transitions to animate the eyebrow group’s vertical position over two seconds.

Feb 24, 2023