N

nithinreddypinikesi@my.unt.edu

@Nithinreddy111·16 public vizzes

Loading thumbnail…

Fork of React & D3 Starter

This interactive network uses a force-directed layout to visualize the connections between Tollywood actors and their movies. Actors appear as orange circles and movies as sky-blue rounded rectangles. The graph is built with D3 v7, using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute node positions, while `drag()` lets users move actors and movies. Edges are drawn as straight lines between connected nodes, and labels are placed below each node. The implementation uses SVG for rendering and an inline dataset.

Loading thumbnail…

Tree 1

This example shows a hierarchical tree visualization of animal categories, with orange, sky blue, and light green circular nodes representing animals, mammals, birds, and fish. The code uses `d3.hierarchy` to structure the nested data and `d3.tree` to compute the layout positions. SVG lines connect parent-child nodes while circles and text labels display each element, rendered directly within an SVG container.

Loading thumbnail…

California Map

This example displays a choropleth map of California counties, colored with a sequential blue scale according to values mapped to each county’s FIPS code. The visualization uses data from the `us-atlas` package, loading county boundaries via `d3.json` and converting them with `topojson.feature`. The map is rendered using `d3.geoPath` with an Albers projection, and the color scale is defined with `d3.scaleSequential` and `d3.interpolateBlues`.

Loading thumbnail…

Global Internet Usage

This visualization displays a global map highlighting internet usage percentages for select countries, with the United States, India, China, Germany, Brazil, and Nigeria shaded in varying blues based on their values. It renders geographic boundaries using D3’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw SVG paths from TopoJSON data fetched from the world-atlas package. A sequential color scale, `d3.scaleSequential` with `d3.interpolateBlues`, maps usage percentages to fill intensities, while unlisted countries appear gray. The map loads data asynchronously via `d3.json` and uses minimal styling with thin strokes.

Loading thumbnail…

nithin question 4

This example shows an area chart of average depression percentages across World Bank income groups (Low, Lower-Middle, Upper-Middle, High), using data from a CSV file loaded via d3.csv. The chart renders an SVG with a light blue filled area overlaid with a dark blue line and circles marking each aggregated point. It uses d3.scalePoint for the x-axis, d3.scaleLinear for the y-axis, and d3.area alongside d3.line generators. Axis labels and a title are added via SVG text elements.

Loading thumbnail…

nithin question 3

A line chart shows the average depression percentage for four income groups, ordered from Low to High, based on a mental health CSV dataset. The SVG rendering uses D3 v7 scales (`d3.scalePoint`, `d3.scaleLinear`) and the `d3.line` generator to draw a steelblue path, with red circles and value labels marking each computed average. The chart is built with D3’s DOM selection and appended to an HTML container, including axis labels and a title.

Loading thumbnail…

nithin question 2

This pie chart shows the distribution of countries across regions from a mental health dataset, displaying the count of countries in each region as labeled slices with a corresponding legend. The visualization uses d3.csv to load the data, d3.rollup to aggregate country counts by region, and d3.pie with d3.arc to generate the pie geometry. Labels are positioned inside each slice using labelArc centroids, while a separate legend group lists each region with its count. The SVG is rendered in a plain HTML page with D3 v7, using a categorical color scale (d3.schemeCategory10) to distinguish regions.

Loading thumbnail…

nithin question 1

This scatter plot shows the relationship between daily social media hours and anxiety percentage, with points colored by income group. Built with D3 v7, the reusable `scatterPlot()` function configures axis labels, scales, and a Tableau10 ordinal color scheme, then appends an SVG with circles and axes. Data loads from a CSV via `d3.csv`, tooltips appear on hover, and the chart renders within an HTML container using basic D3 selection and scaling APIs.

Loading thumbnail…

Fork of Line Chart - Trend

This line chart shows a quantitative trend over time, plotting five data points from 2018 to 2022 where the value rises steadily from 20 to 90. The visualization uses D3 v7 within an HTML page, constructing an SVG with linear scales for both axes via `d3.scaleLinear` and `d3.extent`. The line is drawn as an SVG path using the `d3.line` generator, with a blue stroke. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, and the chart is labeled “Year” and “Value” on the respective axes.

Loading thumbnail…

barchart

This bar chart displays global sales for video game titles. The code uses D3 v7 to load CSV data, map data to x and y scales, and render SVG rectangles as bars. The chart includes axis labels, a title, a legend, and rotated x-axis tick labels. The data is loaded from a remote gist, and the visualization is structured with a large chart container and D3's margin, scaleBand, and scaleLinear functions.

Loading thumbnail…

scatter plot

This scatter plot visualizes the relationship between population and GDP per capita for countries in 2025, using logarithmic scales on both axes. The code loads CSV data with d3.csv, applies jitter to each circle’s position to reduce overplotting, and renders the chart as an SVG. It uses d3.axisBottom and d3.axisLeft, with scaling via d3.scaleLog, and includes title, axis labels, and a legend.

Loading thumbnail…

combined chart

This combined chart displays voting data over time, using a bar chart to show Democrat votes and overlaid line charts for Republican and Independent votes. The visualization is rendered as an SVG graphic using the D3.js library, with a clean white background and labeled axes. Data is loaded from a CSV file and parsed to numeric values, then scaled using D3's band and linear scales. A legend and gridlines help distinguish the data series, while the x-axis labels are rotated for readability.

Loading thumbnail…

Multi series

A multi-series line chart displays voting trends over time, comparing Democrat, Republican, and Independent vote counts. Three colored lines, blue, red, and green, trace the data across the years, with gridlines and labeled axes for readability. The visualization uses D3 v7 (d3.csv, d3.line, d3.scaleLinear, d3.axisBottom, d3.axisLeft) to load CSV data from a GitHub gist and render the chart as SVG elements. A legend identifies each party line for the viewer.

Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes the relationship between population in 2025 and GDP per capita for various countries. Each circle represents a country, with its horizontal position determined by population and vertical position by GDP per capita. The visualization uses D3 v7 to load CSV data from a GitHub gist, applies linear scales for both axes, and renders SVG circles with axis labels and a legend. The code demonstrates `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for data binding and chart construction.

Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes global sales figures for a dataset of video game titles, with each bar representing a single game’s total sales in millions. Built with D3 v7, it renders an SVG chart using `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axis labels and a legend. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and x-axis tick labels are rotated and thinned to every tenth entry for readability.

Loading thumbnail…

ice05 by Nithin

This dark-themed dashboard summarizes a cricket dataset, presenting total balls, runs, and wickets in summary boxes alongside a table of the first 20 data rows. It uses the JavaScript `fetch()` API to load a CSV file from a GitHub Gist, parses the text by splitting rows and columns, and computes aggregate sums from specific columns. The page is styled with basic CSS for a dark background, and the data is rendered into an HTML table using string concatenation and `innerHTML`. No external visualization libraries are employed.