M

MahendraGullinkala

@MahendraGullinkala·17 public vizzes

Loading thumbnail…

Mahe Social Network

This example visualizes a small social network of eight individuals, dividing them into two distinct groups. It shows the connections between people as yellow lines, with line thickness proportional to the strength of the relationship. Nodes are rendered as brown rectangles with text labels, and the entire graph is positioned using a force-directed layout that users can interact with by dragging nodes. The visualization uses D3.js v4 and v2 APIs, specifically `d3.layout.force()` for the simulation and `d3.json()` to load the network data from a JSON file.

Loading thumbnail…

Cricket IPL Tree_Chart

This interactive tree chart visualizes the structure of cricket IPL teams, showing the hierarchy from Cricket down to men’s and women’s IPL franchises, and finally to individual player names. The SVG diagram uses d3.layout.tree and d3.svg.diagonal to render the collapsible nodes and links, with click handlers to toggle child visibility. Nodes are drawn as rectangles with a cyan fill and yellow stroke, while animated transitions (500ms duration) reposition elements smoothly using d3’s transition API. The static dataset is hardcoded in the script, and the visualization supports expansion and collapse of branches.

Loading thumbnail…

INDIA MAP

This example renders a choropleth-style SVG map of India using D3 v5 and React. It displays the country’s geographic boundaries as light blue filled paths with black borders. The visualization loads GeoJSON data from a GitHub gist, applies a Mercator projection centered on the subcontinent, and uses `d3.geoPath` to convert geographic coordinates into SVG path data. Although React is included in the page, the map is drawn imperatively with D3’s `d3.select` and `d3.json`, without utilizing React components for rendering.

Loading thumbnail…

"World Map"

This visualization shows a spherical world map rendered with an equal-area natural Earth projection. The code uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and draw country boundaries from TopoJSON data fetched via the world-atlas package. A pink sphere path provides the background globe, while blue land masses with black strokes are appended as SVG paths. The example demonstrates converting TopoJSON to GeoJSON with the `feature` method before binding the data to SVG elements.

Loading thumbnail…

Fork of World Map

