N

NukaShravanKumar

@NukaShravanKumar·36 public vizzes

Loading thumbnail…

cardiovascualr_death vs positive_rate

This scatterplot visualizes the relationship between cardiovascular death rate and COVID-19 positive rate for different species, using a dataset loaded from a CSV via `d3.csv`. The SVG chart maps the first variable to the x-axis and the second to the y-axis using `d3.scaleLinear`, with tick marks from custom `AxisBottom` and `AxisLeft` components. Each data point is rendered as a circle using the `Marks` component, with tooltips showing formatted x-values. The React app, built with VIzHub and using D3 v7, also includes axis labels for both variables.

Loading thumbnail…

Fork of Line_Stroke_Death

This visualization displays the relationship between female smoker rates and life expectancy using data from COVID-19 vaccine statistics. The scatter plot transitions into a smooth line chart using D3’s line generator with curveBasis interpolation. Both axes employ d3.scaleLinear for quantitative scaling, with axis labels for female_smokers and life_expectancy. The SVG rendering includes styled orange strokes with significant thickness, while d3.csv loads the external dataset from a GitHub gist.

Loading thumbnail…

cardiovascular_rate in each country)

This visualization displays cardiovascular death rates across countries using a circle plot, with each mark representing a location and its mortality rate positioned along quantitative and categorical axes. The chart is built with Vega-Lite API functions like `markCircle` and `encode`, while data is loaded asynchronously from a remote CSV via D3’s `csv` method. The visualization integrates Vega, Vega-Lite, Vega-API, and tooltip handlers, rendering in SVG with custom axis styling for improved readability.

Loading thumbnail…

life_expectancy vs new_vaccinations

This scatter plot compares life expectancy and new vaccinations using data from a COVID-19 vaccine CSV file. The visualization uses D3.js (v5) within a React framework, rendering circles as SVG marks. Each circle’s position corresponds to life expectancy on the x-axis and new vaccinations on the y-axis, though the code assigns both axes to life expectancy. D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions create the axes, while species-based color mapping (yellow, green, brown) is applied, and the plot is titled “Scatter Plot”.

Loading thumbnail…

Fork of Hello VizHub-1

This example displays a centered, large-format “Hello VizHub!” message in a web page. It demonstrates how to integrate D3.js v5 with VizHub by loading the library from UNPKG and using the `select` API to target a `div` element. The text content comes from a local ES6 module, `myMessage.js`, which exports the message string. The page’s styling is handled by `styles.css`, setting the font size and alignment.

Loading thumbnail…

Fork of Pie Chart

This interactive pie chart displays life expectancy across continents, ranking the top ten entries from a CSV dataset loaded via d3.csv. The visualization uses d3.pie and d3.arc to generate SVG path segments, with d3.scaleOrdinal and schemeCategory10 assigning colors. Legends are appended as separate SVG groups, showing continent names and values with formatted numbers. Mouseover events log data to the console, while the chart is rendered within a React application using d3 v5.

Loading thumbnail…

Fork of Pie Chart

This interactive pie chart displays life expectancy across continents, ranking the top ten entries from a CSV dataset loaded via d3.csv. The visualization uses d3.pie and d3.arc to generate SVG path segments, with d3.scaleOrdinal and schemeCategory10 assigning colors. Legends are appended as separate SVG groups, showing continent names and values with formatted numbers. Mouseover events log data to the console, while the chart is rendered within a React application using d3 v5.

Loading thumbnail…

BMI by Age

This scatterplot visualization displays average Body Mass Index (BMI) across age groups, using data from the CDC Dataset. The BMI values are computed from weight and height measurements using the standard formula (weight in pounds divided by height in inches squared, multiplied by 703). The visualization bins the data by age using `d3.bin` and renders orange SVG rectangles whose heights represent the average BMI for each age range. Scales and axes are created with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, while the data is loaded via `d3.csv` from a GitHub gist.

Loading thumbnail…

Network Graph

