anith462@gmail.com

@anith462·36 public vizzes

Hours Spent by the Teenagers

This chart visualizes the average body mass index (BMI) of teenagers across different ages, using a binned histogram where each bar represents the average BMI for a specific age group. The visualization loads data from a CSV file and processes it to compute BMI values. The chart is rendered as an SVG using D3 v7, with linear scales for both axes, a time-based x-axis for age, and a y-axis for average hours spent. It demonstrates D3's bin, scaleLinear, scaleTime, axisLeft, axisBottom, extent, area, curveBasis, and sum APIs.

Jul 27, 2023

Loading thumbnail…

Data Visualization Short Presentation Task8

This example loads a CSV dataset and computes the average age of children per country, displaying the result as a JSON summary using D3’s `flatRollup` and `sum`. The code demonstrates asynchronous data fetching with `fetch`, parsing via `csvParse`, and type coercion of numeric fields. It uses D3 v7 for data aggregation and DOM updates, selecting a container to render the computed summary as preformatted text. The visualization highlights a simple data-processing pipeline without graphical charts, focusing on aggregation logic and state management.

Jul 27, 2023

Loading thumbnail…

Types of People watching the Netflix shows

Three donut charts compare the proportion of Netflix viewers with deposits by marital status: divorced, married, and single. Each chart uses `d3.pie` and `d3.arc` to render donut segments, with `d3.nest` aggregating the CSV data by the `y` (deposit) variable. Color distinguishes deposit status, while labels show percentages and hover tooltips display exact counts using SVG and animated opacity transitions. The data is fetched via the Fetch API from a GitHub gist.

Jul 27, 2023

Loading thumbnail…

Data Visualization Short Presentation Task6

This example presents a bubble chart comparing the average monthly hours audiences spend watching different show genres against their weekly average hours. Each bubble is colored by show category and sized according to highway MPG values from the CSV data. The visualization uses D3 v7 with SVG rendering, including tooltips on mouseover, axis labels, and a legend illustrating both bubble size and categorical color mapping. Hover interactions dynamically display the show make, while opacity changes highlight individual data points.

Jul 27, 2023

Loading thumbnail…

Data Visualization Short Presentation Task5

This stacked bar chart displays the distribution of Netflix show ratings across six genres, with each bar segment representing the percentage of audience ratings falling into categories from "below 5.0" to "above 8.5". The visualization uses d3.csv to load the data, d3.stack() to compute the stacked segments, and d3.scaleOrdinal with a custom color array for encoding rating categories. Interactive tooltips, styled with hover effects that change rectangle opacity, display exact percentages on mouseover, while axes, labels, and a legend help contextualize the data.

Jul 27, 2023

Loading thumbnail…

Data Visualization Short Presentation Task 4 Pie Chart

This pie chart displays Netflix viewership data by genre, with each slice representing the number of viewers for a particular Netflix category. Values are formatted in thousands and labeled inside the chart, while a legend on the right identifies each genre with a color-coded rectangle. The visualization uses D3 v5 to load CSV data via `d3.csv`, compute the pie layout with `d3.pie` and `d3.arc`, and render the chart as SVG paths and text. Colors are assigned using `d3.scaleOrdinal` with a custom range.

Jul 26, 2023

Loading thumbnail…

Assignment 2 Question 7_Tree Chart

This interactive tree chart displays hierarchical geographic data, showing continents branching into countries, then cities, and finally landmarks. The visualization uses D3.js version 3’s `d3.layout.tree` to compute the node positions and `d3.svg.diagonal` to draw the curved connecting links between parent and child nodes. Each node is rendered as an SVG circle with color-coded fills based on its hierarchy level, while text labels identify each entity. The animation feature uses D3 transitions with a 1000ms duration to smoothly update the tree layout, and the data is passed directly from a local JavaScript array.

Jul 22, 2023

Loading thumbnail…

Stacked Bar Chart

Stacked bar charts visualize the distribution of religious populations across fifteen countries. Each bar represents a country’s total population, segmented by religion, with a d3-tip tooltip revealing exact numbers on hover; hovering the color legend highlights a single religion across all countries. The D3.js code uses `d3.nest`, `d3.layout.stack`, and `d3.svg.axis` to stack and scale layers, with SVG animation-driven transitions. Data comes from an embedded CSV, rendered with an ordinal x-scale, linear y-axis, and category10 color scheme.

