S

sreepavanKothapalli

@sreepavanKothapalli·30 public vizzes

Loading thumbnail…

Fork of ICE-8: Social Network

This social network visualization displays seven people in a two-tier graph layout, with links connecting a central node ("Sree Pavan") to several others and a few secondary connections, using red lines of varying thickness based on link weight. The hand-coded HTML and SVG draw circles for people and labels for names, positioned by a force-directed layout that applies gravity, charge, and distance parameters to arrange the nodes. The code relies on the d3.force library for the layout and d3's JSON loader to pull the node and link data from data.json.

Loading thumbnail…

Tree Map

This example presents an interactive family tree diagram rendered with SVG and animated transitions. The visualization uses D3.js’s `d3.layout.tree` to compute hierarchical node positions and `d3.svg.diagonal` to draw curved links between generations. Nodes appear as red circles with blue outlines, labeled with names, and users can click any node to collapse or expand its children. The tree’s layout normalizes horizontal spacing by depth, while entering and exiting elements animate smoothly via `transition` methods over a 750-millisecond duration. The data is a hardcoded array representing three generations of a family lineage.

Loading thumbnail…

England Regional Map

This example displays a map of England with its geographical regions highlighted in green and internal boundaries in yellow. Built with React and D3 v7, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render TopoJSON features. The data is loaded from a GitHub gist via `d3.json` and processed with the `topojson` library’s `feature` and `mesh` functions. The visualization renders as an SVG, with the `Marks` component generating styled path elements for each region and interior border.

Loading thumbnail…

World Map

This world map visualization displays countries across the globe, rendered as light green polygons with thin black outlines, set against a blue sphere. The map uses D3’s geo projection and path generation, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to draw the geographic boundaries. Country data comes from the world-atlas TopoJSON dataset, which is fetched and processed using the TopoJSON library’s `feature` function. The visualization relies on D3 version 5 and outputs an SVG graphic, with styling applied via CSS.

Loading thumbnail…

Fork of react first level drilldown map using zoom

This example shows a drill-down map of Indian states and districts. Clicking a state zooms in to reveal its districts, while clicking a district zooms to that region. The visualization uses React to manage state for the selected area and D3 v6 for rendering. It employs `d3.geoMercator` and `d3.geoPath` to draw boundaries from TopoJSON files, with `d3.zoom` and `d3.zoomIdentity` handling the animated transitions. The map targets a bounding box using `pathGenerator.bounds`, scaling and translating the view accordingly.

Loading thumbnail…

Fork of India Map

This interactive map of India displays state and district boundaries, with each district colored by its state using a categorical color scale. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON features for both administrative levels, and d3.zoom to enable panning and zooming. Hovering over a district reveals a tooltip with its name and state; the code also attempts to label states with text positioned via path centroids, though that feature is incomplete.

Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map displays India’s states and districts, with district boundaries colored by state and hover tooltips revealing district names. Users can pan and zoom via `d3.zoom`. The visualization uses `d3.geoPath` to render TopoJSON data from two sources: india-states.json and india-districts-2019-734.json. District fills are assigned using `d3.scaleOrdinal` with `schemeCategory10`, while the Mercator projection is centered on India.

Loading thumbnail…

Fork of Europe Map ICE8

This example displays a static map of Europe rendered as green-filled SVG paths with black borders. It uses D3 v5’s `d3.json` to load a GeoJSON file from a GitHub gist, then applies a Mercator projection via `d3.geoMercator` centered on Europe and generates path data with `d3.geoPath`. The visualization is built with React 16.9, though the code appends the SVG directly to the DOM rather than using React’s virtual DOM. Topojson is linked in the HTML but not utilized in the script.

Loading thumbnail…

Fork of World_Map_ICE_8

This example displays a world map rendered as an SVG using the Natural Earth projection. The visualization shows landmasses in a purple fill with red country borders and blue graticule lines over a white sphere, all generated with d3.geoPath. The code loads geographic data from a TopoJSON world atlas using d3.json and processes it with topojson.feature and topojson.mesh. React manages the component state through hooks, while the Marks component structures the SVG paths for each geographic layer.

Loading thumbnail…

Fork of ICE-8 USA Country Map

This fork of the ICE-8 example displays a map of the United States with state boundaries, rendered as SVG paths inside a React component. The visualization uses d3.geoPath and d3.geoAlbers to project and draw the map, while d3.geoGraticule adds a graticule overlay. Land and interior borders are styled via CSS classes, and the map data is loaded from the US Atlas TopoJSON dataset using the topojson library's feature and mesh functions.

Loading thumbnail…

Fork of World_Map_ICE_8