This example shows a social network graph of people connected by friendship links. It uses D3 v6’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes, with drag and hover interactions. The SVG rendering reads node and link data from a local `graph.json` file, styling each person as a large light-green circle with a red label and blue directed edges that include arrow markers.

Loading thumbnail…

MuscleCars tree

This example displays a hierarchical tree of Muscle Cars, starting with the root node and branching through manufacturers like Ford and Dodge down to specific models. Built with D3 v3, it renders the structure as SVG nodes and links, using colors to distinguish hierarchy levels. The visualization includes interactive features such as click-to-collapse/expand nodes and zoom-and-drag navigation, powered by D3’s layout and behavior APIs. Data is loaded from a JSON file, with node styling and tooltips defined through CSS.

Loading thumbnail…

Activity 8 Country

This example displays a map of India using a Mercator projection. It fetches country boundary data from the world-atlas TopoJSON source, isolates the geometry for India, and renders it as a single SVG path using `d3.geoMercator()` and `d3.geoPath()`. The code highlights a minimal workflow for drawing a single country with D3.

Loading thumbnail…

Activity 8 Map

This example uses an SVG world map to visualize country boundaries. It renders a blue sphere as the Earth's base and fills each country with a light green color that changes to maroon on hover. The visualization supports panning and zooming through D3’s `zoom` event. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw the map, while TopoJSON’s `feature` method converts the world-atlas countries-110m GeoJSON-like data into useable features.

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013 using a smooth, basis-curved line and a light green filled area beneath it. The visualization loads CSV data from a GitHub gist, parses years as dates, and renders an SVG with axes, gridlines, and labeled tick marks. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and `area` and `line` generators with `curveBasis` to create the chart. The code also demonstrates importing from local ES6 modules, as shown in the `myMessage.js` file.

Loading thumbnail…

linechart

This example displays the cost of sales from 2000 to 2013 using a simple line chart. It renders the data as an SVG path with a light green stroke, plotting yearly values on a linear scale against a band scale for years. The visualization loads data from a local CSV file using `d3.csv` and builds axes with `d3.axisBottom` and `d3.axisLeft`. The code explicitly sets chart dimensions, margins, and labels, emphasizing a straightforward demonstration of D3 v7’s line generator and scales.

Loading thumbnail…

Pie Chart

A pie chart displays the distribution of student counts across academic majors at the University of North Texas. The visualization uses D3 v5 to load CSV data from a GitHub gist, with the `d3.pie` and `d3.arc` generators constructing the SVG-based segments. Each slice is colored via `d3.scaleOrdinal`, and labels formatted with `d3.format` appear inside the arcs. A legend beside the chart lists each major and its corresponding student count, rendered as SVG rectangles and text elements.

Loading thumbnail…

Reusable Scatter plot Activity 8

This example demonstrates an interactive scatter plot that cycles through different iris flower measurements on the x-axis, using petal width, sepal width, petal length, and sepal length in sequence with animation. The visualization loads the Iris dataset via D3’s `csv` function and uses a reusable `scatterPlot` module built with D3 v6, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. SVG circles are colored by species (setosa, versicolor, virginica) using custom color mappings, with a legend and axis labels rendered as SVG text elements. The animation updates the x-axis mapping every few seconds via `setInterval`.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes using D3 v7. Circles are positioned by horsepower (x-axis) and torque (y-axis), with size encoding highway MPG and color distinguishing car brands. The SVG rendering includes interactive tooltips on hover that display the make. Data loads from a CSV file, with scales handling size and ordinal color mapping, plus a legend explaining bubble size and make colors.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with species differentiated by symbol shapes from d3.symbol and d3.scaleOrdinal. A custom shape legend displays each species’ symbol, while d3.axisBottom and d3.axisLeft render labeled axes. The code loads data via d3.csvParse from a GitHub-hosted CSV and uses d3’s join pattern to update SVG elements.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot displays the Iris dataset, mapping petal length and petal width on the axes while coloring each point by species (setosa, versicolor, or virginica). The visualization encodes sepal length and width as the `rx` and `ry` radius properties of each circle, effectively creating ellipse-like markers. Built with D3 v6, the code loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scaling, and renders SVG circles with `selectAll` and `join`. Axis labels are added manually, and the plot fills the entire browser window.

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart displays the distribution of IMDb ratings across six movie genres, showing the proportion of titles in each rating bracket from below 5.0 to above 8.5. Hovering over a segment reveals a tooltip with the exact percentage for that rating level within the genre. Built with D3 v7, the visualization uses d3.stack to create the stacked bars, d3.scaleLinear and d3.scaleBand for axes, and d3.format for percentage values. Data comes from a CSV file, rendered as SVG elements with interactive mouse events.

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart ranking the populations of 20 countries in 2020, with bars colored green and labeled with formatted tick values. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and `csv` from D3 to load the data from a GitHub-hosted CSV file. Axes are custom components, and hovering over a bar displays a tooltip via the SVG `<title>` element.

