B

BhavyaMammai

@BhavyaMammai·30 public vizzes

Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten individuals, using pink rectangles as nodes and brown, arrowed lines to depict friendships. The graph is rendered as an SVG and uses a force-directed layout via `d3.forceSimulation` with forces for links, charge, collision, and centering. Users can drag nodes, which triggers the simulation to restart. Data is loaded from a local `graph.json` file, and node highlighting occurs on mouseover via CSS class changes.

Loading thumbnail…

Social Network Graph

A social network graph represents an undirected friendship network among ten individuals, with nineteen connections of varying strength. The visualization uses a force-directed simulation to position rectangular nodes and draw link lines between them, with arrow markers indicating the direction of each relationship. Built with D3.js, the code leverages `d3.forceSimulation` with link, charge, center, and collision forces to compute node placement. Nodes are rendered as SVG rectangles with labels, and link thickness encodes relationship value, while the simulation supports drag interactions for node repositioning.

Loading thumbnail…

tree

This example shows a hierarchical tree diagram of food categories, from the root “Food” down to leaf items like Spinach, Carrot, Orange, and Apple. The visualization uses D3 v3’s `d3.layout.tree` to position nodes and links, with SVG rendering and animated transitions when the tree updates. Each node is color-coded by its type (e.g., type1 through type4), and links are drawn as stepped paths using `d3.line` with `curveStepAfter`. The code includes interactive zoom via `d3.behavior.zoom` and tooltips, with data pulled from an external JSON file.

Loading thumbnail…

Vertical Tree Diagram with Rectangles

A vertical tree diagram visualizes a food hierarchy using rectangles for nodes, starting with "Food" and branching into Vegetables and Fruits, then further into specific items like Spinach and Apple. The D3.js v7 code uses `d3.hierarchy` to process the nested JSON data and `d3.tree` to compute the layout. SVG paths with curved bezier links connect the nodes, while styled rectangles and text labels render each element with colors defined in CSS.

Loading thumbnail…

World Map

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

Loading thumbnail…

Reusable Scatter plot

This scatter plot visualizes movie performance metrics, including budget, worldwide earnings, and overseas revenue, with each point colored by box office verdict such as Blockbuster or Hit. The visualization cycles through different financial columns on the x-axis using `setInterval`, dynamically updating the scale and axes via the reusable `scatterPlot` function built with D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV using `d3.csv`, and circles are rendered in SVG with animation, while a legend shows verdict categories and their corresponding colors.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between movie budget, overseas earnings, and India gross collections, with each bubble representing a film and its size scaled by India gross. The chart uses D3.js v7 to render SVG circles with color mapping via `d3.scaleOrdinal` and `interpolateTurbo`, animating tooltips on hover. Axis scales are defined with `d3.scaleLinear`, and data is loaded from a CSV file. A legend identifies each movie by color.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes movie performance by plotting budget against worldwide earnings. Each circle represents a film, colored by its box-office verdict (All-Time-Blockbuster, Blockbuster, Hit, or default Blue) and sized by its India net and overseas earnings. The visualization loads a remote CSV dataset and uses D3 v6 scaleLinear and extent functions to map the data, with axisLeft and axisBottom generating the axes. The chart displays movie titles from the source data, with a red title and green axis labels.

Loading thumbnail…

Rate Of Interst

This chart displays the rate of interest for various loan types—education, house, car, agricultural, and business—across five major Indian banks. It uses a stacked horizontal bar chart with a linear x-scale for the rate and a band y-scale for bank names, rendered as SVG. The visualization applies a color ordinal scale to distinguish loan categories and a legend for reference. Hovering over a bar segment reveals a tooltip showing the exact percentage for that loan and bank, using D3 v7’s event handling and data-binding methods.

Loading thumbnail…

Bar Chart

This bar chart displays the top 15 cricket players ranked by their match scores. Built with React and D3 v5, it uses `scaleBand` for the categorical player names on the y-axis and `scaleLinear` for the numeric score values on the x-axis. The data is loaded from a CSV file via the `csv` function, with tick formatting handled by `format`. SVG rectangles render each bar, and tooltips appear on hover using the native `<title>` element.

