Manohar Kowthavarapu

Fork of ICE-8: Social Network

This example displays a small social network of six named individuals organized into three groups, with weighted links connecting them. It uses a force-directed layout created with `d3.layout.force` (from D3 v4), rendering nodes as blue circles and links as black lines whose stroke-width reflects each connection’s weight. Node labels appear in red text, and the graph is drawn as an SVG element sized 950 by 500 pixels. The data comes from a local `data.json` file containing nodes and links with weight attributes.

react first level drilldown map using zoom

A choropleth map of India supports drill-down navigation by clicking a state to zoom into its district boundaries. Clicking a district returns the view to the national level. The React component uses `d3.geoMercator` and `d3.geoPath` to project TopoJSON features from two remote datasets (state and district boundaries), rendering them as SVG paths with `d3.zoom` and `d3.zoomIdentity` to animate the zoom transition to each clicked feature’s bounding box.

ICE8 - World Map

This example displays a world map using a Natural Earth projection, with countries rendered as filled green SVG paths outlined in black. The visualization loads country boundary data from the world-atlas JSON dataset and projects it onto a blue sphere background. The code initializes a D3 geo path generator with the `geoNaturalEarth1` projection and uses the `topojson` feature function to parse the GeoJSON data. Countries are drawn by passing each feature to the D3 `geoPath` generator, which constructs the appropriate SVG path data.

Fork of ICE8 - World Map

This example displays a static world map rendered as an SVG, using a light blue sphere background and pale green country polygons outlined with semi-transparent black strokes. It loads a TopoJSON dataset of 110-meter resolution country boundaries from the `world-atlas` package, converts it to GeoJSON features with the `topojson` library, and projects them using D3’s `geoNaturalEarth1` projection and `geoPath` generator. The map is drawn entirely client-side via D3 v5, with no interaction or animation.

ICE_8_2

This interactive visualization presents a hierarchical tree diagram of the animal kingdom, branching from "Animals" into "Vertebrates" and "Invertebrates" and further into specific classes like "Mammals" or "Insects." Built with React and D3.js (v3.5.17), the static SVG displays colored nodes per taxonomic level and uses `d3.layout.tree` and `d3.svg.diagonal` to render curved links between parent and child nodes. The JSON data structure encodes each species' parent, type, and level for node styling.

ICE-8 INDIA

This visualization displays a zoomable map of India with its states and districts, using a Mercator projection centered on the country. The map renders district boundaries as colored paths with hover tooltips revealing district and state names, while state outlines appear as distinct boundaries. Built with React and D3, the code uses `geoMercator`, `geoPath`, and `scaleOrdinal` to handle projection and coloring, with TopoJSON data from the datameet and deldersveld repositories. The SVG also includes zoom functionality through D3’s zoom behavior.

Fork of Choropleth Map Argentina Dptos Corona (Topojson)

This choropleth map displays COVID-19 cases per department across Argentina, coloring each administrative region on a log scale from purple to light yellow. The visualization uses a Transverse Mercator projection via d3.geoTransverseMercator and renders paths with d3.geoPath in SVG. Interaction includes zooming via d3.zoom and hover effects that change fill color. A legend shows the logarithmic color gradient with a custom axis using d3.axisRight, while the data originates from a TopoJSON file of Argentine departments with case counts. The map also includes a rotated projection centered on the country.

Apr 13, 2023

ICE8 11554625

This visualization displays a map of Indian states, rendered as an SVG using a Mercator projection centered on Europe. The code employs React for the page structure while D3.js v5 handles the geographic rendering. It loads TopoJSON data from a GitHub repository, converts it to GeoJSON via the topojson library, and draws each state boundary as a white-filled path with grey strokes. The `d3.geoPath` generator applies the projection to transform geographic coordinates into screen positions.

Apr 13, 2023

Interactive Bar Chart Bonus ICE

An interactive bar chart displays sales percentages for ten video game genres, from Racing at 78.9% to Misc at 59.6%. Built with D3.js v5, the SVG chart uses a custom `d3.scaleBand` and `d3.scaleLinear` for axes. Hovering a bar triggers a transition that dims and expands the bar, adds a dashed limit line at the hovered value, and annotates each bar with its percentage difference from the selected genre, using `d3.select` and `.attr('opacity')`. The data is a sample of the Video Game Sales Dataset.

Apr 6, 2023

3d Scatter plot Bonus ICE

This 3D scatter plot visualizes video game sales data from a CSV file, plotting year, global sales, and publisher for one trace, and year, other sales, and publisher for a second trace. Built with Plotly’s `scatter3d` trace type and `Plotly.newPlot`, the visualization uses D3.js’s `d3.csv` to load the data and the `unpack` function to extract columns. Markers are styled with size, opacity, and line properties, rendered in an interactive 3D space within a single div.