Loading thumbnail…

Simple Social Network Graph

This example shows a small social network with five people (Alice, Bob, Charlie, David, and Emily) connected by four relationships. The force-directed layout uses `d3.forceSimulation` with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep nodes centered. Users can drag nodes via `d3.drag()`, which temporarily raises alpha for interactive repositioning. The SVG rendering styles links as gray lines and nodes as orange circles with labels.

Loading thumbnail…

Dynamic Tree with D3.js

This dynamic tree visualization displays a hierarchical dataset of animals, with categories for mammals, birds, and reptiles branching into individual species. Each node is represented as a colored circle with a text label, and the tree layout positions all elements using the D3.js `d3.tree` and `d3.hierarchy` APIs. The visualization employs `d3.linkHorizontal` to generate curved links between parent and child nodes, and it renders everything as SVG elements within a React-based HTML page. The example demonstrates data-driven color coding and a responsive SVG height that adapts to the tree's computed size.

Loading thumbnail…

USA Map

This choropleth map of the United States colors each state according to a numeric value loaded from a CSV file, using a linear lightred-to-red scale. The SVG rendering is built with d3.geoPath, which projects the US states from a GeoJSON file, while topojson.feature extracts the state features. State FIPS codes from the CSV are matched against the GeoJSON IDs to assign fills, with gray as the default for missing data. The visualization relies on d3.select, d3.csv, and d3.json for data loading.

Loading thumbnail…

World Map Visualization

This visualization presents a choropleth world map showing population counts by country, using a blue sequential color scale on an SVG-rendered Natural Earth projection. The code loads CSV population data and GeoJSON country boundaries, then applies d3.geoNaturalEarth1 and d3.geoPath to draw each nation. Countries without matching data appear in black. Population values are converted to numbers and mapped through d3.scaleQuantize with d3.schemeBlues[5] to encode magnitude visually across the geographic layout.

Loading thumbnail…

Reusable Scatterplot with D3.js

This example demonstrates a reusable scatterplot built with D3.js that visualizes two different CSV datasets, each containing X, Y, and Group columns. It shows how the same chart component can be dynamically updated by switching between datasets using a button. The chart renders as SVG, using d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.scaleOrdinal with d3.schemeCategory10 for colored groups. A legend and axis titles are included. The code relies on d3.csvParse to convert embedded CSV strings into data objects and d3.select to manage the SVG lifecycle.

Loading thumbnail…

Bubble Chart with D3.js

This example presents a bubble chart that visualizes product data from a CSV file, mapping Revenue to bubble radius and Profit to a secondary size influence, with colors assigned by category index. It uses D3.js v5 with an SVG rendering approach, reading data via `d3.csv()`, scaling values with `d3.scaleLinear()` and `d3.scaleOrdinal()`, and randomly positioning bubbles within the chart area. Each bubble includes a text label and a tooltip via appended `title` elements, while axis names for Revenue and Profit are added manually.

