NaveenParitala

CSCE-5320: ICE-8 US Country map

This example displays a choropleth map of the United States, showing state boundaries with a white fill and black strokes. Upon hovering over a state, its fill color changes to goldenrod via a CSS `:hover` rule. The map is rendered as an SVG using D3 v5 and the topojson library, specifically employing `d3.geoPath` with the `geoAlbersUsa` projection. Data originates from the `us-atlas` counties-10m JSON, with state features extracted via topojson's `feature` function.

CSCE-5320: ICE-8 Social Network

This network visualization shows a social graph of ten people with "Friend with" connections, rendered as blue circular nodes labeled with names and connected by black directed lines with arrow markers. The layout is computed using d3.forceSimulation, which applies forceLink, forceManyBody, forceCollide, and forceCenter to position nodes dynamically. Users can drag nodes to rearrange the network. The SVG output uses d3’s JSON data loading, with node highlighting effects on mouseover and a color scale of blue for all nodes.

CSCE-5320:ICE-8 family tree

This interactive family tree visualizes three generations of the Paritala lineage using a D3.js tree layout with animated SVG transitions. Node colors encode family type and level attributes, while green links connect parent-child relationships. The visualization uses `d3.layout.tree()` for hierarchical positioning and custom click handlers to collapse or expand branches, with data embedded directly in the JavaScript source.

CSCE-5320: D3 World map

This visualization displays a world map using the Natural Earth projection, with individual countries rendered as SVG paths that highlight green on hover. The map loads geographic data from a TopoJSON file containing 110m-resolution country boundaries, which is converted to GeoJSON features using the topojson library’s `feature` function. The code uses D3 v5 APIs including `d3.geoPath` for path generation, `d3.geoNaturalEarth1` for the projection, and `d3.json` for asynchronous data loading.

CSCE: ICE-7 Area chart

This area chart displays the number of wickets taken per innings, using a smooth curve to fill the area beneath the line, with time-scaled innings on the x-axis and a linear scale for wickets on the y-axis. The visualization is built with d3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` and `line` generators with `curveBasis` to create the filled path and stroke. Data loads from a remote CSV file via `d3.csv`, and the SVG rendering applies custom styling for the orange background, bold axis labels, and thick stroke.

CSCE 5320: ICE-7 Line chart

This line chart shows the number of wickets taken for each inn, plotted over time. The visualization uses D3.js v5 with an SVG rendering. It loads data from a CSV file and applies a time-based x-axis and linear y-axis. The chart creates a single blue line path using D3's line generator, with axes and labels positioned using margin calculations. The x-axis displays "Inns" and the y-axis displays "Wkts".

CSCE 5320: ICE-7 Pie Chart

This example shows the distribution of cricket wickets among players as a pie chart, with a legend identifying each player and their corresponding wicket count. The data comes from a CSV file loaded via `d3.csv` from a GitHub gist. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG paths, with `scaleOrdinal` assigning a categorical color palette. Legend rectangles and text labels are appended to the SVG, and wicket values are formatted with `d3.format` for compact display.

CSCE- 5320: ICE-7 Reusable scatter plot

This animated scatter plot explores the Iris flower dataset by cyclically rotating which of four measurements (petal width, sepal width, petal length, sepal length) is mapped to the x-axis every two seconds, while the y-axis remains fixed. The visualization distinguishes the three iris species using hardcoded colors (blue, lawngreen, orange) via a switch statement. It uses D3.js APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `join`, with a reusable `scatterPlot` module. Data is loaded from a GitHub Gist CSV, rendered as SVG circles with a custom font.

Bonus ICE 3d Chart

This chart displays the top 20 players with the most wickets in ICC tournaments, using horizontal bars scaled by their wicket count. The SVG visualization is built with React and D3 v5, reading data from a CSV file via `d3.csv`. It uses `d3.scaleBand` for the player axis, `d3.scaleLinear` for the wicket and ball scales, and `d3.max` for domain calculation. The code includes axes with `d3.axis` tick generation, though labels and lines are rendered manually within ReactJS components.

Mar 12, 2022

Bonus ICE

This example shows a 3D scatter plot of cricket bowling statistics, comparing gameplay metrics across two coordinate spaces. The first trace plots innings, wickets, and balls delivered, while the second trace maps average, economy rate, and strike rate. Both traces use Plotly’s `scatter3d` with marker styling and opacity. Data is loaded via d3.csv from a GitHub-hosted CSV file, and the visualization is rendered inside a div using `Plotly.newPlot` with a zero-margin layout.

Mar 12, 2022

CSCE- 5320: ICE-6 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. The code uses D3 v6 to load the CSV data, then applies `scaleLinear` and `extent` to set the scales, and renders the points as SVG circles with axes generated by `axisLeft` and `axisBottom`. Labels for the axes are appended as text elements, and the chart fills the entire viewport with a full-screen SVG canvas.

Mar 8, 2022

CSCE-5320 ICE-6 ICC Most Wickets

This chart displays the top 20 bowlers by wickets in ICC tournaments, using a horizontal bar chart rendered with SVG. Each blue rectangle represents a player’s total wickets, with scales and axes built using `scaleBand` and `scaleLinear`, and annotated via `axisBottom` and `axisLeft` callbacks. The data is loaded asynchronously from a CSV file using `d3.csv`, and the interface is constructed with React components and hooks like `useState` and `useEffect`.

Mar 8, 2022