N

nagarajuobbineni

@nagarajuobbineni·16 public vizzes

Loading thumbnail…

ICE-8 Social Network Graph (Nagaraju Obbineni)

A social network graph visualizes connections among nine named individuals, with nodes and links displayed in an animated SVG layout. The graph uses force-directed positioning via `d3.layout.force` from D3 v4, with node positions updated on each tick. Circles represent people, labeled with their names, while link thickness reflects connection weight. Hovering over a node triggers a yellow tooltip showing the person's name, implemented with mouseover and mousemove events. Data comes from a local `graph.json` file, and the visualization supports click-and-drag node repositioning.

Loading thumbnail…

ICE-8 Animal Classification - Nagaraju Obbineni

This example presents an interactive hierarchical tree that classifies animals into vertebrates and non-vertebrates, with further subdivisions like warm-blooded and jointed legs. The visualization uses d3.v3’s tree layout and SVG rendering with animated transitions. Node colors represent classification types, and click interactions expand subtrees. The data is loaded from a JSON file, and the code applies d3.behavior.zoom for panning and zooming.

Loading thumbnail…

ICE 8 - India Map

This example displays a map of India rendered as an SVG, with the country's administrative regions filled in green and outlined in black. It uses the D3 library's `geoNaturalEarth1` projection and `geoPath` to draw the geometry, while loading the map data from a TopoJSON file. The map is centered and scaled using the `projection.center` and `projection.scale` methods, and a sky-blue sphere is drawn behind the country for visual contrast.

Loading thumbnail…

ICE 8 - World Map

A world map displays countries as green filled polygons with black strokes on a sky blue circular backdrop. The visualization loads geographic data from a local `worldmap.json` TopoJSON file and projects it using the Natural Earth projection. D3 v5’s `select`, `json`, `geoPath`, and `geoNaturalEarth1` APIs, combined with TopoJSON’s `feature` method, render the country boundaries as SVG paths within a 960 by 500 pixel viewport.

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes crime statistics across Texas cities from January to September using an interactive 3D bar chart rendered with the d3-x3d library and X3DOM. The multi-series chart displays six crime categories—Murder, Car_Theft, Child_Abuse, Accidents, Cyber_Crimes, and Burglary—as colored bars in a three-dimensional space. Data is loaded from a remote CSV file using d3.csv, parsed into a nested format, and passed to the d3.x3d.chart.barChartMultiSeries() component. The visualization relies on d3.v5 for data handling and the d3-3d plugin to project 2D data into 3D coordinates.

Loading thumbnail…

Bonus ICE - 3D Scatter Plot

This 3D scatter plot displays cricketer data by age, height, and weight, with points colored by player role (batsman, bowler, or all-rounder). The visualization uses Plotly.js’s `scatter3d` trace type, mapping the three numerical attributes to the x, y, and z axes. Point colors are assigned based on role, and the axes feature custom background and grid colors. Data is loaded from a CSV file via D3.js’s `d3.csv` function, demonstrating a combination of Plotly for 3D rendering and D3 for data parsing.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart uses the Highcharts library with its highcharts-3d.js extension to visualize the total number of six different crime types (murder, car theft, child abuse, accidents, cyber crimes, and burglary) across seven cities near UNT, including Denton, Irving, and Dallas. The chart renders stacked, three-dimensional columns with a depth setting, allowing comparison of both crime categories and city totals. Data is embedded directly in the series arrays, with x-axis categories for cities and a y-axis measuring total crimes.

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes reported crimes across Texas cities from January to September as an interactive 3D bar chart, with each city represented by a cluster of colored bars for each month. The visualization uses D3.js v5 for data loading and scales, while the d3-x3d plugin and the d3-3d library generate the 3D geometry and rendering via X3DOM. The CSV dataset is parsed with d3.csv, and the chart is created with `d3.x3d.chart.barChartMultiSeries()`, displaying crime counts on the axes.

Loading thumbnail…

ICE - 6 Take 2 Scatter Plot

The scatter plot visualizes the relationship between age and weight, with each circle colored by player role: blue for batsmen, red for bowlers, and yellow for others. Data is loaded from a remote CSV file and rendered as an SVG. The implementation uses D3 scales (`scaleLinear`), axes (`axisLeft`, `axisBottom`), and data joins to draw the circles dynamically. Axis labels appear in cyan text, and the chart fills the full browser window. D3 version 6.7.0 is used throughout.

Loading thumbnail…

ICE - 7 Scatter Plot

This scatter plot visualizes the relationship between cricket players' age and height, with weight available as tooltip data. It uses the vega-lite-api to define a circle mark with opacity, encoding Age and Height as quantitative fields on the x- and y-axes. The visualization loads data from a CSV file using d3.csv and renders with vega-lite, applying custom axis and label styling from the config.

Loading thumbnail…

ICE-7 - Area_Graph

This interactive area chart displays car registrations in Austin, Texas from 2012 to 2021, with a red rule marking the hovered fiscal year and text labels showing exact car counts. Built using Vega-Lite API and D3.js, the visualization layers an area mark with circles, applying a single selection on x-encoding with mouseover events to highlight the nearest data point. Data is loaded asynchronously from a GitHub-hosted CSV file using D3’s csv parser, and the chart is rendered as SVG with tooltip support. The configuration customizes axis styles and label colors for readability.

Loading thumbnail…

ICE-7 Line_Graph

This line graph visualizes car registrations in Austin, Texas from 2012 to 2021, using fiscal year on the x-axis and number of cars registered on the y-axis. The chart layers a blue line with circles at each data point, and adds interactive features through vega-lite API selection and hover events, displaying rule-based crosshairs and value labels. The visualization uses d3.v5 for CSV data loading from a GitHub-hosted Austin car registration dataset, with Vega and Vega-Lite handling rendering and tooltips. Custom color and font styling are applied through a config file.

Loading thumbnail…

ICE - 7 Pie Chart

A pie chart breaks down car registrations in Austin, Texas by fiscal year from 2012 to 2021, with each slice sized by the number of cars and a legend listing each year. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs, along with SVG paths, to render the segments and legend. Animated hover effects use `transition` to show a tooltip with the year’s registration count, driven by mouseover and mouseout events. Data is loaded asynchronously from a GitHub gist CSV via `d3.csv`.

Loading thumbnail…

ICE 6: Scientific Data Visualization

This example visualizes the total marks of 17 students in a semester as a horizontal bar chart. The SVG rendering uses React and D3 v5, with data loaded from a CSV file via `d3.csv`. Scales include `scaleBand` for student names on the y-axis and `scaleLinear` for marks on the x-axis, while `xScale.ticks()` generates gridlines, and colored rectangles represent each student’s score.

Loading thumbnail…

CSCE 5320 ICE - 5 Nagaraju Obbineni

This example loads a CSV dataset of US universities and courses and displays a summary of its size, row count, and column count in a styled `<pre>` element. It uses `d3.csv` to asynchronously fetch and parse the remote CSV file, then computes the file size with `d3.csvFormat` and reports the number of records and fields. The page also embeds an SVG image of a crying face. The dataset link is provided, and the overall layout uses custom CSS for a yellow heading and orange background.

Loading thumbnail…

Face created by Nagaraju Obbineni

This example draws a stylized human face using only SVG shapes. It shows a yellow background, a white face with a blue radial gradient, black ears with linear-gradient inner circles, eyes with retinas, angular polygons for eyebrows, a nose, and a mouth. The rendering relies on inline SVG elements including `<ellipse>`, `<circle>`, `<polygon>`, and `<rect>`, with gradients defined in `<defs>`. The artwork is built entirely from static vector primitives, with no dynamic data or interaction.