HarshithaAmbilpur

@HarshithaAmbilpur·32 public vizzes

Reusable Scatter Plot

This animated scatter plot explores relationships between characteristics of penguin species, cycling through different attribute pairings on the x-axis. It uses a reusable `scatterPlot` module built with D3's `scaleLinear`, `axisLeft`, and `axisBottom` to render the chart, while data is loaded from a CSV via D3's `csv` function. The plot updates its x-axis every few seconds through a `setInterval` call, with circles colored by species type, and includes a legend and axis labels styled with CSS.

Jul 22, 2023

Loading thumbnail…

Social Network

The visualization displays a social network graph, mapping eight people and their friendships as nodes and connecting lines. It uses D3.js v6 to run a physics-based simulation, employing `d3.forceSimulation` with link, charge, and collision forces to position the nodes. The SVG renders pink links with arrow markers and interactive nodes that enlarge on hover and can be dragged, with data sourced from a local `network.json` file.

Jul 22, 2023

Loading thumbnail…

Tree Visualization with D3.js

A tree visualization displays hierarchical animal data with D3.js, using a static dataset defined in JavaScript. The code builds an SVG-based dendrogram through `d3.tree()` and `d3.hierarchy()`, positioning nodes and links with horizontal link paths. Circles represent each animal, with text labels arranged by parent or leaf status. Interactive hover animations via `transition` enlarge circles and change their fill color, while the stylesheet controls node and link appearance.

Jul 22, 2023

Loading thumbnail…

World Map

This example displays an interactive world map using the geoNaturalEarth1 projection, rendering countries as SVG paths with hover highlighting. It loads world-atlas TopoJSON data, converts it to GeoJSON with the `feature` method, and draws it using `d3.geoPath`. The map supports pan and zoom through `d3.zoom`, and includes a styled sphere background. The implementation imports `select`, `json`, `geoPath`, and `zoom` from D3 v5, along with the TopoJSON module.

Jul 22, 2023

Loading thumbnail…

Japan Map

This example displays a map of Japan using a Mercator projection, rendered as an SVG path with a violet fill that transitions to light blue on hover. It loads geographic data from the world-atlas TopoJSON dataset, extracts Japan’s geometry via `topojson.feature`, and fits the projection to the country’s bounds using `d3.geoMercator().fitSize`. The visualization applies `d3.zoom` for interactive pan and zoom, and uses `d3.json` to fetch the data asynchronously.

Jul 22, 2023

Loading thumbnail…

Activity8_Task5_Map

This example displays an interactive world map using an equirectangular projection, with countries rendered as light green SVG paths with indigo borders against a skyblue ocean. The map loads GeoJSON county boundaries from the world-atlas TopoJSON dataset via `d3.json`. A `d3.zoom` behavior enables panning and zooming on the SVG, while `d3.geoPath` and the `topojson.feature` method generate the geographic shapes. Hovering over a country changes its fill to maroon through CSS.

Jul 21, 2023

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays penguin bill length against body mass, with each point colored steelblue and labeled by species on hover via a tooltip. The chart loads data from a CSV file hosted on GitHub and renders as SVG using D3 v6. Code defines margins, linear scales, and axis groups, while a tooltip follows the mouse to show species, bill length, and body mass. The example demonstrates modular function creation with `createScatterPlot`, and imports D3 from UNPKG.

Jul 21, 2023

Loading thumbnail…

Activity8_Task1

An animated scatterplot displays the classic Iris flower dataset, where each point’s color encodes the species type. A setInterval loop cycles through different numeric feature pairs for the x-axis, while the y-axis remains fixed on sepal length, making the correlation patterns between features visually comparable. The implementation uses D3 v6 modules including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` to render SVG circles, axes, and legend labels. The code also leverages ES6 module imports for modularity and demonstrates dynamic axis updates alongside static legend and title annotations.

Jul 21, 2023

Loading thumbnail…

Bubble Chart

This bubble chart displays the relationship between the number of women and men at various universities, with bubble size representing the gender gap. The visualization uses a scatter plot layout where each school is positioned by their female and male student counts, and the radius of each bubble scales with the gap between these values. The chart is built using D3 v6, employing linear scales for the x and y axes, a square-root scale for bubble radius, and an ordinal color scale to distinguish schools. Data is loaded from an external JSON file, and the visualization includes a color-coded legend rendered as SVG.

Jul 21, 2023

Loading thumbnail…

Activty7 Task5

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle is positioned by horsepower on the x-axis and torque on the y-axis, while its size encodes highway MPG. The chart uses D3.js v7 with SVG rendering and includes interactive tooltips that display the car make on hover. A legend communicates the MPG scale, and a color scale differentiates brands. The data is loaded via `d3.csv` from a local CSV file, with axes, scales, and animation built using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`.

Jul 21, 2023

Loading thumbnail…

Bubble Chart with Different Colors