Jul 22, 2023

Loading thumbnail…

Assignment 2 Question 7_Social Network Graph

This interactive social network graph visualizes friendship ties among eight individuals, using a force-directed layout to position nodes and directional arrows to indicate relationship flow from source to target. The D3.js visualization loads JSON data containing person and friend node types, then applies `d3.forceSimulation` with link, charge, collision, and center forces to arrange the network. Users can drag nodes to reposition them, with hover effects highlighting selected circles. The SVG rendering displays uniformly orange nodes labeled with names, while arrowed links depict directed friendships between people like Jeh, Ali, and Peter.

Jul 22, 2023

Loading thumbnail…

United States Of America Map

This example displays a green choropleth map of the United States rendered as an SVG. It loads world country boundaries from the world-atlas TopoJSON dataset and isolates the U.S. geometry using `topojson.feature` and a name-based lookup. The map is projected with `d3.geoMercator` and drawn using `d3.geoPath` inside a D3 v5 script, with all paths styled via CSS.

Jul 22, 2023

Loading thumbnail…

Visualization of WorldMap Based on Categories

This example visualizes world countries on a natural Earth projection, colored by economic category from the World Atlas dataset. The map supports zoom and pan, with hover effects that highlight individual countries. It uses D3 v5 for SVG rendering, combining `d3.geoPath` for map geometry, `d3.geoNaturalEarth1` for projection, and `d3.zoom` for interaction. TopoJSON converts the country boundaries, while TSV metadata (shared via `loadAndProcessData`) enriches each feature with names and economy values, which drive the ordinal blue color scale.

Jul 21, 2023

Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot visualizes penguin measurements from a CSV dataset, cycling through four attributes on the x-axis while body mass remains fixed on the y-axis. The SVG renderer uses reusable D3 modules and scales to display colored circles by species, with a legend and rotating axis labels. Data loads via d3.csv from a GitHub gist, while d3.scaleLinear, d3.axisLeft, and d3.axisBottom construct the plot, and setInterval triggers the animation.

Jul 21, 2023

Loading thumbnail…

Bubble Chart

This bubble chart compares cereal products by manufacturer, plotting sodium levels on the x-axis and cereal rating on the y-axis, with bubble size encoding calorie content and color distinguishing manufacturers via a d3.scaleOrdinal and the d3.schemeSet1 color palette. The visualization renders as an SVG using D3 v7, loading data from a CSV file and including custom legends for both bubble size and manufacturer color. Axes are generated with d3.axisBottom and d3.axisLeft, and the chart includes labeled titles for clarity.

Jul 21, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, plotting flipper length against body mass for three species—Adelie, Gentoo, and Chinstrap—with each point colored by species and sized with a fixed radius. The chart also encodes bill dimensions as elliptical axes (rx and ry) on each circle, a feature unique to this example. It loads CSV data from a GitHub gist and renders SVG using D3 v6, employing `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv`. The code calculates plot dimensions from the window size and uses an async main function to fetch and draw the data.

Jul 21, 2023

Loading thumbnail…

Bar Chart

This bar chart displays the weight of 20 car models, using a horizontal layout where each car name is listed on the y-axis and its corresponding weight extends along the x-axis. Built with React and D3.js v5, it employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering bars as SVG rectangles. The chart loads data from a CSV file via a custom `useData` hook, includes formatted tick labels that convert gigabytes to billions, and provides tooltips on hover.

Jul 21, 2023

Loading thumbnail…

Network Graph

This visualization shows a social network graph of personal relationships, with nodes representing people and directed links indicating friendships. The graph uses D3’s force simulation (`d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter`) to position the nodes, which appear as large green circles with red labels. Users can drag nodes to rearrange the layout, and arrows on the links indicate the direction of each connection. The data comes from a local `graph.json` file, and the SVG is rendered with custom markers for the arrowheads.

Jul 19, 2023

Loading thumbnail…

MuscleCars tree

