S

suchitra2602

@suchitra2602·33 public vizzes

Loading thumbnail…

tree network - Ice 8

This interactive tree diagram visualizes a three-generation family network rooted at SangaReddy. The visualization uses D3.js version 3.5’s `d3.layout.tree` with SVG rendering, displaying violet circular nodes and connecting links. Clicking any node triggers an animated collapse or expansion of its children using D3 transitions, with nodes smoothly repositioning along the horizontal hierarchy. The data is hardcoded as a JavaScript object array containing family member names and parent-child relationships.

Loading thumbnail…

Social Network Graph - ICE-8

This interactive network visualization maps social connections among ten individuals, such as Suchitra, Rahul, and Cherry, based on friendship links from a local data.json file. Implemented in D3 v6 with SVG rendering, the graph layout is computed using the `d3.forceSimulation` API with link, many-body, collision, and centering forces. Nodes are rendered as large circles with labels, and directed edges include arrow markers to indicate relationship direction. Users can drag nodes to rearrange the network, with hover effects highlighting selected nodes.

Loading thumbnail…

Family Tree - ICE-8

This visualization presents a family tree as an animated SVG diagram, with each generation color-coded (green, white, pink, orange) and labeled with member names. Using d3.stratify and d3.tree, the code converts parent-child links into a hierarchical layout, then renders connections and nodes with circles and text. Paths between nodes animate via transition, and node radii grow slightly as they appear, all rendered with d3.v6 within an orange-styled HTML page.

Loading thumbnail…

Swedish map - ICE 8

This example visualizes the counties of Sweden as a choropleth-style map, with each region filled in a muted red and interior boundaries highlighted in teal. Built with React and D3 v5, it loads TopoJSON data from a GitHub gist and converts it to GeoJSON using `feature` and `mesh` from the topojson library. The map is rendered as SVG using `geoMercator` projection and `geoPath`, with a `fitExtent` call to scale the map to fit the viewport.

Loading thumbnail…

Country Map - India

This interactive map of India lets users explore state and district boundaries by clicking on regions, which triggers a smooth zoom animation to focus on the clicked area. Built with React and D3 v6, it uses `geoMercator` and `geoPath` to render SVG polygons from TopoJSON data, while `d3.zoom` handles panning and scaling. Clicking a state filters the display to its districts, and the zoom transition is computed from the path’s bounding box.

Loading thumbnail…

World Map -ICE-8

This visualization displays a world map with every country shaded red against a black outline. It fetches geographic data from the world-atlas GeoJSON source via the `json` method, then converts it into SVG paths using `topojson.feature` and projects it with `d3.geoPath` and the Natural Earth projection. The resulting graphic renders countries as static, uniformly colored regions without additional interactivity or styling variations.

Loading thumbnail…

3D Bar Chart

The visualization displays a 3D multi-series bar chart comparing quarterly U.S. car sales for the top six manufacturers across four consecutive years, using an X3D scene embedded in the DOM. The chart renders each manufacturer as a cluster of rectangular bars, with height encoding sales volume per quarter. Data is loaded from a remote CSV file via D3’s `csv` function and parsed with a custom row-mapping callback. The example leverages the `d3-x3d` library in conjunction with D3 v5, the `d3-3d` module, and the x3dom runtime to produce interactive, three-dimensional bars.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart displays visitor counts for seven global landmarks, comparing six countries (USA, China, India, Italy, Turkey, and UK) using stacked, non-grouped columns. Built with Highcharts and the Highcharts-3D extension, it renders a three-dimensional perspective with configurable alpha, beta, and view distance to show depth. The chart uses the `options3d` API to enable 3D rendering and the `grouping: false` property to place all series in a single column cluster. The x-axis lists landmarks, the y-axis counts total visitors, and the z-axis labels the places, with data hard-coded directly in the array structures.

Loading thumbnail…

Bonus ICE - 3D Bar chart

A 3D vertical bar chart compares total downloads for seven music artists across six app stores, with each store’s download counts stacked as distinct colored bars per artist. Built with Highcharts and the Highcharts 3D extension, it renders columns with depth, enabled via `options3d` (alpha, beta, viewDistance, depth), and uses `plotOptions.column` for stacking and grouping. The chart plots series arrays for each store, with categories on the x-axis, download totals on the y-axis, and a z-axis titled “Various Sources.” The example uses a grey background and a fixed-height container.

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes survey data on the most loved programming languages, with each bar’s height representing the percentage of positive responses. The chart is rendered as an SVG using D3.js v5 within a React framework. Hovering over a bar triggers a transition that highlights it and displays a dashed reference line, while text labels show percentage divergences between the hovered bar and all others using `d3.transition` and `d3.select`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with a linear scale for values and a band scale for categories.

Loading thumbnail…

Bonus ICE

This example shows a 3D bar chart titled “Top phone sales in 3 countries,” comparing sales figures for nine product categories across the United States, India, and Germany. The chart uses Highcharts with the Highcharts 3D extension, enabling a column chart with stacking, grouping, and depth settings for a three-dimensional visual effect. Each series is assigned a different country, with data values expressed in billions of USD. The chart is rendered inside an HTML page using jQuery to initialize the Highcharts configuration on a container div.

