Surikanti Swathi

@Swathireddy05·22 public vizzes

fork of Country Map

This fork of the Country Map example visualizes the borders of Chad as a standalone SVG map. It loads world country boundaries from a TopoJSON file via `d3.json`, extracts Chad’s geometry using `topojson.feature`, and fits a `d3.geoMercator` projection with `fitSize` to the 960×500 viewport. A single path element is drawn with `d3.geoPath`, using SVG for rendering. No additional styling or interaction is applied beyond the default black fill and stroke.

Apr 13, 2023

Loading thumbnail…

World_Map

This example displays a world map using the Natural Earth projection, rendered with SVG paths. It visualizes landmasses in beige, ocean in blue, and includes graticule lines and country borders in contrasting colors. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic data loaded from the world-atlas TopoJSON dataset, with `topojson.feature` and `topojson.mesh` extracting land and interior boundaries. The map is built as a React component, with marks drawn using D3 v5.

Apr 13, 2023

Loading thumbnail…

ICE8-Animal tree

This interactive visualization presents a hierarchical tree of the animal kingdom, from the root "Animal Kingdom" down through categories like Reptile and Mammal to specific species such as Lizard and Horse. Using the D3.js v3 library, it renders the data as an animated, zoomable SVG diagram with color-coded nodes and labeled links. The tree structure is defined in a JSON file, and the implementation leverages D3’s tree layout, SVG rendering, and a custom zoom/drag behavior to explore the classification.

Apr 13, 2023

Loading thumbnail…

Networks

This visualization displays a small social network of nine named individuals organized into five groups, with weighted connections represented by lines whose thickness scales with link weight. Using D3.js v4 and a force-directed layout, nodes are rendered as blue circles with red name labels and are draggable. The code employs `d3.layout.force` for simulation, with gravity, charge, and distance parameters, and loads node and link data from an external `graph.json` file. The SVG output includes dynamic positioning updated on each tick event.

Apr 13, 2023

Loading thumbnail…

Fork of D3 Starter

A simple D3 starter example displays the text "visualization assignment" centered on the page at a very large font size. The page loads D3 v7 from a CDN and uses the `select` API on the body element to set its text content. The data source is a local `datasets.csv` file, though the visualization does not currently read or render any data from it, serving purely as a minimal template for learning D3 fundamentals.

Apr 7, 2023

Loading thumbnail…

Fork of Fork of Largest Population in the USA

This visualization displays the population of U.S. cities in 2020 through a bar chart, with each bar representing a city and its height indicating the population count. The chart also encodes the region of each city using color, and tooltips reveal the specific city name, region, and population value. Built with React and D3.js (v5), the visualization uses the vega-lite-api to construct the bar mark, applying a groupby transform on country and year_2000 fields. The data comes from a CSV file sourced from World Population Review, loaded via d3.csv.

Apr 7, 2023

Loading thumbnail…

Fork of poverty in counties by React and d3

This choropleth map visualizes PM2.5 concentration across U.S. counties from 2000 to 2020, with an animated slider that plays through years. React manages the UI state while d3.geoPath renders county and state boundaries from the US Atlas TopoJSON. A sequential d3.scaleSequential with interpolateYlGnBu colors each county by its yearly value, with a linear gradient legend showing the 0–19 scale. Hovering reveals county names and concentration values via SVG title elements, and missing data appears grey.

Apr 7, 2023

Loading thumbnail…

Fork of line graph group-4

This visualization displays inflation rates for 12 countries using a violet line on an SVG chart, with the x-axis showing country names and the y-axis showing inflation values. The chart loads data from a CSV file and renders axes, grid lines, and a thick 6-pixel line using d3.scaleBand, d3.scaleLinear, d3.line, and d3.axisLeft. A blue axis label pair marks the axes as “country” and “inflation,” while text elements position the labels on the chart. The code applies a modified stylesheet that increases font sizes for axis text.

Apr 7, 2023

Loading thumbnail…

Fork of Line Chart Group-4