Loading thumbnail…

Country

This example displays a geographic map of the United Arab Emirates, rendered as a single SVG path on a blank canvas. It loads world country boundaries from the world-atlas TopoJSON dataset and extracts the UAE geometry using `topojson.feature`. The map uses a Mercator projection fitted to the region via `d3.geoMercator().fitSize`, with the outline drawn using `d3.geoPath`. The code demonstrates asynchronous data loading with `d3.json` and basic D3 v5 selection and append methods.

Loading thumbnail…

Activity 8 Country

This example displays a map of Saudi Arabia using the D3.js version 5 library and the `d3.geoMercator` projection with `d3.geoPath` to render the country’s outline. It loads geographic data from the `world-atlas` TopoJSON file via `d3.json` and extracts the Saudi Arabia feature using the `topojson-client` API. The resulting SVG path visually represents the country’s boundaries on a 960 by 500 canvas, demonstrating a straightforward approach to projecting and drawing a single nation from global data.

Loading thumbnail…

Pie Chart

This pie chart visualizes the count of students from each major at UNT, using a dataset fetched from a GitHub gist via `d3.csv`. The chart uses D3 v5 to compute arc paths with `d3.pie` and `d3.arc`, and maps categorical colors via `d3.scaleOrdinal`. Each slice includes a formatted label showing the student count in thousands, while a legend lists each major with its corresponding color and value. The visualization is rendered as an SVG element, with styling applied through CSS.

Loading thumbnail…

Network Graph

This example displays a social network graph of individuals connected by friendship links. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, which are rendered as labeled circles and drawn with SVG. The data comes from a local graph.json file, and the visualization demonstrates drag interactions and hover highlighting, with lines styled in blue and arrow markers indicating link direction.

Loading thumbnail…

MuscleCars tree

This interactive tree visualization displays the hierarchy of muscle car models, from the root “Muscle Cars” through brands like Ford and Dodge down to specific variants such as the Hellcat and SRT. Built with D3 v3, it uses `d3.layout.tree` to compute node positions and renders the structure as SVG rectangles with color-coded types, connecting links, and drop-shadow filters. The visualization supports zooming and panning via `d3.behavior.zoom`, and includes animated expand/collapse on node click, with tooltips and custom styling defined in external CSS and JavaScript modules.

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON. It loads country boundaries from the world-atlas dataset and renders them as SVG paths using `d3.geoPath` with a `d3.geoEquirectangular` projection. The map applies a blue sphere background and green country polygons with an indigo stroke, while a `d3.zoom` handler enables pan and zoom transformations. Hovering over a country changes its fill color to maroon via CSS.

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, using a smooth curve to show the trend over time. The visualization includes labeled axes and a shaded area beneath the line to highlight the magnitude of values. Built with D3 v5, it loads CSV data from a GitHub gist, parses the year and cost fields, and uses `scaleTime`, `scaleLinear`, `area`, `line`, and `curveBasis` to generate the chart. The SVG rendering is styled with CSS for tick colors, axis labels, and the light green fill.

Loading thumbnail…

linechart