This example displays a world map rendered as an SVG using the Natural Earth projection. The visualization shows landmasses in a purple fill with red country borders and blue graticule lines over a white sphere, all generated with d3.geoPath. The code loads geographic data from a TopoJSON world atlas using d3.json and processes it with topojson.feature and topojson.mesh. React manages the component state through hooks, while the Marks component structures the SVG paths for each geographic layer.

Loading thumbnail…

Fork of Pie Chart

This visualization shows the distribution of gender categories in a heart disease dataset using a pie chart. It displays two slices representing male and female counts, with a legend showing each category and its frequency. The chart is rendered as an SVG using D3 v7, with d3.rollup to aggregate counts, d3.arc for slice geometry, and d3.pie for layout. A d3.scaleOrdinal with d3.schemeCategory10 assigns colors, while Bootstrap provides page styling. Data is loaded from a CSV file via d3.csv.

Loading thumbnail…

Fork of 3D Scatter plot graph

This 3D scatter plot visualizes sports data from a CSV file, comparing Game Names, Year, and Sales figures. It presents two distinct data series using different markers and colors: one for Other_Sales and another for Japan_Sales. The visualization is built using the Plotly.js library within a React application, leveraging D3.js to fetch and parse the CSV data from a remote GitHub gist, then rendering the interactive 3D chart into a designated HTML div.

Loading thumbnail…

Fork of 3D Scatter Plot

This fork of a 3D scatter plot visualizes sleep metrics from a CSV dataset, plotting sleep duration, sleep efficiency, and deep sleep percentage as points in three-dimensional space using the Plotly.js library (specifically the `Plotly.newPlot` API). Two overlapping marker traces render the same data with differing color schemes, line styles, and opacities, creating a contrast between highlighted and muted points. The visualization loads its data via `d3.csv` from a remote GitHub Gist and embeds the chart in a simple HTML page with a zero-margin layout, focusing purely on the interactive 3D representation.

Loading thumbnail…

Untitled

This example shows an interactive 3D scatter plot rendered as a draggable box, where each point is defined by x, y, and z coordinates within a 0–10 range. Users can click and drag the plot area to rotate the chart in space, inspecting the distribution of data from different angles. The visualization uses the Highcharts library, specifically the `scatter3d` chart type with the `highcharts-3d.js` module, and adds radial gradients to points for a three-dimensional feel. Rotation is implemented through custom mouse and touch event handlers that update the chart’s `alpha` and `beta` rotation angles via `chart.update()`.

Loading thumbnail…

3D Bar Chart using D3.js

This example displays a 3D multi-series bar chart of car manufacturer sales data across six months, rendered through the X3DOM library for WebGL-based 3D scenes. The visualization uses d3-x3d and d3-3d to map CSV data parsed with d3.csv into three-dimensional bars, with D3 scales and axes handling the categorical and quantitative dimensions. The chart is presented in a React-compatible setup, though the core rendering relies on D3 v5 selections and the x3dom-full.js runtime.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example presents six months of car manufacturing data for several manufacturers as a 3D multi-series bar chart. The visualization renders interactive 3D bars within an HTML page using the D3.js charting library in conjunction with the X3DOM framework and the d3-x3d adapter, which handles the 3D scene. Data is loaded from a remote CSV file via `d3.csv`, parsed into a structure with manufacturer and monthly values, and then passed to the `d3.x3d.chart.barChartMultiSeries` component for display.

Loading thumbnail…

3D Scatter Plot

This 3D Scatter Plot visualizes the Iris dataset, plotting sepal length, sepal width, and petal length in one trace, and sepal length, sepal width, and petal width in another, using Plotly's `scatter3d` trace type. The markers are styled with size, opacity, and line properties, and rendered inside a `myDiv` container. The code loads data via `d3.csv` from a GitHub gist and creates the plot with `Plotly.newPlot`, using the Plotly CDN and D3 v3. The layout margins are set to zero for a full-bleed view.

Loading thumbnail…

Fork of 3D Scatter Plot

This example visualizes the Iris dataset in a 3D scatter plot, comparing sepal and petal measurements across two marker groups. The first trace plots sepal length, sepal width, and petal length, while the second trace uses petal width instead, with distinct marker styling and opacity. Built with Plotly.js via `Plotly.newPlot`, the code loads the CSV data using `d3.csv` and organizes columns into x, y, and z coordinates. The layout removes all margins to maximize the plotting area, and the chart renders inside a designated `div` element.

Loading thumbnail…

Fork of 3D Scatter Plot

