Y

yashaswisanjanaaerra@my.unt.edu

@Sanjana200203·44 public vizzes

Loading thumbnail…

graph

This example presents a hierarchical tree diagram of global health data, organizing countries into disease categories and specific diseases beneath a “Global Health” root. The visualization uses an SVG-drawn tree layout, with colored nodes indicating depth: orange for countries, blue for disease categories, and green for individual diseases. The code builds the hierarchy with `d3.hierarchy()`, positions nodes using `d3.tree()`, and connects them with `d3.linkVertical()` paths. Labels appear above each circle, and the layout is calculated dynamically based on the 800×800 SVG dimensions.

Loading thumbnail…

neural network

This example visualizes a global health network, showing connections between four countries and nine diseases using a force-directed graph. Orange circles represent countries while blue circles represent diseases, connected by gray links. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, and d3.drag to allow interactive node movement. The SVG rendering includes labeled nodes and the data is hardcoded in the script.

Loading thumbnail…

Fork of A8 -D3 Node Link (Force Direct Layout)

This force-directed graph visualizes an undirected network from a gist data file, showing nodes as blue circles and links as gray lines. It uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute the layout, and d3.drag for interactive node repositioning. The d3.v7 library renders the graph in SVG, with a tick handler updating node and link positions.

Loading thumbnail…

CE-7 Q4

An area chart shows the temperature trend in India from 2000 to 2017, with values rising from roughly 29.6°C to 31.6°C. The SVG is built with D3 v6, using `d3.scaleLinear` for axes and `d3.area` to generate the filled path. Axes are labeled "Year" and "Temperature (°C)". The static dataset is embedded directly in the code, and the chart is rendered with a brown fill.

Loading thumbnail…

CE-7 Q3

This example shows the annual average temperature trend in India from 2000 to 2017 using an SVG line chart. The chart plots temperature values (ranging from roughly 29.6°C to 31.6°C) against years, with a steelblue line and labeled axes for "Year" and "Temperature (°C)". The code uses D3 v7's `d3.select`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` APIs to generate the axes and line path. The data is embedded directly as an array in the script, with the chart rendered in an SVG container sized 800 by 400 pixels.

Loading thumbnail…

Fork of CE-7 Q2

A pie chart displays the average seasonal temperature distribution in India for 2017, with four slices for winter, spring, summer, and autumn ranging from 23.83°C to 32.33°C. Using D3 v7, the code computes arcs with d3.pie and d3.arc, renders SVG paths, labels each slice with d3.arc for centroid placement, and pairs the chart with a legend built from d3.scaleOrdinal and the d3.schemeSet3 color palette.

Loading thumbnail…

CE-7 Q1

A scatter plot shows the relationship between temperature in degrees Celsius and humidity as a percentage, with data points clustered in the low-to-mid temperature range and one notable outlier at approximately 9°C with 140% humidity. The visualization uses Chart.js with the `scatter` chart type, rendering to a Canvas element. It configures linear scales for both axes with explicit axis titles, and custom tooltips that display temperature and humidity values for each point. The dataset is defined inline within the JavaScript configuration, and the chart is created by calling `new Chart(ctx, config)` with the provided data and options.

Loading thumbnail…

CE-7 Q1

This animated scatter plot cycles through four Iris flower measurements, displaying petal width, sepal width, petal length, and sepal length against sepal length on the y-axis. The visualization updates every two seconds via a `setInterval` loop, transitioning between the different x-value columns. Built with D3.js v6, it uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `join` for circle rendering. The data comes from a CSV file fetched from a GitHub Gist, rendered as an SVG that resizes to fit the browser window.

Loading thumbnail…

CE-7 Q1

A giant "CE-7 Q1" message is rendered as a full-screen text display. The example uses a CSS stylesheet to center the text and scale it to a massive font size, likely filling the entire viewport. The visualization relies on standard HTML and CSS for layout and styling, with no JavaScript libraries involved. The plain text element itself is the primary visual output, demonstrating a minimalist typographic composition. The data source is the static text content and CSS styling from the provided styles.css file.

Loading thumbnail…

Fork of Fork of A8 -D3 Node Link (Force Direct Layout)

This D3.js (v7) scatter plot visualizes English Premier League player salaries, comparing each player's name along the y-axis against their salary in pounds on the x-axis. The data, loaded from a CSV file hosted on GitHub, is processed by stripping currency symbols and converting million units before being mapped to a linear scale for salary and a band scale for player names. The chart uses SVG circles for data points, with a hover tooltip displaying the player's name and exact salary. Axis labels and a title provide context for the visualization.

Loading thumbnail…

bar chart