Loading thumbnail…

3D Scatter Plot

This example shows a 3D scatter plot of wheat dataset attributes, with two traces comparing relationships between Area, Perimeter, and both Kernel_Length and Kernel_Width. The Plotly.js library renders the interactive visualization, while d3.csv loads the data from a GitHub-hosted CSV file. The code defines trace-specific marker styles, including sizes, colors, and opacity, and uses a minimal layout with all margins set to zero.

Loading thumbnail…

Fork of Bonus ICE

This example visualizes car brand sales across three countries using a three-dimensional stacked column chart. It displays sales figures in billions of USD for brands like Tesla, Ford, and BMW. The visualization uses the Highcharts library with its 3D module to render the chart, applying rotation angles (alpha and beta) and depth settings for the perspective effect. The code defines three data series for the United States, India, and Germany, plotting sales values against categorical x-axis labels.

Loading thumbnail…

Bonus ICE

This example presents a 3D bar chart comparing top car brand sales across three countries, with the United States, India, and Germany represented as distinct stacked series. The visualization uses Highcharts and the Highcharts 3D extension, configuring an oblique view with alpha and beta rotation angles. Categories include brands like Tesla, Ford, and BMW, while the y-axis displays sales in billions of USD. The chart emphasizes depth and grouping through plotOptions, setting column depth and groupZPadding to create a visually layered composition.

Loading thumbnail…

Bonus assignment

A smiley face is drawn and animated using D3 and React, showing a bar chart that transforms into a rotating, bouncing face. The visualization uses D3's ordinal and linear scales, SVG axes, and a drop-shadow filter to render the chart, which is built inside a React component. The code employs D3 v2 with jQuery, selecting DOM elements and appending SVG elements dynamically. The smiley face is constructed from chart data and options, with smooth animations driven by D3's transition methods.

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes the Iris dataset, displaying three dimensions (Area, Perimeter, and Kernel Length) as one series, with a second series replacing Kernel Length with Kernel Width. The plot uses the Plotly JavaScript library via the `Plotly.newPlot` function to render interactive 3D markers in a web page. Data is loaded asynchronously using D3's `d3.csv` to fetch a remote CSV, and the marker styles (size, opacity, and colors) are configured per series. The layout margins are zeroed to maximize the chart area.

Loading thumbnail…

3D Scatter Plot

This example visualizes the Wheat kernel dataset as a 3D scatter plot, displaying Area, Perimeter, and Kernel Length as markers in three-dimensional space. It also includes a second trace that combines Area, Perimeter, and Kernel Width, using distinct colors and marker symbols to differentiate the two series. The visualization is built with Plotly’s `scatter3d` and `scatter2d` types, with data loaded via D3’s `d3.csv` and rendered into a `div` using `Plotly.newPlot`. The layout margins are set to zero for a clean, full-bleed presentation.

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This animated scatter plot displays the Iris Dataset, cycling through four numerical variables along the x-axis to compare against Kernel Width on the y-axis. Built with D3.js, it uses a custom `scatterPlot` function that leverages `scaleLinear`, `axisBottom`, and `axisLeft` to render axes dynamically. Points are styled as circles with colors mapped to wheat type (Kama, Rosa, Canadian) via a custom marker function. The view updates every few seconds via `setInterval`, redrawing the plot and axis labels while keeping a static legend and title. Data is loaded as CSV and parsed into numeric fields.

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, with data points colored by species. Built with D3.js v6, the plot cycles through different attribute pairs on the x-axis, including petal width, sepal width, petal length, and sepal length, updating the axes and circles each second. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart, along with SVG elements for rendering and a fixed legend for species identification. The implementation follows a reusable chart pattern, allowing dynamic configuration of dimensions, margins, and value accessors.

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes Bitcoin rate flow over time, with timestamps on the x-axis and bitcoin values on the y-axis. It uses D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, filled path. Axes are rendered with `axisBottom` and `axisLeft`, and the data is loaded from a CSV file via `csv()`. The SVG is 920 by 400 pixels, styled with CSS classes, and built using React within the VizHub framework.

Loading thumbnail…

Line Chart ICE-7

This line chart shows the fluctuation of Bitcoin rates over time, with timestamps plotted on the x-axis and Bitcoin values on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate a smooth SVG path. Data is loaded from a CSV file via `d3.csv`, and margins, axis labels, and a title are styled with custom CSS. Gridlines are created through tick sizing, and the chart is rendered entirely as SVG.

Loading thumbnail…

Pie Chart (with labels) with d3

This interactive pie chart visualizes the top 10 countries with the highest women’s populations, with each slice labeled by name and value. Data is loaded from a CSV file and rendered as an SVG using d3.arc and d3.pie, with a categorical color scheme via d3.scaleOrdinal. The chart features interactive tooltips on hover, which display the country name and value, achieved by appending and removing text elements within the SVG. A legend is also generated alongside the chart.

