Sushmareddy-gudipally

@Sushmareddy-gudipally·20 public vizzes

ICE 8 Social Network

This visualization shows a small social network of seven people, with names like Narsimha, Raji, and Priya, represented as purple circles connected by pink links whose thickness reflects interaction weight. The code uses the D3.js v4 library and the `d3.layout.force` API to position nodes and enable dragging. Data comes from a local `data.json` file, and the graph is rendered as an SVG with circles, labels, and lines.

Apr 4, 2022

Loading thumbnail…

ICE - 8 Family Tree

This visualization presents a family tree as a hierarchical node-link diagram, using blue circles with bold black labels to represent ten individuals and their parent-child relationships. The data is structured as a flat list of names with parent references, which d3.stratify converts into a hierarchy. d3.tree computes the layout, while SVG paths with lime strokes connect nodes, animating their growth over one second via transitions. Nodes and text labels also animate into place, with a full-screen SVG canvas rendering the final result.

Apr 4, 2022

Loading thumbnail…

ICE - 8 Family Tree (Generations)

This example shows a family tree across four generations, with each generation represented by a distinct color (violet, blue, green, pink). The visualization uses circles as nodes, connected by blue paths, with each person’s name displayed as bold black text. The code builds the tree using D3.js v6 with the `d3.stratify()` utility to construct the hierarchy from parent-child data, and `d3.tree().size()` to compute the layout. Nodes and links are rendered into an SVG with animated transitions: paths draw stepwise and circles fade in, both using the `.transition().duration()` API.

Apr 4, 2022

Loading thumbnail…

ICE - 8 Making Maps (Country Map)

This example renders a static country map, displaying the United States in isolation from a global dataset. It uses the D3.js library (v5) and the TopoJSON library to load and process world country boundaries from a JSON file. The map is drawn using SVG paths, with the `d3.geoAlbersUsa` projection and `d3.geoPath` API to generate the geographic shapes. The code filters the loaded data to select only the United States for display, styling it with brown fill and a black stroke.

Apr 4, 2022

Loading thumbnail…

ICE 8 Making Maps (World Map)

This example displays a world map filled with brown countries outlined in black on a light blue background. It renders the map by fetching GeoJSON data from the world-atlas TopoJSON file and projecting it using d3.geoNaturalEarth1 and d3.geoPath. The code processes the TopoJSON with the topojson.feature function and appends SVG paths for each country.

Apr 4, 2022

Loading thumbnail…

Fork of Scatter Plot Using Iris Data

This scatter plot displays the Iris dataset, showing petal length and petal width on the axes, with each data point colored by species. The visualization uses D3’s `scaleLinear` and `extent` for scaling, and `csv` for data loading. It renders SVG circles with attributes for position, color, and radius. The chart includes axis labels and uses the `axisLeft` and `axisBottom` functions for tick marks. The data is fetched from a GitHub-hosted CSV file.

Mar 28, 2022

Loading thumbnail…

Fork of Area_Chart_facebook_users_anually

This example combines a line chart and area chart to show Facebook’s annual users from 2008 to 2017. The line traces the trend of user growth, while the filled area underneath emphasizes the magnitude of the values over time. The visualization uses D3 v5 APIs including `d3.line`, `d3.area`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with `curveBasis` for smooth curves. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering applies custom styling for axes and labels.

Mar 28, 2022

Loading thumbnail…

Fork of Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes, with circles colored by species. It also encodes sepal length and width as the rx and ry attributes of each circle, creating elliptical markers. The visualization is built with D3 v6, using `csv` to load data, `scaleLinear` for axes, and SVG circles with `attr` bindings. Axis labels and tick styling are customized via CSS and D3's `axisLeft` and `axisBottom`.

Mar 28, 2022

Loading thumbnail…

Fork of Line_chart_facebook_users

This line chart displays Facebook’s annual user counts from 2008 to 2017, with a purple title, bold green tick labels, and a thick blue line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to map year and user data. It loads CSV data from a GitHub gist via `d3.csv`, parses the values, and renders to an SVG with custom margins and axis labels.

Mar 28, 2022

Loading thumbnail…

Fork of Fork of Fork of Pie_chart_Us_states_density