This example shows a bubble chart of school and student metrics across categories, encoding schools per 1000 on the x-axis, students per 1000 on the y-axis, earnings as bubble radius, and category as color. It loads CSV data from a GitHub gist and renders an SVG using d3.csv, d3.scaleLinear, d3.scaleSqrt, d3.scaleOrdinal with d3.schemeCategory10, d3.axisBottom, and d3.axisLeft to produce axes, labels, and a color legend.

Jul 20, 2023

Loading thumbnail…

Scatter Plot with Different Colors

A scatter plot displays penguin bill length against bill depth, with each point colored by species using a D3 ordinal color scale. The visualization loads data from an external CSV file and renders circles in an SVG container. It uses D3 v6 scaleLinear for the axes, scaleOrdinal with schemeCategory10 for colors, and includes axis labels and a legend generated from the color scale's domain.

Jul 20, 2023

Loading thumbnail…

Activity 7 Task 3

This scatter plot visualizes the Iris dataset, displaying petal length against petal width, with each point colored by species (setosa, versicolor, or virginica) using an orange, skyblue, or lightgreen fill. The code loads data via `d3.csv` from a GitHub raw URL, uses `d3.scaleLinear` and `d3.extent` for scales, and draws circles in an SVG. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, with custom green axis labels, all built using D3 v6.

Jul 20, 2023

Loading thumbnail…

Bar Chart

This bar chart displays the marks of ten named students, with each bar representing a person’s score from the hard-coded dataset. Rendered as SVG via D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` to map names and score values, then draws the bars as `rect` elements. The chart includes rotated x-axis labels and interactive hover effects that change bar color, demonstrating basic D3 data joins and axis generation.

Jul 20, 2023

Loading thumbnail…

Book ratings

This visualization displays the distribution of book ratings across various genres, with each horizontal bar representing a genre and stacked segments showing the proportion of ratings in different ranges (below 1.0, 1.0-1.5, 1.5-2.5, 2.5-3.5, above 3.5). The chart uses D3 v7 loaded via UNPKG, with d3.scaleOrdinal for color mapping, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.stack for creating the stacked bar data from a CSV file. Interactive tooltips display exact percentages on hover, and a legend indicates the rating categories. The SVG rendering includes shared axes and a title, with data processed through d3.csv.

Jul 20, 2023

Loading thumbnail…

Actvity7_Task1

A horizontal bar chart displays country populations for 2020 using React and D3 v5. The chart loads CSV data from a GitHub gist, converts string values to numbers, and slices the dataset to show the top 20 countries. D3 scales position bars, while React components render SVG axes, tick marks, and rectangles with tooltips showing formatted population values.

Jul 20, 2023

Loading thumbnail…

Bar Chart Visualization

This bar chart displays the population of various countries from a CSV dataset, using steel blue bars on a gray background. D3.js v7 loads the data via `d3.csv` and renders the visualization as SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Each bar includes a white text label above it showing the population value. The chart is fixed at 600 by 400 pixels within a styled container div.

Jul 20, 2023

Loading thumbnail…

Activity8_Task6_NetworkGraph

A social network graph displays ten people connected by “Friend with” relationships, with node size and link thickness varying by connection value. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interaction lets viewers rearrange the layout. Nodes render as SVG circles with labels, and links are drawn as lines with arrow markers, all colored by a simple green palette. Data loads from a local graph.json file containing the node and edge definitions.

Jul 11, 2023

Loading thumbnail…

MuscleCars tree

This interactive tree diagram visualizes the hierarchy of muscle car manufacturers, showing Ford and Dodge as top-level brands that branch into specific models like the Mustang, Torino, Charger, Challenger, and their performance variants such as Hellcat and SRT. The visualization uses D3.js v3 with an SVG-based layout to render nodes and links, with each node color-coded by type level and featuring expandable/collapsible interactions, zooming, drag functionality, and tooltips. The implementation relies on `d3.layout.tree` for structure, `d3.behavior.zoom` for navigation, and custom CSS for styling, with data loaded from a JSON file defining the tree hierarchy.

Jul 11, 2023

Loading thumbnail…

Activity8_Task5_Country

This map isolates India from the world-atlas TopoJSON dataset and renders it as a single-country SVG. Using D3 v5, the code applies a Mercator projection fitted to the country’s bounds and draws the geometry with `d3.geoPath`. The example demonstrates filtering GeoJSON features by name and setting a projection’s scale to match a fixed viewport size.

Jul 11, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, using a green filled region beneath a black curve. The visualization loads CSV data via `d3.csv`, parses years as dates, and renders with SVG paths generated by `d3.area` and `d3.line` with a `curveBasis` interpolation. Axes are created using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleTime` and `d3.scaleLinear`, while tick formatting uses `d3.format`.

Jul 11, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, with a smooth curve and a light green filled region beneath it. The visualization uses d3.line() and d3.area() with curveBasis to generate the path elements, while d3.scaleTime and d3.scaleLinear handle the year and cost axes. Data is loaded from a CSV file via d3.csv, and the SVG rendering includes styled tick labels, grid lines, and orange axis labels.

