P

prathyusha-reddy-arch

@prathyusha-reddy-arch·37 public vizzes

Loading thumbnail…

fork of ICE8

This example displays a choropleth-style map of Kazakhstan, rendered as a single SVG path using D3.js v5. It loads world country boundaries from a TopoJSON file via the `world-atlas` package, then isolates Kazakhstan’s geometry using `topojson.feature`. A Mercator projection (`d3.geoMercator`) is fitted to the country’s extent with `fitSize`, and the path is drawn with `d3.geoPath`. The visualization relies on the loaded TopoJSON data and the React framework for page structure, though the map itself is pure SVG.

Loading thumbnail…

ICE8-

This example presents a hierarchical tree visualization of geographic regions in India, from the country down to local districts. The tree is rendered as an interactive SVG diagram with rounded rectangular nodes, using a collapsible layout. The code employs D3.js v3's tree layout, `d3.layout.tree`, to compute node positions, with custom SVG elements for nodes and links, including arrow markers. Color-coded node types and zoom/pan behavior via `d3.behavior.zoom` enhance exploration. The data is loaded from a JSON file defining the nested structure, and the visualization is built within a React component using raw D3.

Loading thumbnail…

Fork of ICE8Country Map(Uruguay)

This visualization displays a map of Uruguay rendered as an SVG using D3 v5 and the topojson library. It employs d3.geoTransverseMercator projection with specific center and rotation values, and d3.geoPath to generate the country’s boundary from GeoJSON data fetched from a GitHub repository for Kazakhstan boundaries, despite the title. The map responds to zoom interactions via d3.zoom, and country regions change color on hover, with light green defaults and maroon on mouseover.

Loading thumbnail…

Kazakhstan map

This visualization shows a map of Kazakhstan rendered as an SVG, using a Mercator projection with a visible graticule overlay. The map highlights the country’s boundaries with colored strokes and fills, while the surrounding landmasses are also depicted. The code uses D3 v6’s `geoMercator`, `geoPath`, and `geoGraticule` to generate the geographic shapes, loading boundary data from a TopoJSON file via `d3.json` and `topojson.feature`. The React framework manages the rendering, with the map displayed once the data is fetched.

Loading thumbnail…

ICE-8 INDIA

This example displays a map of Florida counties using topojson data, rendered as an SVG with a Mercator projection. The map is styled with black county outlines and is interactive, allowing users to zoom and pan via d3.zoom. The code uses d3.geoPath and d3.geoMercator for geographic rendering, while d3.scaleOrdinal prepares a color scale for potential district shading. The data source is a remote GitHub-hosted topojson file for Florida’s counties, and the visualization is built with D3 v5 and topojson-client.

Loading thumbnail…

MY Tree ICE-8

This example shows a collapsible tree diagram of Indian states and districts, with each node representing a location and lines connecting parent-child relationships. The visualization uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved links. Nodes are rendered as SVG circles with text labels, and clicking toggles the expansion or collapse of branches. The tree animates with staggered transitions, adjusting node positions and link paths over 750 milliseconds. The data structure is a nested JavaScript object containing hierarchical geographic names.

Loading thumbnail…

ICE-8

This example shows an interactive force-directed network of ten people grouped into five clusters, with weighted links drawn as red lines and labeled circular nodes that users can drag. The graph layout is generated by d3.layout.force, while D3.js v4 renders the SVG scene and manages node dragging. The node names and link weights come from graph.json, and the visualization’s appearance is controlled through CSS, including stroke styles and text formatting.

Loading thumbnail…

World_Map_ICE_8