This visualization shows the top 10 US states by population density as a pie chart, with a legend listing each state and its population value in thousands. The chart is rendered as an SVG using D3 v5, with pie and arc generators computing the segment paths, and a scaleOrdinal mapping categorical colors to each state. Population data is loaded from a remote CSV via d3.csv, and the legend displays formatted values using d3.format.

Mar 28, 2022

Loading thumbnail…

Fork of Fork of Pie_chart_Us_states_density

A pie chart displays the population density for the top 10 US states, with a legend listing each state and its density value in thousands. The visualization is built using D3 v5, with `d3.pie` and `d3.arc` generating the chart segments, and `d3.scaleOrdinal` providing the color palette. Data is loaded asynchronously from a CSV file hosted on a GitHub gist using `d3.csv`. The chart is rendered as an SVG element, with custom styling applied through a separate CSS file for the title, legend text, and labels.

Mar 28, 2022

Loading thumbnail…

Fork of Pie_chart_Us_states_density

This pie chart shows the top 10 U.S. states by population density, with each slice colored and labeled by state, and its value displayed in thousands. The visualization loads CSV data from a GitHub gist via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` assigning a fixed color palette. A legend, built with appended SVG rectangles and texts, maps each color to its state and density value, formatted using `d3.format`. The rendering is entirely SVG-based, with custom styling from an external stylesheet.

Mar 28, 2022

Loading thumbnail…

Fork of Fork of Pie Chart

This visualization displays the population distribution of Telangana as a pie chart, with each slice representing a brand’s year-to-date value. The chart renders in SVG using d3.pie and d3.arc, with colors assigned via d3.scaleOrdinal. Data is loaded from a CSV file using d3.csv, and each slice’s value is formatted as thousands with d3.format. A legend lists each brand with a color swatch and its corresponding value, while the chart’s title and styling are set in HTML and CSS.

Mar 28, 2022

Loading thumbnail…

Fork of Iris Dataset Scatter Plot- Sushma Reddy

This interactive scatter plot visualizes the Iris Dataset, displaying petal length and width for individual flowers while also encoding sepal length and width as point size parameters. Three iris species—setosa, versicolor, and virginica—are distinguished by orange, black, and red fills. Built with D3 v6, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for coordinate mapping, and `d3.axisLeft` and `d3.axisBottom` for chart axes. The plot is rendered as an SVG with circles and labeled axes, with data fetched from a remote CSV source.

Mar 7, 2022

Loading thumbnail…

Fork of Iris Sushma

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Each point is colored by species, with the fill color assigned via a custom function that maps the dataset’s species names to specific colors. The plot uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to scale the data and render axes, while circles are drawn with SVG attributes in a `join` operation. The data is loaded as CSV from a GitHub gist.

Mar 6, 2022

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This horizontal bar chart displays the populations of districts in Telangana, India, using a green fill for each bar. The visualization loads data from a CSV file, parses the population values, and scales them for display. Built with D3.js v7, it employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` with `d3.axisBottom` to render the axes. The SVG elements are selected and manipulated via `d3.select`.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-6

This example displays a horizontal bar chart of the top 10 most populous countries in 2019, with country names on the y-axis and population values on the x-axis. The chart uses React hooks to manage state and load the CSV data, while D3 utilities like `scaleBand`, `scaleLinear`, and `max` handle scaling and axis generation. The visualization renders as an SVG, with gridlines and tick labels drawn manually, and bars styled with a default blue fill. Data originates from a GitHub-hosted CSV file.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-6: Sushma Reddy

This visualization displays the top 20 countries by COVID-19 case counts on January 28, 2020, using a horizontal bar chart. The chart uses React to manage state and render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning. Data is loaded via d3.csv from a GitHub gist, and bars are drawn as SVG rectangles, with axes and tick labels generated from the scales' domains.

Mar 6, 2022

Loading thumbnail…

ICE-6

This visualization displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The chart loads data from a CSV file and renders as an SVG using React and D3 v5. The code employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and includes grid lines with tick labels generated via the scales. Data is processed by converting the ’2019’ column to numeric values and slicing the top 10 entries.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example displays population data for districts of Telangana using a static SVG map with decorative elements and a text summary of the loaded dataset. The page loads a CSV file from a GitHub gist via `d3.csv`, then computes and displays the file size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization pairs this parsed data summary with a hand-drawn SVG map of the region, rendered in a React component with D3.js v7 for data handling and SVG for graphics.

Feb 28, 2022