Apr 6, 2023

Bonus ICE 11554625

This example visualizes COVID-19 case counts for multiple countries across the years 2019–2023 as a multi-series 3D bar chart. It renders the data using the d3-x3d library, which combines D3.js v5 with X3DOM for WebGL-based 3D graphics. The visualization reads CSV data from a GitHub gist, parses it with `d3.csv`, and binds it to the chart via the `datum()` method. The chart is displayed inside an HTML div with styling, allowing interactive rotation and exploration of the three-dimensional bars representing case numbers.

Apr 5, 2023

Untitled

A grid of 3D cubes with varying heights is rendered using the d3-3d library, with each cube colored and labeled by its height value. Users can drag to rotate the entire scene, which updates the cube positions, faces, and text labels in real time. The visualization uses d3._3d() for 3D projection, d3.drag() for interaction, and SVG transitions for smooth animations, with data generated procedurally via d3.randomUniform.

Bar chart with D3.js

This bar chart displays the most loved programming languages of 2018, based on Stack Overflow survey data. The visualization uses D3.js v5 within a React framework, rendering an SVG with animated transitions. Hovering over a bar highlights it and displays percentage divergences relative to the hovered language, while a horizontal reference line marks its value. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and D3’s transition methods to animate bar emphasis and opacity changes on mouseenter and mouseleave events.

Fork of ICE-7 Assignment

This animated scatter plot visualizes the Iris dataset, cycling through four different feature pairs on the x-axis while mapping petal width to the y-axis. Each data point is colored by species (setosa, versicolor, virginica), with a legend and axis labels updating dynamically. The visualization uses D3.js v6, leveraging `scaleLinear`, `axisLeft`, `axisBottom`, `csv`, and `select`, with a reusable `scatterPlot` module following the Towards Reusable Charts pattern. Circles are rendered via SVG, and a `setInterval` drives the animation, switching columns and updating the plot every few seconds.

Area Chart ICE-7

This area chart visualizes the number of museum visitors in lakhs per year, with the title "Death By stroke" and clearly labeled axes. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with a `curveBasis` smoother. It loads CSV data from a GitHub gist containing the museum visitor dataset. The SVG output uses an orange fill for the area path, and custom styling for the title and axis labels.

Line Chart ICE-7

This line chart displays the number of museum visitors in Lakhs per year, with time on the x-axis and visitor counts on the y-axis, based on CSV data from Data Canvas - Sense Your City. The visualization uses D3 v5 to load and parse the data, then applies `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator with `curveBasis` to create the smoothed orange path. The SVG rendering includes axis labels and a title, with data sourced from a GitHub gist.

Pie Chart ICE-7

This example visualizes the top 10 best-selling video game genres by global sales using a pie chart. Each slice represents a genre, with a legend listing genre names and total sales in dollars. The chart is rendered as SVG within a React application, using D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal` for color mapping. Data is loaded via `csv()` from a GitHub gist, sorted by global sales, and the top 10 entries are displayed.

Fork of ICE-7 Assignment Venkata Rajashekar Reddy

This animated scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis variable every two seconds, while sepal length remains fixed on the y-axis. Each data point is color-coded by species (setosa, versicolor, or virginica) using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and circles. The visualization uses D3 v6 with an SVG rendering and updates the plot in-place via `setInterval` and a custom `scatterPlot` module, drawing from a remote CSV dataset.

ICE-6 Scatter Plot 11554625

This scatter plot visualizes video game sales data from a CSV file, plotting North American sales on the x-axis against release year on the y-axis. Each circle represents a game, colored by genre using a custom `marker` function that maps genre names to specific colors (blue, yellow, or red). The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for rendering scales. The SVG rendering fills the full browser window with a heading and styled tick labels.

Mar 23, 2023

Scatter Chart Example

This scatter chart plots North American video game sales against European sales, with each point representing a video game title. The chart uses dark blue, semi-transparent markers to visualize the relationship between the two regional markets. Built with Plotly's JavaScript library, the visualization loads data from a CSV file containing video game sales figures, then extracts the NA_Sales and EU_Sales columns to create the scatter plot. The chart includes labeled axes and a title, with the Plotly.newPlot function handling the rendering.

Mar 23, 2023

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

A colorful Buddhist figure emerges from layered, semi-transparent ellipses generated by nested loops in React, each with random radius, position, and RGB fill. The Buddha silhouette itself is drawn with a long SVG path, scaled and translated over the chaotic ellipse background. The code uses React and ReactDOM to render SVG elements in the browser, with randomness applied via `Math.random()` for both the ellipse geometry and color values.

Mar 9, 2023