Loading thumbnail…

ICE - 7 Pie chart viz

This pie chart displays the percentage of the female population across six countries, using a CSV data source. The visualization renders with `d3.pie()` to compute arc segments and `d3.arc()` for path generation, with each slice colored via a categorical scale and labeled with its percentage value. A legend on the right maps each color to its corresponding country and percentage, while the total dataset is loaded asynchronously using `d3.csv()` from a GitHub gist. The chart uses an SVG canvas with fixed dimensions and custom styling for the text and legend.

Loading thumbnail…

Data Visualization Scatter Plot Graph

This scatter plot visualizes the Iris dataset, plotting petal length against petal width for individual flowers. Each point is colored by species—violet for setosa, orange for versicolor, and blue for virginica—using an SVG rendered via D3 v6. The visualization loads data from a CSV file and uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the chart, with axis labels provided for the petal measurements. The plot is dynamically sized to the browser window.

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This horizontal bar chart displays the top 10 companies by revenue in billions of dollars, sourced from a CSV file. Each bar’s length is proportional to the revenue value, scaled using `d3.scaleLinear`, while company names are positioned with `d3.scaleBand`. The chart renders as an SVG with React, using `d3.csv` to load data and a `useEffect` hook to fetch and parse it. Axis ticks and gridlines are drawn with `d3.axisLeft` and `d3.axisBottom` logic, and red fills highlight the bars.

Loading thumbnail…

Data Visualization - ICE-6 Scatter Plot Graph

This visualization uses D3 v6 to render a scatter plot of Iris flower data, mapping petal length and width to the x and y axes while using sepal dimensions to determine each point’s rx and ry attributes, creating elliptical markers. A color scale distinguishes the three species (setosa, versicolor, virginica) as yellow, blue, and red. The SVG chart loads data from a CSV via `d3.csv`, scales positions with `scaleLinear` and `extent`, and adds axes using `axisLeft` and `axisBottom`. The dataset originates from a gist containing credit card usage records, though the code processes Iris measurements.

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays the revenue of the world’s top 10 biggest companies in billion dollars, sourced from a CSV file. It highlights how custom D3 axes can be styled with red gridlines, blue tick labels, and adjusted tick font sizes. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and rendering rect elements in SVG. Axes are manually constructed by mapping tick values, avoiding the default axis generators.

Loading thumbnail…

Csce 5320 Data Visualization ICE 5

This example displays metadata about a hockey player dataset, including row and column counts, in a styled HTML page. It uses D3 v7’s `d3.csv` to load external CSV data from a GitHub gist and `d3.csvFormat` to calculate the data size, displaying the results in a green `pre` element. The page also embeds a static SVG image of a dog from another gist, with yellow heading and centered layout styled via inline CSS. No interactive charts or animations are present.

Loading thumbnail…

ICE4

A smiling yellow face rendered in SVG uses D3’s `arc` generator to draw a semicircular mouth and custom eye arcs, while React manages the component structure. The face includes black-outlined circles for eyes and head, red ellipses for cheeks, and black stroke lines for hair and ears. Static geometry places features symmetrically around the center, with D3’s `arc` and `d3.arc` APIs defining curved shapes, and ReactDOM rendering the final SVG.

Loading thumbnail…

Fork of Smiley Task

This example renders a stylized smiley face using React and D3.js, drawing SVG shapes such as circles, paths, ellipses, and lines. It uses the `d3.arc` API to construct the mouth and eye arcs, with predefined inner and outer radii and angles. The face is centered within a 960×500 viewport, featuring yellow circular head, black outlined eyes with white highlights, a red tongue, and additional line-based hair or accessory details, all composed programmatically.

Loading thumbnail…

Smiley Task

This example renders a large, stylized smiley face using React and D3’s `arc` generator. The face is composed of SVG primitives: yellow circles for the head, black circles for eyes with white highlights, red ellipses above them, and thick lines for eyebrows and a smiling mouth. D3’s `arc` constructs the mouth and eye-shaped paths, while React manages the SVG element hierarchy. The layout is statically positioned, with shapes centered and scaled relative to a viewport of 900 by 510 pixels, using a fixed coordinate system.

Loading thumbnail…

Fork of Smiley Face with D3.js

This fork from suchitra2602 renders a yellow smiley face using D3.js v5, with eyes, eyebrows, a mouth, and a nose positioned via SVG transforms. The eyebrows animate up and down over two seconds using chained `transition().duration()` calls. The face is drawn with SVG circles, rects, and arc-based paths on a light green background, with the nose constructed from an `arc()` shape.

Loading thumbnail…

ice4

A smiling yellow face with black outlined eyes and rectangular eyebrows is drawn using D3.js v5 in an SVG. The animation shows the eyebrows moving up and down by chaining two `transition.attr` calls on a group element. The code uses `d3.select`, `d3.arc` for the mouth, and SVG primitives like `circle` and `rect`. Rendering is SVG-based with timed transitions.