Jul 11, 2023

Loading thumbnail…

Activity8_Task3

This example visualizes the cost of sales from 2000 to 2013 using a line chart, with the x-axis representing each year and the y-axis showing cost values. The line is rendered as a single SVG path with a lightgreen stroke, and both axis labels are styled in red with a large font. The code loads data from a local CSV file using `d3.csv`, maps the cost values to numbers, and builds the scales with `d3.scaleBand` and `d3.scaleLinear`. The SVG chart is created via `d3.select` and positioned with margins, while axes are added using `d3.axisBottom` and `d3.axisLeft`.

Jul 11, 2023

Loading thumbnail…

Activty8 Task2

This example shows the count of students from each major at UNT in a pie chart with a legend listing each major and its corresponding value. The pie chart uses D3’s `pie` and `arc` generators to create the slices, with `scaleOrdinal` assigning colors from a predefined array. Each slice is labeled with its value formatted using D3’s `format` function, and a separate legend group positions rectangles and text labels. The data is loaded asynchronously from a CSV URL using D3’s `csv` method, and the visualization is rendered as SVG.

Jul 10, 2023

Loading thumbnail…

Activity7 Task4

This example demonstrates a scatter plot of the Iris dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species as categorical point shapes. The visualization loads data asynchronously from a CSV file and parses it with `d3.csvParse`. It uses `d3.scaleLinear` and `d3.scaleOrdinal` for scales, renders marks with the `d3.symbol` generator, and includes a custom shape legend built via a reusable ES6 module. Axes are drawn using `d3.axisLeft` and `d3.axisBottom` from a shared axes module.

Jul 9, 2023

Loading thumbnail…

Activity6

This example demonstrates how to load and display a simple text message using D3.js within a modular ES6 setup. The code imports the `select` function from D3 and a local `message` string from a separate module, then updates a `<div>` element’s text content on the page. It showcases both CDN-based library loading via UNPKG and local ES6 module imports, with styling applied through an external CSS file. No data visualization or rendering beyond this basic DOM manipulation is shown.

Jul 9, 2023

Loading thumbnail…

Task10

This example displays a static SVG composition of geometric shapes over a dark background, with luminous ellipses, a blue path, and a green curved line. It also loads a CSV file of country data from a GitHub gist using `d3.csv`, then calculates and displays the file size in kilobytes, row count, and column count in a message container. The page references D3 v5 via UNPKG and uses the `select`, `csv`, and `csvFormat` APIs from the D3 module.

Jul 1, 2023

Loading thumbnail…

Activity 6

This example loads D3 v5 and Vue to render a full-screen SVG pattern generated from an embedded base64 image, with the pattern repeated via `pattern` and `use` elements. It imports `select` from `d3` and a local ES6 module, `myMessage.js`, to set the text of a `#message` div, demonstrating module imports and DOM selection.

Jul 1, 2023

Loading thumbnail…

BMI by Age - Histogram Visualization

This histogram visualizes average body mass index (BMI) across age groups, using data from a CSV file. The code sorts individuals into age bins with `d3.bin`, then renders orange rectangles whose heights represent each bin’s mean BMI, computed via `d3.sum`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with scales set by `d3.scaleLinear`. The visualization uses D3 v7, loads data via `d3.csv`, and renders to an SVG canvas.

Jun 20, 2023

Loading thumbnail…

Activity 6 - Task2/3

This example demonstrates loading and inspecting a CSV dataset using D3. It fetches the data from a GitHub gist and displays the first ten rows as formatted JSON in the browser. The code uses D3’s `csv` loader and `select` to append elements to the page, while also showcasing local ES6 module imports. The visualization is rendered as SVG in a static HTML file with WebGL support, highlighting basic data retrieval and display workflows in VizHub.

Jun 20, 2023

Loading thumbnail…

Activity 6 - Transforming Data

This example demonstrates data transformation by loading the Iris flower dataset from a CSV file and computing the average sepal length for each species. The visualization displays the results as a formatted JSON summary, using a minimal text-based output. The code leverages D3 v7 functions including `csvParse` to parse the data, `flatRollup` and `aggregate` to group records and calculate sums, and `select` for DOM manipulation. This highlights how D3 can transform raw tabular data into structured summaries.

Jun 20, 2023

Loading thumbnail…

5 Buddhas

The visualization displays five Buddha-like figures formed from hundreds of semi-transparent, randomly colored, rotated polygons scattered across a black background. The code generates a dense field of diamond shapes using nested array mappings and JavaScript's `Math.random()` for positioning, color, and rotation. Rendered with React and SVG, the composition layers these chaotic shapes over detailed, hand-defined path data for each Buddha figure, creating a contrast between abstract geometric noise and structured iconographic forms.

Jun 7, 2023