This visualization displays a world map using a natural Earth projection, with land masses rendered in a light purple fill on a white spherical background. The example loads GeoJSON data derived from the world-atlas TopoJSON file and uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` for data conversion. A sphere is drawn first to provide the globe’s outline, followed by country paths. The stylesheet defines distinct colors for the sphere, land, and extra strokes, though the latter two are not actively applied in the current code.

Loading thumbnail…

Fork of Europe Map ICE8

A choropleth-style map of India renders each GeoJSON feature as a green SVG path with a blue stroke. Built with React and D3 v5, the visualization applies a Mercator projection, centered at coordinates [43, 42], to the country’s boundary data fetched from a GitHub gist. The `d3.geoPath` generator converts the projection into drawable path data, and the resulting SVG uses a 500×800 viewport. The example demonstrates static map rendering with simple fill and border styling.

Loading thumbnail…

Fork of World Map

This fork of a world map projects countries onto a sphere, showing landmasses in green with black outlines over a light blue ocean. It builds the sphere and countries using D3 v5’s `geoNaturalEarth1` projection and `geoPath`, rendering the result as SVG paths. The data comes from the world-atlas 110m TopoJSON, which is converted to GeoJSON via TopoJSON’s `feature` function before being drawn.

Loading thumbnail…

Ozone AQI Count by Days

This example shows the number of days each ozone AQI category occurred, displayed as a pie chart with a legend listing each category and its day count. The data is loaded from a CSV file via `d3.csv`, then processed into a form suitable for `d3.pie` and rendered as SVG paths using `d3.arc`. The chart uses `d3.scaleOrdinal` with `schemeCategory10` for coloring, and a custom legend built with SVG rectangles and text. The visualization is implemented in React with D3 v5, and the SVG is updated on mouseover to log category counts.

Loading thumbnail…

Sales of Restaurant in USA first 2 quarters

This example shows monthly sales for six months across several US restaurants, with a grouped 3D bar chart where each restaurant has a row of bars for January through June. The visualization uses the d3-x3d library, which bridges D3.js with X3DOM to render WebGL-based 3D scenes directly in the browser. Data is loaded from a CSV file via `d3.csv` and parsed into a multi-series format, then passed to `d3.x3d.chart.barChartMultiSeries()`. The chart uses D3 v5 and relies on the d3-3d plugin for three-dimensional geometry.

Loading thumbnail…

Mahendra Gullinkala Bonus IC

This bar chart visualizes savings growth across age groups, from age 20 to 38, with each bar representing savings in dollars. Built with D3 v5, the visualization renders as an SVG with interactive hover effects that highlight the selected bar and display the difference between that bar and all others. The chart uses D3's scaleBand and scaleLinear for the axes, with animated transitions on mouse enter and leave events to alter bar opacity, position, and width.

Loading thumbnail…

Untitled

A 3D scatter plot displays menu items across four categories—Main Course, Beverages, Desserts, and Appetizers—with each category as a separate trace. The x-axis shows orders count, y-axis shows total sales, and z-axis shows stock availability, using data loaded from a CSV file via `d3.csv`. The code uses Plotly’s `Plotly.newPlot` to render the chart, with markers sized and colored per category. The `unpack` function filters rows by `Menu_Category` to extract the corresponding values for each axis.

Loading thumbnail…

Mahendra Gullinkala Bonus IC

A bar chart displays savings values across age groups from 20 to 38, with animated highlighting on hover. The visualization uses d3.v5 with SVG rendering, employing d3.scaleBand and d3.scaleLinear for axes. Hover interactions trigger transitions that enlarge the selected bar, draw a dashed reference line, and display divergence values between the hovered age and all others. Data comes from a hardcoded sample array, with axis labels and grid lines styled via CSS.

Loading thumbnail…

Untitled

Eight data-driven cubes float in a 3D scatter plot, each colored by category and labeled with a product name. Users drag to rotate the scene. The visualization uses d3-3d to project cube faces, with d3.drag handling interaction and d3.transition animating label value changes from a hard-coded sales dataset.

Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatter plot uses D3 v6 to visualize restaurant menu data, showing Total Sales against Orders Count with points colored by Menu Category. The visualization animates the X-axis, periodically toggling between Orders Count and Stock Availability using setInterval. Built with React-compatible reusable chart components, the example imports scatterPlot.js and the d3 csv, scaleLinear, axisLeft, and axisBottom APIs. SVG circles render with custom colors for Main Course, Beverages, Desserts, and Appetizers, alongside a manually constructed legend and axis labels.

Loading thumbnail…

ICE 7 Pie Chart

This visualization shows the top 10 restaurants by daily Biryani sales as a pie chart, with a legend listing each hotel’s name and its corresponding units sold per day. The data is loaded from a CSV via `d3.csv` and sorted in descending order before rendering. The chart uses `d3.pie` to compute arc angles, `d3.arc` for segment geometry, `d3.scaleOrdinal` with `schemeCategory10` for colors, and SVG paths for drawing. Hovering over a segment logs its sales value to the console, while the legend is built with appended `rect` and `text` elements.

Loading thumbnail…

ICE7 Area Chart

This area chart shows the total number of restaurants in the USA over time, with temperature data from San Francisco in the underlying source. The visualization uses D3 v5 to render an SVG, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis` to create a smooth filled path. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and data is loaded via `d3.csv` from a GitHub gist. The chart includes a red title and purple axis labels.

Loading thumbnail…

IC 7 Line Graph

This line chart displays the count of restaurants per year, using a smooth curved line to emphasize trends over time. The visualization is built with D3 v5, employing `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate an SVG path. Data is loaded from a CSV file via `d3.csv` and rendered with a green, thick stroke. The chart includes labeled axes and a title, with gridlines and margins styled for clarity.