This bar chart visualizes English Premier League player salaries, showing each player’s annual earnings in pounds as horizontal bars sorted along the y-axis. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical player names. It loads CSV data from a GitHub gist, formats salary values from text to numeric, and adds interactive tooltips on mouseover using D3 event handlers. Gridlines and axis labels provide additional context for comparing salary magnitudes.

Loading thumbnail…

Fork of A8 -D3 Node Link (Force Direct Layout)

This force-directed graph displays the connections between nodes in a network, fetched from a remote text file. The visualization uses D3's `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces to position nodes, and `d3.drag` enables interactive node manipulation. The graph is rendered as an SVG with circles, where hovering reveals node IDs. The layout dynamically updates on each simulation tick, and the data is parsed from a plain text file containing source-target pairs.

Loading thumbnail…

Fork of A8 -D3 Node Link (Force Direct Layout)

This force-directed graph displays the connections between nodes in a network, fetched from a remote text file. The visualization uses D3's `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces to position nodes, and `d3.drag` enables interactive node manipulation. The graph is rendered as an SVG with circles, where hovering reveals node IDs. The layout dynamically updates on each simulation tick, and the data is parsed from a plain text file containing source-target pairs.

Loading thumbnail…

Fork of A8 -D3 Node Link (Force Direct Layout)

This force-directed graph displays the connections between nodes in a network, fetched from a remote text file. The visualization uses D3's `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces to position nodes, and `d3.drag` enables interactive node manipulation. The graph is rendered as an SVG with circles, where hovering reveals node IDs. The layout dynamically updates on each simulation tick, and the data is parsed from a plain text file containing source-target pairs.

Loading thumbnail…

Fork of A8 -D3 Node Link (Force Direct Layout)

This force-directed graph displays the connections between nodes in a network, fetched from a remote text file. The visualization uses D3's `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces to position nodes, and `d3.drag` enables interactive node manipulation. The graph is rendered as an SVG with circles, where hovering reveals node IDs. The layout dynamically updates on each simulation tick, and the data is parsed from a plain text file containing source-target pairs.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This bar chart visualization uses D3 v7 to render categorical data as vertical bars. The code defines an SVG container and employs D3’s scale functions and axis generators to map data values to pixel positions, creating a simple, clean chart. The chart is initialized within an HTML page that includes a header and a dedicated chart div. While the data itself is not defined in the provided code, the structure suggests a straightforward mapping from input values to bar heights using standard D3 selection and data-join methods.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Heatmap in D3

This visualization displays the adjacency matrix of a dolphin social network, showing connections between individual dolphins as blue cells against a white background. It loads real network data from a GitHub Gist using `d3.text`, parses the edge list, and builds a symmetric matrix to reflect the undirected graph. The code uses core D3.js v7 methods like `d3.select`, `selectAll`, and `data().enter().append()` to render the SVG rectangles, with row groups positioned via `transform` attributes and cell fills determined by binary connection values. Tooltips are included but not bound to mouse events in the provided code.

Loading thumbnail…

Fork of Fork of Fork of Fork of Heatmap in D3

This visualization displays the adjacency matrix of a dolphin social network, showing connections between individual dolphins as blue cells against a white background. It loads real network data from a GitHub Gist using `d3.text`, parses the edge list, and builds a symmetric matrix to reflect the undirected graph. The code uses core D3.js v7 methods like `d3.select`, `selectAll`, and `data().enter().append()` to render the SVG rectangles, with row groups positioned via `transform` attributes and cell fills determined by binary connection values. Tooltips are included but not bound to mouse events in the provided code.

Loading thumbnail…

Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, showing connections between individual dolphins as blue cells on a white grid. The code fetches network data from a GitHub Gist, parses it, and builds a symmetric matrix since the graph is undirected. Using D3 v7, it renders the matrix as SVG rectangles with a tooltip, mapping each cell to a row and column representing dolphin IDs. The visualization highlights the network’s structure at a glance, with each filled cell indicating a social tie between two dolphins.

Loading thumbnail…

Fork of Fork of Circles with D3

This visualization displays seven hand-positioned circles of varying sizes and neon colors on a soft green background, with each circle semi-transparent to create overlapping depth. The code uses D3.js version 7.8.5 with method chaining and data binding via `selectAll`, `data`, and `join` to create SVG elements. Each circle's position, radius, fill color, and opacity are set through attribute accessor functions. The example demonstrates the D3 General Update Pattern within an exported `main` function that dynamically sizes the SVG to its container dimensions.

Loading thumbnail…

Fork of Fork of Circles with D3

This example displays seven colorful circles of varying sizes and positions on a pastel green background, each with a semi-transparent fill. The visualization demonstrates the D3 General Update Pattern by binding an array of objects containing x, y, radius, and color properties to SVG circle elements using `d3.select`, `data`, and `join`. The code imports D3 v7 and dynamically sizes the SVG to fit its container, applying attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining.