N

Nagateja99

@Nagateja99·41 public vizzes

Loading thumbnail…

DV2_7.1_graph

This graph visualization displays a network of personal relationships among eight named individuals, with orange lines representing connections between nodes. The data contains eight nodes, all sharing the same group value, and eight undirected links with varying weights, such as a stronger connection with value 5 between Vandana and Uday. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the large purple circular nodes in an SVG canvas. Nodes are interactive, supporting drag-and-drop via d3.drag, and respond to mouseover and mouseout events by changing their stroke color to green.

Loading thumbnail…

DV_7.2 Names tree

This interactive tree diagram visualizes a family hierarchy, with each node representing a person and colored by their generation type. The tree expands and collapses on click, and users can pan and zoom the view. Built with d3.v3, the visualization uses custom node rectangles with embedded text, link arrows, and tooltips to show relationship details. The layout is computed using a custom `d3.layout.tree` function, and the data comes from a `family-data.json` file.

Loading thumbnail…

DV2_6.2_Regional Map

This example displays a choropleth-style regional map of Swedish counties, rendered as an SVG using React and D3 v5. It shows the geographic boundaries of each county filled with a teal color, while interior borders are highlighted with a lighter stroke. The code loads TopoJSON data from a GitHub gist, converts it to GeoJSON using `topojson.feature` and `topojson.mesh`, and projects it with `d3.geoMercator` fitted to the viewport via `projection.fitExtent`. Paths are drawn using the `d3.geoPath` generator.

Loading thumbnail…

DV2_7_Tree

This example displays a hierarchical tree of car models, from the root "car" node down to specific models like "Toyota" and "XUV500". The visualization uses a D3.js v3 layout algorithm to position rectangular nodes, with each node's color determined by its `type` field. Interactive pan and zoom capabilities are implemented through `d3.behavior.zoom`. The tree structure is loaded from a JSON file via `d3.json`, and the rendering includes animated transitions when nodes are clicked, shown as SVG paths and rects.

Loading thumbnail…

DV2_6_World Map

This interactive map displays world countries using a natural Earth projection, with hover highlighting and zoom/pan capabilities. The visualization loads geographic data from the World Atlas TopoJSON files and renders country boundaries as SVG paths via d3.geoPath. Country names are joined from the accompanying TSV dataset using ISO numeric codes, displayed as tooltips through SVG title elements. The d3.zoom behavior enables interactive exploration, while the color scheme distinguishes landmasses, oceans, and hover states. The code leverages d3.json, d3.tsv, and topojson.feature for data processing and d3.geoNaturalEarth1 for the projection.

Loading thumbnail…

DV2_5_Reusable scatter plot

This reusable scatter plot visualizes COVID-19 rolling averages across US states, with 7-day average deaths per 100k on the x-axis and cases per 100k on the y-axis. It uses D3.js version 6.7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data from the NY Times COVID-19 dataset. The chart’s core logic is encapsulated in a custom `scatterPlot()` function following the Towards Reusable Charts pattern, allowing configurable width, height, margins, and data accessors. Circles are rendered via SVG, styled with the Share Tech font.

Loading thumbnail…

Dv2_5_Reusable Scatter plot

A reusable scatter plot displays the relationship between COVID-19 deaths and cases per 100,000 people across US states, using rolling averages from the NY Times dataset. The visualization is constructed with D3.js version 6.7.0, employing the scatterPlot function to map data points as SVG circles with configurable radius and margins. The chart is rendered SVG in a browser, scaling axes via D3's scaleLinear, and using extent to compute data domains. Axis labels are generated with axisLeft and axisBottom, while the data is loaded asynchronously with D3's csv parser.

Loading thumbnail…

DV2_5 _Bubble Chart

This bubble chart plots average horsepower against average torque for various car brands, with each circle's size encoding the brand's highway miles per gallon, and its color encoding the brand name. Built with D3.js, the visualization reads from a CSV file and implements a custom legend for the categorical color mapping. Circle positions are defined by the x- and y-axes, which use linear scales, while the size scale is also linear. Interactive tooltips appear on mouseover, showing the car make. The chart is rendered as an SVG with transitions for tooltip display.

Loading thumbnail…

Dv2_ScatterPlot

This scatter plot visualizes the relationship between miles per gallon and horsepower for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Each point represents a vehicle, colored by its origin and sized by weight, with tooltips showing the car’s name. The visualization uses the vega-lite-api library to build the chart, registers vega and vega-lite for rendering, and loads data via d3.csv. The chart fills the browser window with a custom config for axes and label styling.

Loading thumbnail…

DV2_Stacked bar chart

This interactive stacked bar chart displays earthquake magnitude data across US states for selected years, with each bar broken into three magnitude-range segments. A dropdown menu switches between years, triggering smooth 750-millisecond transitions that update bar positions, axis scales, and total value labels. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.stack` to structure and draw the layers, while `transition().duration()` animates the state changes based on the CSV data.

Loading thumbnail…

Dv2_task2_Stacked Bar Chart

This stacked bar chart displays NBA player performance across 30 teams, showing each player's games played split into wins and losses. A dropdown menu lets viewers switch between teams, updating the bar chart to display that team's roster. The visualization uses React with reusable components for axes and marks, while D3 v5 functions like `scaleLinear`, `scaleBand`, and `scaleOrdinal` handle the data mapping and color encoding. Data comes from a CSV file loaded via D3's `csv` method, rendered as SVG rectangles with hover tooltips showing exact game counts.

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes religious population distributions across five countries using data from a CSV file. Each bar segment represents a religious group, with colors assigned via d3.scale.category10 and a legend generated using d3.legend. Hovering over legend items highlights the corresponding layer and displays tooltips with d3-tip. The chart uses d3.layout.stack, d3.nest, and ordinal/linear scales, rendered with SVG and interactive animations.

Loading thumbnail…

Cost of Mobiles

A horizontal bar chart displays the cost of various mobile phone models, ranging from budget Nokia to premium iPhone 14 Pro. Each bar’s length encodes the price from the `data.csv` file. The visualization uses D3 v7 with `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for axes, and includes interactive tooltips on hover. Data is loaded via `d3.csv`, and the SVG is rendered in an HTML page with a separate CSS file.

Loading thumbnail…

Fork of DV Assignment 2

This visualization displays a horizontal bar chart comparing the number of users across different applications. Each bar’s length represents the user count for a specific application, with data loaded from a remote CSV file using d3.csv. The React-based implementation uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering bars as SVG rectangles. Axes are generated through custom React components, and d3.format with SI prefixes formats tick labels into readable abbreviations.

Loading thumbnail…

DV Assignment 2

This example shows a horizontal bar chart of application names against their number of users, sourced from a CSV file, with data limited to the first 50 records. The visualization uses React components and d3.scaleBand and d3.scaleLinear for scaling, while d3.max and d3.format handle data aggregation and tick label formatting. Bars are rendered as SVG rects with tooltips, and custom AxisBottom and AxisLeft components place ticks and labels. The CSV is loaded asynchronously with d3.csv, and styling is applied via CSS classes for ticks and marks.

Loading thumbnail…

Assignment2 Q1

This example demonstrates how to load and display a message using D3.js version 5 within a VizHub project. It shows a simple text output centered on the page by combining D3’s `select` function with a local ES6 module import. The code imports `message` from `myMessage.js` and sets the content of the `#message` div to “Hello VizHub!”, while styling the text with CSS. The visualization uses D3’s core selection API to manipulate the DOM, illustrating basic setup for modular ES6 imports and external library loading via UNPKG.

Loading thumbnail…

Network Graph

This example visualizes a social network as a force-directed graph, displaying ten people as nodes connected by lines that represent friendships. Nodes are rendered as large light-green circles with names, and each link includes an arrow marker indicating direction. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, and supports dragging via `d3.drag`. Data comes from a local `graph.json` file, and the visualization is built with D3 v6, rendering entirely in SVG.

Loading thumbnail…

MuscleCars tree

This example displays a hierarchical tree of muscle car models, from the root "Muscle Cars" down to specific trims like the Hellcat and SRT. It uses a D3 v3 tree layout and SVG rendering to show the structure, with nodes colored by type. The visualization is interactive, featuring click-to-expand functionality, zooming via `d3.behavior.zoom`, and animated transitions. Rectangles with drop shadows represent nodes, while colored arrows on links indicate direction; data is loaded from a JSON file.

Loading thumbnail…

Activity 8 Country