This example displays a world map using the Natural Earth projection, with landmasses filled in purple, a blue sphere background, graticules drawn in blue, and black lines marking country borders. The visualization is built with React and D3 v5, using `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. Geographic data comes from the World Atlas TopoJSON file, processed with `feature` and `mesh` from TopoJSON to render land and interior boundaries. The page includes a centered title and uses the Poppins font.

Loading thumbnail…

Fork of Largest Population in the USA

This visualization displays the largest 200 cities in the USA by 2020 population, using a bar chart that groups cities by state and colors bars by region. It answers questions about the top-ranking cities, which states host the most large cities, and the distribution of large-city populations across states. The visualization is built with React, D3 v5, and Vega-Lite API, loading CSV data from a GitHub gist originally sourced from World Population Review. It employs the `vl.markBar()` encoding with grouped aggregation and tooltips for interactive exploration.

Loading thumbnail…

Fork of crime

This interactive visualization shows the number of crime cases against women in India, organized by state and crime type for any year from 2006 onward. A choropleth map displays the data, while two donut charts provide filters: one for selecting the year, the other for choosing a specific crime category like rape or kidnapping. The application uses D3.js v7 with the topojson library for the map's geographic shapes and the d3.pie, d3.arc, and d3.rollups functions to aggregate and render the charts. It is built as a React component, updating its display whenever the user changes a dropdown selection.

Loading thumbnail…

Fork of BarChart Interative

This stacked bar chart visualizes the estimated 2010 religion breakdown of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each bar represents a country, segmented by religious affiliation, with a color-coded legend for regions. Hovering over a bar reveals a tooltip, while hovering over the legend highlights only the bars for that religion, dimming the rest. The visualization is built with D3 version 3, using APIs such as `d3.layout.stack`, `d3.legend.color`, and `d3.tip`, and rendered as an SVG with animated transitions.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This example shows the monthly cost of basic Amazon services across different countries, displayed as a horizontal bar chart. The visualization ranks twelve country codes by their associated costs, with a red gridline marking each value on the x-axis. The chart uses pre-loaded CSV data and renders in SVG via React. It implements D3 version 5’s `scaleBand` and `scaleLinear` to map country codes and cost values, while `csv` fetches the external dataset and `max` calculates the domain for the value axis.

Loading thumbnail…

Fork of HTML Starter

A bar chart displays national-level data from a CSV dataset, filtered to include all years for the "National" level. The visualization uses D3.js to create an SVG rendering, with a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles filled with steelblue, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded asynchronously via `d3.csv` from a GitHub gist URL.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data across US states, years, and weeks. It integrates a choropleth map, a bar chart ranking top states, and a line chart showing trends over time, all linked through brushing and hovering. Built with React and D3 v5, it uses `geoAlbersUsa` projection for the map, `scaleBand` and `scaleLinear` for the bar and line axes, and `scaleOrdinal` for color encoding. The map’s sequential color scale uses `interpolateYlOrRd`, with a custom color legend and tooltips providing state-specific values.

Loading thumbnail…

Fork of ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data, showing weekly influenza-like illness percentages across US states. It combines a choropleth map, a horizontal bar chart ranking top states, and a multi-series line chart tracking seasonal trends by year, all with linked highlighting and selection. The React-based interface uses D3 v5 scales and geoAlbersUsa projections, rendering SVG marks with CSS transitions. Data is loaded from a CSV via d3.csv and US state boundaries from the us-atlas TopoJSON.

Loading thumbnail…

Fork of Bonus ICE Scatter plot using D3.js

This 3D scatter plot visualizes COVID-19 data across countries, showing two traces: one plotting cured cases against dead cases, and another plotting active cases against dead cases. The visualization uses Plotly’s `scatter3d` type within `Plotly.newPlot`, with D3.js handling CSV data loading via `d3.csv` and the `unpack` function to extract columns. Data originates from a GitHub-hosted CSV file containing per-country case counts, rendered as colored markers with configurable opacity and line styling in a minimal HTML page.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing annual income across seven professions, with male and female series plotted side-by-side along a depth axis. The chart uses Highcharts with the highcharts-3d module, enabling rotation and depth through the `options3d` configuration, which sets alpha, beta, and view distance. Data is provided as hardcoded arrays in the series, with categories on the x-axis, income on the y-axis, and gender on the z-axis. The code relies on jQuery to initialize the chart within a container div.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between different flower measurements (petal and sepal length/width) as colored points for three species. Using D3.js within a React framework, the code animates through different x-axis metrics on an interval, updating the axes and circles. The plot uses `d3.select`, `d3.csv`, and custom `scatterPlot` logic with `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG, while a static legend with colored markers identifies each species.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis every few seconds. It uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as SVG circles colored by species. The visualization includes a legend, axis labels, and a title, with circles positioned based on four numeric flower measurements.