This visualization displays the Iris dataset as a 3D scatter plot, comparing sepal and petal measurements across different species. The first trace uses petal length as the z-axis with a colormap, while the second uses petal width, both with semi-transparent markers. The code loads the CSV data using `d3.csv`, parses it with custom `unpack` functions, and renders the plot using Plotly's `Plotly.newPlot` API with `scatter3d` traces. The layout removes all margins for a clean presentation.

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes supermarket sales data as an interactive 3D bar chart, with each bar representing a city across multiple months. The visualization uses D3.js v5 for data loading and layout, combined with the d3-3d library to extrude bars into three dimensions, and X3DOM for WebGL rendering of the 3D scene. Sales figures are parsed from a CSV file via `d3.csv`, and the chart is created using `d3.x3d.chart.barChartMultiSeries()`, which manages axes and bar positioning in 3D space. The rendering approach leverages the d3-x3d bridge to convert D3 selections into X3D DOM elements for real-time interactivity.

Loading thumbnail…

ICE 7 Pie chart

This pie chart displays the top 10 countries by population in 2022, with each slice labeled with its population value and accompanied by a legend showing the country name and corresponding figure. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to compute slice geometries and assign colors from a hardcoded array. Data is loaded asynchronously from a CSV source via D3’s `csv` method. The chart is rendered as SVG, with a centered title and a legend offset to the right, both styled inline.

Loading thumbnail…

ICE 7 Area Chart

The visualization displays supermarket sales in India over time, combining a smooth line chart with a shaded area beneath it to emphasize trends. It uses d3.csv to load and parse the dataset, with d3.scaleTime and d3.scaleLinear mapping years and sales values to SVG coordinates. The line and area paths are generated via d3.line and d3.area with curveBasis interpolation, while d3.axisBottom and d3.axisLeft render labeled axes with formatted tick values.

Loading thumbnail…

Line Chart

This line chart displays US auto sales from 2005 to 2022, with the year on the x-axis and sales on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data, while d3.axisBottom and d3.axisLeft generate labeled axes with gridlines. A d3.line generator creates the red trend line, rendered as an SVG path. Data is loaded from a CSV file using d3.csv, with dates parsed via the Date constructor and sales values converted to numbers.

Loading thumbnail…

Fork of ICE 7 Pie chart

This pie chart visualizes the top 10 countries by population in 2022. Each slice is labeled with its population value, and a corresponding legend identifies each country with a color-coded square and its population figure. The visualization uses D3.js v5, leveraging the `pie`, `arc`, and `scaleOrdinal` APIs to generate the chart, with data fetched from a CSV file via `d3.csv`. SVG is used for rendering, and the layout includes a custom legend positioned to the right of the pie.

Loading thumbnail…

Fork of ICE 7 Pie chart

This visualization shows the top 10 countries by population in 2022 as a pie chart, with each slice labeled with its population value and a corresponding color-coded legend listing country names and values. Using D3 v5, the code fetches CSV data via `d3.csv`, converts it with `d3.pie`, and renders SVG paths with `d3.arc` and `scaleOrdinal` for slice colors. Text labels and legend items are appended dynamically, while the chart is centered within an SVG canvas.

Loading thumbnail…

Fork of Pie Chart

This visualization displays the basic cost of Netflix subscriptions across ten countries, using a pie chart with an accompanying legend that lists each country, its color-coded square, and its cost in dollars. The chart is rendered with D3 v5 in an SVG, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `d3.csv` to load data from a GitHub gist. The data is sorted in descending order before rendering.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length for individual flower specimens. The code uses d3.scaleLinear for the x and y axes, d3.axisLeft, and d3.axisBottom for the chart's frame. Each species is represented by a distinct symbol, drawn via d3.symbol and d3.symbols, with the symbol type selected through a d3.scaleOrdinal mapping species values to available symbols. The visualization is rendered as an SVG using a reusable scatterPlot function that accepts width, height, data, margin, and size as configurable parameters, with the final output fitted to the window dimensions.

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot, showing the relationship between petal length and petal width. Each circle represents a flower, colored by its species (blue, grey, or brown) using a custom marker function. The code loads CSV data with D3’s `csv` method, scales values with `scaleLinear` and `extent`, and renders axes via `axisLeft` and `axisBottom`. Circles are appended to an SVG using `select`, `data`, and `join`, with styling applied through `attr` properties.

Loading thumbnail…

Fork of ICE-6

This is a bar chart of supermarket sales data, showing the unit price for the first ten product lines from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles for each bar. Data is loaded asynchronously via `d3.csv` and limited to ten entries before being displayed. The chart includes custom axes with gridlines and labels, all rendered as SVG elements within a React component.