This example displays a map of India, rendered as a single SVG path using a Mercator projection fitted to the country’s boundaries. The code loads the World Atlas TopoJSON dataset, extracts the India geometry, and draws it with D3’s `d3.geoMercator` and `d3.geoPath` functions. It reads geographic data from a remote JSON file and projects it to a 960 by 500 pixel canvas.

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using an equirectangular projection, with countries filled in light green and hover states highlighted in maroon. Built with D3 v5 and TopoJSON, it loads world-atlas country data from a CDN and renders the map as SVG paths. The visualization supports pan-and-zoom through d3.zoom, which applies transforms to the entire SVG group.

Loading thumbnail…

Area Chart Activity 8

This example visualizes the cost of sales from 2000 to 2013 using an area chart with a smooth curve. Data is loaded from a CSV file and parsed to extract year and cost values. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` to render the chart in SVG. The area under the line is filled with light green, while the line itself is black, with red tick labels and orange axis labels for emphasis.

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, sourced from a local CSV file. It uses D3 v7 to load and parse the data, then renders an SVG line plot with a light green stroke. The chart includes labeled X and Y axes, with the X-axis using a band scale for years and the Y-axis using a linear scale for costs. The code leverages D3’s `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` APIs to build the visualization.

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of student counts across different majors at the University of North Texas. The visualization uses a D3 arc generator to create pie segments, with each section labeled inside and accompanied by a legend showing the major name and corresponding student count. The chart loads data from a CSV file hosted on GitHub Gist and uses D3's `scaleOrdinal` for color assignment. The implementation imports specific D3 functions including `pie`, `arc`, and `scaleOrdinal` to generate the SVG-based chart.

Loading thumbnail…

Reusable Scatter plot Activity 8

An animated scatter plot cycles through different x-axis variables, plotting iris flower measurements of petal and sepal length and width. The visualization uses D3.js to create SVG circles, coloring each point by species and displaying a corresponding legend. Data is loaded from a CSV file via `d3.csv`. The plot updates at intervals, rotating which column appears on the x-axis while keeping sepal length fixed on the y-axis, all rendered with dynamic axes and labels.

Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble’s position determined by the x- and y-scales and its size scaled by `d3.scaleLinear` for MPG. Color encodes the car make via `d3.scaleOrdinal` using `d3.interpolateTurbo`. The visualization includes interactive tooltips on mouseover and a legend for bubble sizes and color categories. It loads data from a CSV and renders as animated SVG using D3 v7.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example shows a scatter plot of the Iris dataset, displaying sepal length against petal length with points shaped by species. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to map categorical species data to distinct shapes. The visualization also implements a custom shape legend and axes as local ES6 modules, with data loaded remotely via `csvParse` from a GitHub-hosted CSV file.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species. It uses D3 v6 to load CSV data via `d3.csv`, then renders circles as SVG elements using `scaleLinear` for axes. The code distinguishes three species with a color mapping function and displays labeled axes for petal and sepal measurements.

Loading thumbnail…

IMDb Movie ratings

This visualization displays the distribution of IMDb movie ratings across six genres, using stacked horizontal bars that segment percentages into five rating categories from "below 5.0" to "above 8.5." The chart reads from a local CSV file and renders with SVG. It employs d3.stack, d3.scaleOrdinal, and d3.scaleBand to construct the layout. Interactive tooltips reveal exact percentages per genre and rating category during mouseover, and a legend color-codes each rating band.

Loading thumbnail…

Activity 7

This chart displays the populations of 20 countries in 2020 using a horizontal bar chart rendered as SVG elements. The chart uses a linear scale for population values and a band scale for country names, with x-axis ticks formatted to show values in billions. The visualization is built with React and D3 v5, loading data from a CSV file via D3's `csv` function, and it includes interactive tooltips that display the exact population value for each bar. The bars are styled with a light green fill, and the chart is laid out within a 960 by 500 pixel SVG canvas.

Loading thumbnail…

Assignment Q10

This example demonstrates how VizHub integrates D3.js and local ES6 modules, displaying a large base64-encoded PNG image as the background of an SVG canvas. The code loads the D3 library via UNPKG, imports functions like `select` and `csvFormat`, and fetches a remote CSV file to print the first ten rows. A separate module exports a custom message, which is rendered prominently. The visual presentation combines the embedded image with dynamically fetched data, showcasing both module imports and asynchronous data loading.

Loading thumbnail…

Vishnu's Assignment Q10

This example displays the first ten rows of an IRS dataset fetched from a GitHub gist, printing them as JSON inside a black `<pre>` element with aqua-colored text. It also sets a large message using D3’s `select` and `text` methods. The visualization renders an SVG background image via a pattern, while the code imports `select`, `csv`, and `csvFormat` from d3.v5 within a React framework.

Loading thumbnail…

Vishnu's Assignment Q10

This example demonstrates D3.js loading and displaying CSV data from a remote GitHub gist, rendering the first ten rows as formatted JSON text appended to the body. It also sets a message in a div using D3’s `select` and imports both an external D3 module and a local ES6 module. The visualization uses SVG for a static image background and renders text output via plain HTML elements. The code relies on `d3.csv` for data fetching and `csvFormat` for size calculation.

Loading thumbnail…

Vishnu's Assignment Q10

This visualization displays a large, detailed static image, likely a map or schematic, rendered in the browser. The image is embedded directly as a base64-encoded data string within the SVG markup and tiled across the canvas using a pattern. The implementation uses the Svelte framework with D3.js v5, outputting to an SVG element with a viewBox of 2375x1318 pixels. Styling is handled through external CSS, while a large text message is centered using a 12em font size.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 setup: a page that displays the text “Hello D3 version 7” in large, centered type. It shows how to initialize a D3 project using the `d3.select` method from D3 v7, loaded via a CDN link in the HTML. The code uses `select('body')` to target the page body and `.text()` to replace its content, with all styling handled through a basic `<style>` block. Its purpose is purely educational, serving as a starting point for learning D3.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to structure a minimal D3.js visualization within the VizHub environment, rendering the text “Hello VizHub!” in a centered `<div>` with large styling. It shows the workflow of importing the `select` function from D3 v5 via UNPKG, and also imports a local ES6 module `message` from `myMessage.js`. The code uses `select('#message').text()` to set the displayed content, while a CSS rule controls the font size and alignment.

Loading thumbnail…

BMI by Age

This histogram displays the average body mass index (BMI) of survey respondents across different ages, using orange bars on an SVG chart. It loads a remote CSV dataset, bins the age values using `d3.bin`, scales the axes with `d3.scaleLinear`, and computes per-bin averages with `d3.sum`. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with labels and a title added as SVG text elements.

Loading thumbnail…

Transforming Data

This example analyzes the classic Iris dataset, transforming rows of flower measurements into a concise summary. It displays the average sepal length for each of the three iris species (setosa, versicolor, and virginica) as a formatted JSON text block. The visualization fetches the data from a CSV file, parses it with `d3.csvParse`, and groups the records by species, computing the average value using `flatRollup` and `sum`. The resulting summary is then rendered inside a `<pre>` element, showcasing a simple data aggregation pipeline built with the D3.js framework.

Loading thumbnail…

Activity 6

This example loads a remote CSV file from a GitHub gist and displays the first ten rows as formatted JSON in a styled pre element. It relies on D3 v5’s `csv` and `csvFormat` functions, loaded via UNPKG, and demonstrates importing local ES6 modules. The SVG output contains an embedded base64 JPEG image used as a pattern fill, and the page includes custom CSS for text presentation.

Loading thumbnail…

Fork of Hello VizHub

This example displays a simple message, "Hello VizHub!", centered on the page. It loads D3 from a CDN via UNPKG and uses the `select` method from `d3` to target an HTML element with the ID `message`. The text content is set using a local ES6 module named `myMessage.js`, which exports the message string. The page also imports a CSS file to style the text with large, centered font.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense, overlapping composition of randomly generated, colored polygons is overlaid with a single large Buddha silhouette path. The code uses React to render SVG elements, mapping over a nested array to create hundreds of semi-transparent, rotated polygons with randomized positions and RGB fill values. The Buddha path is drawn via a static SVG `<path>` element, scaled and translated within a green-background webpage.

Loading thumbnail…

Fork of Overlapping budda-iCE-4

This example displays a dense, chaotic field of small, semi-transparent colored rectangles scattered across a black SVG canvas, layered over a large decorative Buddha-like path. Each rectangle’s position, color, and rotation are generated from random values within nested array maps, producing an overlapping, abstract composition. The visualization is built with React and rendered as SVG, relying on JavaScript’s built-in `Math.random()` and `Array.map` for the generative layout, while the central figure uses an inline SVG path element.