Loading thumbnail…

Beauty Product Sales Scatter Plot

This scatter plot visualizes the relationship between units sold and revenue for various beauty products, with each point labeled by product name. The chart uses D3 v5 to load the CSV data, scale linear axes, and render SVG circles and text labels. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while points are positioned using the `xScale` and `yScale` functions. The visualization highlights trends between sales volume and revenue, such as higher-revenue products not always having the highest units sold.

Loading thumbnail…

Beauty Products Scatter Plot

A scatter plot displays the price and rating of six beauty products, including lipstick, mascara, and foundation. Each dot represents a product, positioned by its price on the x-axis and rating on the y-axis. The visualization uses d3.csv to load data from beauty_products.csv, then applies d3.scaleLinear to map values to SVG coordinates. Circles are appended to the SVG with a fixed radius of five pixels, while text labels identify the axes as Price and Rating.

Loading thumbnail…

Stacked Bar Graph

This example shows a stacked bar graph where each bar represents a total value composed of three categorical segments, using data from an external CSV file. The visualization renders as an SVG chart with a light gray background, axes, a title, and a color-coded legend. It loads the dataset with `d3.csv`, transforms the columns into numeric values, and uses `d3.stack` to arrange the segments. The chart draws rectangles via SVG and scales the axes using `d3.scaleBand` and `d3.scaleLinear`, with colors assigned by `d3.scaleOrdinal` and `d3.schemeCategory10`.

Loading thumbnail…

Bar Graph

This example shows a bar graph of stock prices per year from 2011 to 2016, with bars colored steelblue and labeled axes for year and value. It loads data from a CSV file using `d3.csv`, converts string values to numbers, and renders the chart as SVG. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Bar widths are slightly reduced by 5 pixels, and x-axis labels are rotated 45 degrees for readability.

Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays population figures for ten countries in 2018, ordered alphabetically along the vertical axis with horizontal bars sized by population. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map the CSV data, with populations converted from thousands to absolute values. The SVG renders steelblue rectangles, and axes are appended to a translated group element. The page is styled with a plain CSS reset, and the chart loads data asynchronously via `d3.csv`.

Loading thumbnail…

ACT-7_TASK-1

This example shows a horizontal bar chart of 2020 population figures by country, rendered as an SVG in React. It imports D3 v5 modules for data loading (`csv`), scales (`scaleBand`, `scaleLinear`), and formatting, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the visualization. The chart uses a linear population axis and a banded country axis, with axis labels and tick formatting converting billions to a readable "B" suffix. Data is loaded asynchronously from a CSV source, and the visualization responds with a loading state until ready.

Loading thumbnail…

activity 6 task 3

This example demonstrates the use of D3.js in a minimal VizHub setup, showing how to import modules and manipulate the DOM. It displays a single text message, “Hello VizHub!”, centered on the page. The code imports the `select` function from D3 and a custom message from a local ES6 module. D3’s `select` method targets the `#message` div and sets its text content, while CSS handles the large, centered font styling. The example serves as a basic template for combining D3 with local and external modules.

Loading thumbnail…

Activity 6

This example demonstrates how to load and display tabular data using D3 v5. The page fetches a CSV file from a GitHub gist, then shows the first 10 rows as formatted JSON inside a black-styled `<pre>` element. The code imports `select`, `csv`, and `csvFormat` from D3, and uses the `csv` method with a promise to handle the asynchronous data retrieval. The visualization relies on an embedded SVG background image and includes an embedded YouTube video in the README.

Loading thumbnail…

Buddha

A generative Buddha image rendered as SVG via React. The composition layers mathematically derived diamond shapes that are randomly positioned, colored, and rotated to create a textured, procedural pattern. This surrounding field of colorful polygons is overlaid with a detailed, fixed SVG path of a Buddha silhouette, drawn with precise cubic Bézier curves. The piece combines algorithmic generation with structured vector illustration, all rendered through React’s component model and SVG’s path elements.