This line chart shows the cost of sales from 2000 to 2013, using a light green, four-pixel-wide line to trace annual changes. The visualization loads data from a CSV file using `d3.csv` and scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`. The SVG rendering is generated via D3 v7, with red axis labels and a styled title, all built from local ES6 modules and a standard HTML page.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through four measurement pairs (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a legend, and axis labels update dynamically. Built with D3.js, the example demonstrates reusable chart modules via `scatterPlot()` with `scaleLinear`, `axisLeft`, and `axisBottom`, and uses SVG rendering with animations driven by `setInterval` to switch between dimensions.

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of the top 10 countries by 2010 population. It uses React to render SVG elements and D3 v5 scales and axes for layout, with data loaded from a CSV file via d3.csv. The chart includes blue tick lines, green bars, and a formatted population axis label. Tooltips display the population values using D3’s format function with SI-prefix notation.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the Iris dataset, plotting sepal length against petal length with points shaped according to species. The code uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the scatter plot, along with `axisLeft` and `axisBottom` for axes. A custom shape legend is rendered using `shapeLegend`, and data is loaded asynchronously via `fetch` and parsed with `csvParse`.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) using distinct fills. The SVG chart is built with D3 v6, loading data via the `csv` function from a remote GitHub URL, and using `scaleLinear` for axes, `extent` for domains, and `axisLeft`/`axisBottom` to render ticks. It also applies custom margins, a title, and axis labels with rotation to present the relationships between the flower measurements.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between a vehicle’s average torque, horsepower, and highway MPG across different car makes. Each circle’s position maps horsepower and torque, while its radius encodes highway MPG and its color distinguishes the make. The chart includes a legend for MPG values and color-coded brand identifiers, with interactive tooltips on hover. The visualization is rendered as an SVG using D3.js v7, employing `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` for colors, and `d3.csv` to load the dataset.

Loading thumbnail…

IMDb Movie ratings

This example presents a stacked bar chart of IMDb movie ratings across six genres, with each bar showing the proportional distribution of ratings from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked segments and d3.scaleBand for the categorical genre axis, while d3.scaleOrdinal maps rating categories to a five-color palette. Interactive tooltips appear on mouseover via D3 event handlers. Data is loaded as CSV and rendered as SVG with axes generated by d3.axisLeft and d3.axisBottom.

Loading thumbnail…

assign1

This example demonstrates loading and displaying a CSV dataset from a GitHub gist using D3 v5, fetching the data with `d3.csv` and rendering the first ten rows as formatted JSON in the browser via `d3.select` and `append`. The page also includes a static SVG background image and imports a local ES6 module, `myMessage.js`, though the latter is not actively used in the visualization. The code highlights D3’s data-loading and DOM manipulation APIs within a simple SVG-based layout.

Loading thumbnail…

Q10

This example displays the average Type count for TV Shows and Movies parsed from a local CSV file. It demonstrates loading D3 via UNPKG, using ES6 module imports for local files and the d3 library. The visualization uses d3.csvParse, d3.flatRollup, and d3.sum to aggregate the data, then renders the summary as JSON text in a pre element.

Loading thumbnail…

ACT(6) HISTOGRAM

This histogram visualizes the relationship between age and average Body Mass Index (BMI) from health survey data, showing BMI distribution across age bins. The chart displays age on the x-axis and average BMI on the y-axis using orange rectangular bars. The code loads data via a CSV URL, converts string values to numbers, and computes BMI from height and weight fields. It uses D3 v7 APIs including `d3.csv`, `d3.bin`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The visualization is rendered as an SVG with custom styling for ticks and labels.

Loading thumbnail…

ACT(6) Task4

This example loads the classic Iris dataset from a CSV file and displays the average sepal length for each species as a formatted text summary. It uses `d3.csvParse` to parse the data, `d3.flatRollup` to group by species, and `d3.sum` to calculate the mean. The visualization renders the result in a `<pre>` element, updating via a state management pattern that fetches and processes the data asynchronously. It demonstrates data loading, transformation, and simple text output using D3 v7.

Loading thumbnail…

Activity (6)

This example loads a CSV from a GitHub gist and uses `d3.csv` to fetch it, then displays the first ten rows of parsed data as JSON within a `pre` element appended to the body. It demonstrates importing D3 functions like `select`, `csv`, and `csvFormat` via a CDN and using local ES6 modules, with rendering handled through SVG and WebGL. The page also includes an embedded SVG background image and custom styling.

Loading thumbnail…

5 buddhas

Five small triangular markers populate a black field, each rendered as a rotated polygon with randomly generated coordinates and neon RGB fills. The animation initializes a 20-by-20-by-20 nested array structure that produces over eight thousand overlapping shapes, while a detailed Buddha silhouette path is embedded in SVG. The piece uses React to create SVG elements, with styling and layout controlled through index.html and ReactDOM rendering.