Loading thumbnail…

Piechart ICE7

This pie chart visualizes COVID-19 death counts across different countries for 2019–2020, with each slice labeled in thousands and a legend listing country names and corresponding values. The chart uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, along with `scaleOrdinal` for color mapping and `csv` to fetch the dataset from a GitHub gist. Labels and legends are appended as SVG text and rect elements, with the arc’s centroid method positioning the value labels.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying petal width against sepal length with circles colored by species (setosa, versicolor, virginica). It animates through different dimension pairings on the x-axis every few seconds using `setInterval`. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` for data loading, while SVG circles and text labels render the chart and legend dynamically.

Loading thumbnail…

SmallPox Death cases

This example visualizes the number of smallpox death cases recorded between 1950 and 1970 using a green line chart rendered as SVG. The chart employs D3.js scales, with `d3.scaleBand` mapping years to the x-axis and `d3.scaleLinear` mapping death counts to the y-axis. The line path is generated using `d3.line`, with data loaded from a CSV file via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, and the chart is embedded in a React page.

Loading thumbnail…

Q4ICE7

This chart visualizes the number of smallpox death cases each year between 1950 and 1970. A green area under a solid black line, rendered as SVG, shows the trend over time. The visualization uses D3 v5 to load and parse CSV data, apply linear scales for both axes, and generate the smoothed line and area paths using `line()`, `area()`, and `curveBasis()`. Axis components are built with `axisBottom()` and `axisLeft()`.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot visualizes relationships between annual income, spending score, work experience, and family size, with points colored by gender (yellow for male, green for female, brown otherwise). The visualization uses React, D3 v5, and SVG rendering, loading data from a CSV via `d3.csv`. It employs D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to coordinates and render axes. Circles are drawn with both `rx`/`ry` attributes and a radius, while axis labels and a title are added as text elements.

Loading thumbnail…

Fork of ICE-6 Scatter Plot-Prathyusha

This visualization displays the Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes while encoding species with distinct colors (violet, yellow, and brown). It loads data from a CSV file using `d3.csv`, scales the coordinates with `scaleLinear` and `extent`, and renders circles as SVG elements via `selectAll` and `join`. The code also draws axes using `axisLeft` and `axisBottom`, with custom tick sizing and labeled axes for the petal and sepal measurements.

Loading thumbnail…

Fork of ICE-6: Covidcases

Using a bar chart, this visualization displays the top ten countries by active COVID-19 cases in 2022. The React app loads data from a CSV file containing country populations and case counts, rendering it as an SVG. D3’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` are used to position the bars and axes. The chart includes purple gridlines and a title, with data fetched via `d3.csv` and formatted using D3’s `max` and `format` functions. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and rendering process.

Loading thumbnail…

Fork of ICE-6: (Bar Chart)