A hierarchical tree visualization displays the relationship between muscle car models, with nodes for Ford and Dodge branching into their respective sub-models like Mustang, Torino, Charger, and Challenger. The example loads data from a JSON file and uses D3.js v3 to render the tree layout. Nodes and links are drawn with SVG, and the visualization includes interactive features like zooming and tooltips. The different car types are distinguished by color, and a drop-shadow filter is applied to the rectangular nodes for visual depth.

Jul 19, 2023

Loading thumbnail…

Activity 8 Country

This example displays a map of India rendered as an SVG path using D3. The code loads world-atlas TopoJSON data from a CDN and extracts the India geometry via `topojson.feature`. A `d3.geoMercator` projection with `fitSize` sets the map’s scale and position, and `d3.geoPath` generates the path. The visualization demonstrates D3’s geographic mapping capabilities with SVG output.

Jul 19, 2023

Loading thumbnail…

Activity 8 Map

This example presents an interactive world map using a sphere outline and country boundaries. The map is rendered in SVG using D3 v5 with a `geoEquirectangular` projection and `geoPath` to draw geographic features. Country data comes from the `world-atlas` TopoJSON file, converted to GeoJSON with the `feature` method. Users can pan and zoom the map via D3's `zoom` behavior, while hovering over countries changes their fill color to maroon.

Jul 19, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, with a green filled region beneath a black curved line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` to create the smoothed path. The SVG rendering includes gridlines via `axisBottom` and `axisLeft`, with tick labels formatted using `format('.3s')`. Data is loaded as CSV from a GitHub gist, parsed with `csv()`, and dates are converted using the native `Date` constructor. Axis labels and titles are styled via CSS classes.

Jul 19, 2023

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, with yearly values plotted as a thick light-green line. The chart uses an SVG rendering with D3 v7, employing `d3.scaleBand` for the categorical year axis and `d3.scaleLinear` for the cost axis. Data is loaded from a local CSV file via `d3.csv`, and the line path is generated with the `d3.line` API, with red axis labels and tick styling defined in embedded CSS.

Jul 19, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the count of students from each major at UNT, with each slice labeled and color-coded. It loads a CSV dataset from a GitHub gist, processes it with `d3.csv`, and renders the chart using D3’s `pie` and `arc` generators. The visualization includes proportional slice labels, a legend showing major names and student counts, and uses `scaleOrdinal` for color mapping. Slices are positioned with arc centroids, and the chart is drawn as SVG elements.

Jul 19, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This example presents an animated scatter plot of the Iris dataset, cycling through different pairings of sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each point is colored by species, with a legend and explicit axis labels that update with the animation. The visualization is built using D3.js version 6.7.0, loading data via the `csv` function and leveraging a custom `scatterPlot` module that uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The SVG rendering is refreshed on an interval, updating axes and labels dynamically.

Jul 19, 2023

Loading thumbnail…

Bubble chart

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG and car make, respectively. The visualization includes interactive tooltips on hover, a legend for MPG values, and a color legend for makes. It uses D3 v7, loading data from a CSV file, and builds the SVG with scales like `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`.

Jul 19, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot shows the Iris dataset, mapping petal length against sepal length while using different point shapes to distinguish between plant species. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol()` to generate the glyphs. A shape legend is rendered via a custom module, with axis labels added through helper functions. The data is loaded as CSV from a GitHub repository and parsed using `csvParse` before being drawn.

Jul 19, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This example displays a scatter plot of the Iris dataset, mapping petal length and width to the x and y axes while coloring each point by species (setosa, versicolor, or virginica) using skyblue, lightgreen, and orange. The visualization also encodes sepal length and width as the rx and ry attributes of each circle, though these do not affect the rendered shape since the radius is fixed. It loads CSV data from a GitHub URL using `d3.csv`, applies linear scales via `scaleLinear`, and renders axes with `axisLeft` and `axisBottom`. The code uses D3 v6 through a UNPKG script import with SVG rendering.

Jul 19, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart displays the distribution of IMDb movie ratings across six genres, showing the proportion of films falling into five rating bands from below 5.0 to above 8.5. The visualization uses D3 v7 to load the CSV data, apply `d3.stack()` for the layered bars, and `d3.scaleOrdinal` for color coding. A custom tooltip appears on mouseover to display exact percentages, while the chart includes axes, labels, and a legend rendered as SVG elements.