This visualization shows poverty inflation trends across countries as a line chart. A single red line maps inflation values over time, with the country name on the x-axis and inflation on the y-axis. The code uses D3 v5 functions like `d3.select` to render an SVG, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` to generate the path. Data is loaded from a CSV file via `d3.csv`, with the inflation column converted to numeric values.

Apr 7, 2023

Loading thumbnail…

Group-4 Project

This interactive dashboard visualizes CDC flu-like illness data, allowing users to explore average ILI percentages across U.S. states through a choropleth map, a bar chart of top-ranked states, and a multi-year line chart. Built with React and D3, it uses `d3.scaleOrdinal` for categorical color assignments, `d3.geoAlbersUsa` with `d3.geoPath` for the map, and `d3.curveCardinal` for smoothed trends. Hovering or selecting a year updates the map and bar chart, while clicking a state highlights its data across all views.

Apr 7, 2023

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart visualizes patient mortality across seven causes of death—ranging from heart disease to malaria—for India, Pakistan, and the United States between 1990 and 2022. The visualization uses the Highcharts library with its `highcharts-3d.js` extension, configuring options like `alpha`, `beta`, and `viewDistance` to create a tilted, perspective view. Each country’s data is rendered as a separate series with stacked columns, plotted against categorical x-axis labels and a y-axis measuring total death cases. The chart’s depth settings and `groupZPadding` enhance the three-dimensional separation of the grouped bars.

Apr 6, 2023

Loading thumbnail…

Fork of Bonus ICE Scatter plot using D3.js

This example visualizes heart patient statistics across countries using an interactive 3D scatter plot. It displays two traces: death cases in red and active cases in blue, plotted against country name and patient category. The visualization uses Plotly.js within an HTML page, loading data from a CSV file via D3.js’s `d3.csv` function. D3’s `unpack` helper extracts columns for the x, y, and z axes, while Plotly’s `newPlot` renders the scatter3d chart with custom marker styling and opacity.

Apr 5, 2023

Loading thumbnail…

Untitled

This 3D scatter plot visualizes population data from a CSV file loaded via D3.js, displaying two distinct series as clusters of points in three-dimensional space. The first trace uses default Plotly coloring while the second employs gray markers with circular symbols, both featuring semi-transparent points with thin outline strokes. Built with Plotly.js's `scatter3d` type and `Plotly.newPlot`, the visualization renders into a single div element with zero margins, allowing the data to fill the entire viewport. The data is fetched using D3's `d3.csv` method and mapped through a custom `unpack` function to extract x, y, and z coordinates from the dataset.

Apr 3, 2023

Loading thumbnail…

Heart Disease Population

The visualization tracks the highest-populated country of heart disease patients from 2000 to 2016, showing how the leading country changes annually. It renders an area chart with a smooth curve, using blue lines and skyblue fills, with red tick labels and violet axis labels. The code uses D3 v5 APIs including `scaleLinear`, `line`, `area`, `curveBasis`, `axisLeft`, and `axisBottom` to generate the SVG. Data comes from a CSV file loaded via `csv`, with population and year values parsed as numbers before rendering.

Mar 30, 2023

Loading thumbnail…

Piechart ICE7

This pie chart displays the number of heart disease-related deaths across various countries from 1990 to 2022. Using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions, the visualization renders SVG paths with country-specific color segments, value labels, and a legend. The data is fetched from a raw GitHub CSV file via `d3.csv`, and the chart’s layout is positioned manually with SVG transformations. Interactions are minimal, focusing on static representation of the dataset.

Mar 30, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through different x-axis variables from the Iris dataset, allowing viewers to compare petal width, sepal width, petal length, and sepal length against a fixed y-axis of sepal length. Data points are color-coded by species (setosa, versicolor, virginica) with a custom legend. The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll().join()` for SVG circle rendering. A `setInterval` timer updates the x-value accessor, and `scatterPlot` encapsulates the reusable chart logic.

Mar 30, 2023

Loading thumbnail…

Heart Disease Population

This line chart shows the highest populated country of heart disease patients from 2000 to 2016, with each point representing a different country. The visualization uses a violet stroke to trace population trends across eight biennial data points, with labeled axes for year and population. Built with D3 v7, the code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. The data originates from a CSV file, and the chart is rendered as an SVG element within a styled HTML page.

Mar 29, 2023

Loading thumbnail…

Fork of ICE-6 Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, showing petal length on the x-axis and petal width on the y-axis. Each point represents a flower specimen, with its color mapped to species, though all three species are rendered in black. The code loads CSV data via `d3.csv`, scales the positions with `d3.scaleLinear`, and renders circles as SVG elements using `selectAll` and `join`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and labels are added as SVG text elements. The plot uses a full-window SVG canvas with specified margins.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of ICE-6: task 1

This bar chart displays the 2020 population of heart patients for ten countries, sourced from a CSV file. Built with React and D3 v5, it uses SVG rendering. The D3 functions `scaleBand`, `scaleLinear`, and `max` handle the scales and domain, while `csv` fetches and parses the data. Axis ticks are manually rendered with lines and text.

Mar 23, 2023

Loading thumbnail…

Fork of ICE6 Swathi

This horizontal bar chart visualizes Dark Souls 3 armor sets ranked by their total physical absorption value. The data is loaded from a CSV file using `d3.csv`, sorted in descending order, and rendered as SVG rectangles within a React component. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and manually drawn axis ticks and labels via `d3.select`. Bars are styled with a dark slate blue fill, and the visualization includes gold gridlines for readability.

Mar 23, 2023

Loading thumbnail…

ICE-5

This example displays a static background image of a movie-themed scene, rendered as an SVG with a base rectangle and an overlaid pattern. The visualization loads a PNG image from a data URI and uses it as a fill pattern through the SVG `<pattern>` and `<use>` elements. The code relies on D3 v5 for any potential data handling, though the primary rendering is achieved with native SVG markup and the embedded image. The page includes custom styling for text elements but does not implement interactive or dynamic data-driven visualizations.

Mar 9, 2023

Loading thumbnail…

Buddha in colors -overlapping Buddha

The visualization generates a dense field of randomly colored, semi-transparent polygons overlaid on a silhouette of Buddha, rendered through nested React maps. Each polygon’s coordinates, fill color, and rotation are determined by multiplying loop variables with random values, producing chaotic, overlapping geometry. The SVG drawing includes a detailed path of Buddha’s face, scaled and translated, serving as the focal point. Built with React and SVG, the piece explores the interplay between abstract generative shapes and a recognizable figurative form.

Mar 2, 2023