This bar chart visualization displays the 2022 population data of countries classified as RICH, sourced from a CSV file of COVID-era data. The React-based app uses D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` to load and render horizontal bars as SVG rectangles. Axes are drawn with `axisLeft` and `axisBottom`-style manual tick generation, with purple gridlines along the x-axis. The chart shows only the first eleven countries from the dataset, with each bar’s length proportional to its population value.

Loading thumbnail…

Fork of ICE-6 Bar Graph Prathyusha

This bar chart visualizes hotel booking costs across 12 destinations, using a horizontal layout where bar length encodes the price per 24 hours from a CSV dataset. The React component loads data via D3’s `csv` function, then renders SVG rectangles scaled by `scaleLinear` for cost and `scaleBand` for place names. Grid lines and axis labels are manually generated using D3’s `axisBottom` and custom tick mappings, with red vertical lines marking each cost increment.

Loading thumbnail…

Fork of ICE-6 (airbnb)

This interactive scatter plot displays Airbnb listings based on distance to the city center and metro distance, with point color encoding species (Adelie, Gentoo, or other). Built with D3 v5, it loads CSV data and maps values to an SVG canvas using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes. Each point uses `circle` elements with a fixed radius, while custom labels, tick styling, and explicit axis titles highlight the plot. The visualization emphasizes geographic proximity patterns against guest satisfaction metrics from the Airbnb dataset.

Loading thumbnail…

Fork ofICE-6 Scatter Plot

This example visualizes the Iris dataset with a scatter plot that maps realSum on the x-axis and PetalWidthCm on the y-axis, coloring each point by species (blue, yellow, or red). It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering SVG circles with `rx` and `ry` attributes that redundantly encode SepalLengthCm and SepalWidthCm. Data loads from a remote Airbnb CSV GitHub gist, with axes labeled "Petal_Length" and "Sepal_Length", and the visualization fills the browser window.

Loading thumbnail…

Fork ICE-6 Bar Graph

This bar graph, titled "Hotel Booking System," displays the cost per 24 hours for twelve different places. The visualization uses a horizontal bar chart, with each bar's length representing the cost, and a linear scale for the x-axis. Built with React and D3 v5, the code fetches data from a CSV file, uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and renders the chart as an SVG with red gridlines and axis labels.

Loading thumbnail…

ICE-5

This visualization displays a raster image of a historical map or chart, rendered directly within an SVG canvas using an embedded base64-encoded JPEG. The image fills the entire 900×384 pixel viewport and is applied via an SVG `<pattern>` element with `patternContentUnits` set to `objectBoundingBox`. The D3.js library v5 is loaded from a CDN, although the code primarily relies on native SVG and XLink for image placement. Black background `<pre>` elements with aqua text accompany the visual, providing summary metadata about the displayed dataset in a readme-style format.

Loading thumbnail…

Fork of forking budha into 5 -overlapping Buddha

Five overlapping Buddha silhouettes, colored with semi-transparent random RGB polygons, create a dense, chaotic collage on a green background. The layout is generated by nesting three loops that map array values through `Math.random()` to position and scale 960x1000 SVG polygons, each rotated 45 degrees. The primary Buddha path is rendered in a translated `<g>` group, while `React` and `ReactDOM` manage the component structure and mounting to the DOM.

Loading thumbnail…

forking budha into 5 -overlapping Buddha

A generative artwork renders five overlapping Buddha silhouettes from embedded SVG path data. Randomly positioned colored circles fill the canvas using nested React `map` functions over arrays, with each circle's `cx`, `cy`, and `fill` determined by `Math.random()`. The composition uses React and ReactDOM for rendering to SVG, combining the deterministic path with stochastic particle placement for a chaotic yet structured visual effect.

Loading thumbnail…

Forking budha in 5 -overlapping Buddha

A dense field of randomly positioned, semi-transparent SVG circles forms a colorful backdrop, while a single Buddha silhouette drawn as an SVG path is layered on top with a green page background. The circles are generated through triple-nested React array maps, with each circle’s radius, coordinates, and RGB fill color derived from random values. The Buddha path is rendered using a hardcoded `d` attribute within a transformed `<g>` element, scaled and translated into place. The visualization uses React and ReactDOM to render the SVG markup declaratively, with no external data source or interaction logic.

Loading thumbnail…

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

A scatter of randomized, overlapping circles is layered over a stylized Buddha outline, with both rendered in SVG. Each circle’s position and color are determined by `Math.random()`, and the Buddha path is drawn using a hardcoded SVG path string with a stroke. The visualization is built with React, which maps over an array to generate the circle elements inside an `<svg>` container of fixed width and height. The overlapping, multicolored circles create a dense, chaotic texture against the green background, while the Buddha figure remains visible beneath them.

Loading thumbnail…

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

This visualization layers hundreds of semi-transparent circles with randomly generated positions, radii, and RGB color values on top of a static SVG path of a Buddha. The circles are produced through triple‑nested React `map` calls, each using `Math.random()` to compute coordinates and fill colors, while the Buddha outline is rendered with a single `<path>` element. The piece uses React and ReactDOM for rendering to SVG, with no external data source or interaction.