Jul 19, 2023

Loading thumbnail…

Activity 7

This example displays a horizontal bar chart of population data for 20 countries in 2020, using green bars sorted by country name along a categorical y-axis and a linear x-axis with tick labels formatted in billions. Built with React and D3 v5, it loads CSV data via `d3.csv`, scales with `scaleBand` and `scaleLinear`, and renders SVG bar marks, axes, and a title using local ES6 modules for reusable axis and mark components.

Jul 19, 2023

Loading thumbnail…

BMI by Age

This chart displays the average Body Mass Index (BMI) for individuals across different ages, using a binning approach. The data is loaded from a CSV file and processed to calculate BMI from height and weight. The visualization renders as a series of orange bars, one for each age bin, with the height of each bar representing the average BMI. The implementation uses D3 v7, specifically leveraging the `csv`, `bin`, `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `sum` functions. A custom D3 selection and join operation appends the rectangles to the SVG canvas.

Jul 19, 2023

Loading thumbnail…

Transforming Data

This example demonstrates data transformation using the Iris dataset, showing how raw CSV data can be processed into derived statistics. A bar chart summarizes the average sepal length for each iris species, calculated using `d3.flatRollup` and `d3.sum` from D3 v7. The visualization loads external data via `fetch`, parses it with `d3.csvParse`, and renders the computed summary as formatted text in a `<pre>` element. It also illustrates VizHub's ES6 module system with imports from both D3 and local files.

Jul 19, 2023

Loading thumbnail…

Activity 6

Activity 6 displays a large base64-encoded JPEG image rendered inside an SVG pattern, filling the viewBox at full resolution. The page uses D3 v5 to load CSV data from a GitHub Gist and prints the first ten rows as formatted JSON in a `<pre>` element. It imports `select` and `csv` from D3, demonstrating local ES6 module imports alongside the global D3 script. The rendering combines static SVG/WebGL imagery with interactive data-loading output.

Jul 12, 2023

Loading thumbnail…

DV_Activity6

This example demonstrates a minimal D3.js workflow by rendering a centered text message on an HTML page. It loads D3 v5 via UNPKG and uses the `select` API to target the `#message` div, setting its text content from a local ES6 module. The styling is handled through a separate CSS file. The visualization serves as a template for integrating D3 with modular JavaScript and external dependencies.

Jul 12, 2023

Loading thumbnail…

Assignment 1-Task10

This example loads a Human Development Index CSV from a GitHub gist and displays the first 10 rows as formatted JSON in a web page. It uses D3 v5’s `csv` and `csvFormat` functions to fetch and process the data, and `select` from D3 to append `<pre>` elements to the body. The visualization renders as static SVG text output, demonstrating basic data loading and inspection with a minimal interface.

Jul 3, 2023

Loading thumbnail…

activity -6

This example displays the text "Hello VizHub!" centered in the browser window using the D3.js library (v5). The visualization demonstrates ES6 module imports, pulling the message from a separate local file and setting it on the page via D3's selection and text methods. The code loads D3 from a CDN and styles the output with external CSS.

Jun 26, 2023

Loading thumbnail…

activity6

This example demonstrates how to render a simple text message using D3.js within the VizHub framework. The page loads D3 v5 from a CDN and uses the `select` API to target a div with the id `message`, setting its text content from a local ES6 module. The module `myMessage.js` exports a string, and the import statement in `index.js` ties the data to the visualization. Styling is applied via an external CSS file, centering the text at a large font size. The example highlights basic D3 DOM manipulation and module imports without any data visualization or advanced rendering techniques.

Jun 26, 2023

Loading thumbnail…

Buddha Overlap

A dense, exploratory SVG visualization renders a grid of overlapping diamond shapes in bright, randomized colors over a black background. The piece layers hundreds of polygons, each with randomized positions and fill values generated through nested array maps, creating a chaotic, shimmering field. A large, intricate Buddha silhouette path is overlaid on top, anchoring the composition and contrasting with the abstract generative pattern. The example uses React to render SVG elements, with the Buddha image drawn from an inline path.

Jun 7, 2023