suryavamsi00024

@suryavamsi00024·31 public vizzes

Russia Map

This example displays a static map of Russia using a Mercator projection. The map is rendered as a single SVG path element, filled with blue and outlined in black, using the `d3.geoPath` and `d3.geoMercator` functions. Geographic data is sourced from a world atlas TopoJSON file via `d3.json`, and the specific country feature is extracted using the `topojson-client` library. The viewport is fit to the country’s bounding box with `fitSize` before drawing.

Jul 20, 2023

Loading thumbnail…

Social Network Graph

This interactive social network graph visualizes friend relationships among eight individuals using a force-directed layout. The visualization employs D3’s forceSimulation with link, charge, collision, and center forces to arrange nodes, while edges with arrow markers indicate directed friendships. Users can drag nodes, and hovering highlights connections through CSS class changes. The code loads data from a local JSON file and renders the network as SVG elements, including circles for people and labeled text, using D3 v6.

Jul 20, 2023

Loading thumbnail…

Tree Chart

This tree chart visualizes a hierarchical dataset of continents, countries, cities, and landmarks, using color-coded nodes to distinguish each level. The SVG visualization is built with D3.js version 3.5.17, employing the `d3.layout.tree` for node positioning and `d3.svg.diagonal` for curved connecting links. The interactive animation reveals the structure progressively, with each parent node expanding to display its children over a one-second duration. Data is hardcoded in the `plantGenerationsData` array, and the rendering uses a white node fill with steelblue strokes against gray links.

Jul 20, 2023

Loading thumbnail…

WorldMap Visualization Based on Categories

This example displays a world map where each country is colored according to its economic category, using a sequential Blues color scheme. Hovering over a country highlights it in red and reveals a tooltip with its name and economy type. The map, built with D3.js, uses a Natural Earth projection and loads geographic data from the world-atlas package via TopoJSON, converting it to GeoJSON for rendering as SVG paths. Pan and zoom functionality is enabled through D3’s zoom utility.

Jul 20, 2023

Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot explores relationships between penguin measurements, cycling through four numerical variables on the x-axis while body mass remains on the y-axis. Built with D3 v6, it loads CSV data from a GitHub gist and uses a reusable scatterPlot module with scaleLinear scales and axisLeft/axisBottom. The visualization includes color-coded species markers (Adelie, Gentoo, Chinstrap) with a custom legend, using setInterval to rotate the x-axis variable every few seconds. SVG circles render the data points with species-specific colors and elliptical shapes.

Jul 19, 2023

Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s sodium level on the x-axis, rating on the y-axis, and calories as the bubble radius. The color of each bubble encodes the manufacturer. The visualization includes legends for both color and bubble size. It uses D3.js v7 with SVG rendering, reading data from a local CSV file. Key APIs include `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, `d3.schemeSet1`, and the `join` method for data binding.

Jul 19, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, showing flipper length against body mass, with each point colored by species (Adelie, Gentoo, or Chinstrap). Circle radii are also mapped to bill measurements. The visualization uses D3 v6 to load CSV data from a remote GitHub gist, parse numeric fields, and render an SVG with `scaleLinear` scales, `axisLeft` and `axisBottom` for axes, and `.join('circle')` to create the data points.

Jul 19, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart compares the religious composition of populations across fifteen countries, using data from a CSV file. Each country is represented by a bar, segmented into colored layers for different religions, with population sizes on the y-axis. The visualization uses D3 v3 with `d3.layout.stack` for stacking, `d3.scale.ordinal` and `d3.scale.linear` for scales, and `d3.legend.color` for the legend. Hovering over a legend item highlights that religion’s segments, and a tooltip displays population values.

Jul 19, 2023

Loading thumbnail…

Bar Chart

This bar chart displays the elevation of notable mountain peaks in feet, sorted along the y-axis with horizontal bars extending from left to right. The visualization uses React components alongside D3 v5 APIs including `scaleBand`, `scaleLinear`, and `format` to render the SVG marks and axes. Data is loaded asynchronously via a CSV file from a GitHub gist, and tooltips show formatted elevation values when hovering over each bar. The chart includes styled gridlines, axis labels, and a descriptive title.

Jul 19, 2023

Loading thumbnail…

Network Graph

This example visualizes a social network as an interactive force-directed graph using D3.js. The SVG renders circular nodes labeled with person names and blue directed links with arrowheads, showing friendship connections weighted by a numeric value. The layout relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node by adding a CSS class. Data comes from the local `graph.json` file.

Jul 10, 2023

Loading thumbnail…

MuscleCars tree

This is a D3.js tree diagram that visualizes the hierarchy of Muscle Cars, branching from the root into manufacturers like Ford and Dodge, and then into specific models like Mustang, Torino, Charger, and Challenger. Node colors are assigned by a `type` field, and the layout uses `d3.layout.tree()` to position nodes hierarchically. The visualization is rendered as SVG and supports zooming and panning through `d3.behavior.zoom()`. Links are drawn as bezier curves with arrow markers, and tooltips appear on hover. The data comes from a local `Tree.json` file, and interactions include node collapsing and expanding.

Jul 6, 2023

Loading thumbnail…

Activity 8 Country

This example displays a map of India rendered as an SVG path, centered using a Mercator projection fitted to the country’s geographic bounds. The code loads world country boundaries from the World Atlas TopoJSON collection via `d3.json`, extracts the India feature using `topojson.feature`, and draws it with `d3.geoPath`. The projection is created with `d3.geoMercator` and sized to a 960 by 500 viewport, demonstrating how to subset and visualize a single country from global geospatial data.

Jul 5, 2023

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using the D3.js library with a geoEquirectangular projection. Country boundaries are rendered as SVG paths using d3.geoPath, with light green fill and indigo strokes. The map supports zoom and pan through D3’s zoom behavior. Data comes from the world-atlas TopoJSON file, converted to GeoJSON via the topojson feature method, and countries change color to maroon on hover.

Jul 5, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, using a time-scaled x-axis and a linear y-axis. The chart is rendered as SVG with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators. Data is loaded from a CSV file, parsed, and drawn with smoothed curves, with axis labels and tick formatting customized via `format`.

Jul 5, 2023

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013 using a dataset loaded from a CSV file. The visualization uses D3 v7 to render an SVG with a band scale for the year axis and a linear scale for cost values. Data is filtered and mapped with d3.csv, then displayed as a thick light-green path using d3.line, with styled red axis labels.

Jul 5, 2023

Loading thumbnail…

Pie Chart

A pie chart displays the count of students across different majors at the University of North Texas, with each slice labeled with its value in thousands and accompanied by a legend. The visualization loads CSV data from a GitHub repository, parses it via `d3.csv`, and renders the chart using SVG with `d3.pie` and `d3.arc`. Slice colors are assigned using `d3.scaleOrdinal`, and labels are positioned via the arc centroid method.

Jul 5, 2023

Loading thumbnail…

Activity 8 Scatter plot

This interactive scatter plot animates through the four numeric dimensions of the Iris dataset, cycling which variable appears on the x-axis while sepal length remains on the y-axis. The visualization colors each of the three Iris species—setosa, versicolor, and virginica—with distinct hues and includes a static legend. Built with D3.js (v6.7.0), the example uses `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` for data loading, while a `setInterval` timer triggers updates to the x-axis mapping. The SVG rendering displays circles with fixed radius, transitioning between attribute combinations every few seconds.

Jul 5, 2023

Loading thumbnail…

ACTIVITY 7 Task 5

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque, while its radius scales with highway MPG and its color distinguishes the manufacturer. Built with D3 v7, the SVG rendering includes axis labels, a bubble-size legend, and a color legend. Hovering over a bubble triggers a tooltip that displays the car make, implemented with mouseover, mousemove, and mouseleave event handlers. Data comes from the provided CSV file.

Jul 3, 2023

Loading thumbnail…

ACTIVITY 7 TASK 4

This example visualizes the iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Different species are distinguished through distinct symbol shapes, with a legend identifying each category. The visualization uses d3.csvParse to load and parse the data, then applies d3.scaleLinear for positioning, d3.scaleOrdinal with symbolsFill for shape encoding, and d3.axisLeft and d3.axisBottom for axes. A custom shape legend renders the categorical mapping for species.

Jul 3, 2023

Loading thumbnail…

ACTIVITY 7_TASK3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6, it loads CSV data and renders SVG circles, using `scaleLinear` for axes and `axisLeft`/`axisBottom` for ticks. The code maps `petal_length` to the x-axis and `petal_width` to the y-axis within a full-screen SVG, with fixed margins and a default radius of 5 pixels.

Jul 3, 2023

Loading thumbnail…

ACTIVITY 7_TASK4

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis with circles colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The visualization also encodes sepal length and width as the circle’s rx and ry attributes, though the radii remain fixed at 5 pixels. Built with D3 v6, it loads CSV data via `d3.csv`, scales positions with `scaleLinear` and `extent`, and renders axes using `axisLeft` and `axisBottom` in an SVG.

Jul 3, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length (x-axis) and petal width (y-axis), with each point colored by species—setosa, versicolor, or virginica. The code loads the CSV from GitHub using D3’s `csv` and `scaleLinear` to map the data to SVG circle elements. It also includes axis labels, a legend-less color mapping via a custom `marker` function, and uses `extent` for domain calculation. The SVG is rendered full-window with margins, and axes are added via `axisLeft` and `axisBottom`.

Jul 3, 2023

Loading thumbnail…

IMDb Movie ratings

A stacked horizontal bar chart displays the distribution of IMDb ratings across six film genres, with each bar segment representing the percentage of movies falling into one of five rating categories from below 5.0 to above 8.5. The chart uses d3.stack to aggregate the data loaded from a CSV file, d3.scaleLinear for the percentage axis, d3.scaleBand for genre categories, and a d3.scaleOrdinal color scale for the rating tiers. Interactive tooltips, generated through mouse events, reveal precise percentages for each genre-rating combination, while an SVG-based legend annotates the color coding.

Jul 3, 2023

Loading thumbnail…

Activity 7

This is a horizontal bar chart built with React and SVG, displaying the population figures of the top 20 countries for the year 2020. The data is loaded from a remote CSV file using D3’s `csv` function, and the chart scales the bars with `scaleLinear` and `scaleBand`. The visualization includes custom axes (`AxisBottom` and `AxisLeft`), tick marks styled in blue, and green bars. Hovering over a bar reveals a tooltip with the formatted population value, using D3’s `format` to abbreviate large numbers.

Jul 3, 2023

Loading thumbnail…

Assignment - 1

This example loads airline data from a remote CSV file using d3.csv and displays the first ten rows as JSON in a black HTML pre element. The page also embeds a static SVG containing a base64-encoded JPEG image, while the JavaScript imports select and csvFormat from D3 v5 to handle document selection and data formatting. Additional local ES6 modules demonstrate modular code organization, and all D3 functionality loads via UNPKG from a script tag.

Jul 1, 2023

Loading thumbnail…

suryavamsi assignment1

A generative SVG visualization renders a dense field of randomly placed, semi-transparent polygons across a dark background. The composition is built from nested loops over an array of numbers, with each polygon’s position, size, and color determined by repeated calls to `Math.random()`. A large, detailed vector path depicting a human figure is overlaid near the center, scaled and translated into the scene. The React app uses SVG elements like `polygon`, `path`, and `g` within a fixed 960×1000 viewport, with styles defined in the HTML document.

Jun 30, 2023

Loading thumbnail…

Activity 6

This example loads a CSV file from a GitHub gist and displays the first ten rows as formatted JSON in the browser. It uses D3’s `csv` and `csvFormat` functions to parse and measure the data, and `select` to append the output to the body. The page also imports a local ES6 module, though its message is not rendered. The visualization is minimal, with styling defined in CSS but no chart or graphical representation.

Jun 14, 2023

Loading thumbnail…

BMI by Age

A scatterplot of average Body Mass Index (BMI) by age, showing data from the CDC dataset. The visualization groups the data into age bins, calculating the mean BMI for each bin, and renders the results as a bar chart. It uses D3 v7 for data loading, scaling, binning, and SVG rendering, with code demonstrating local ES6 module imports. The axes and labels are styled via D3's `axisLeft` and `axisBottom` APIs, and the chart is styled with purple bars.

Jun 14, 2023

Loading thumbnail…

Transforming Data

This example displays summary statistics from the classic Iris flower dataset. After loading the data with `d3.csvParse`, it computes the average sepal length for each species using `d3.flatRollup` and `d3.sum`, then renders the resulting JSON object as text in a `<pre>` element via a D3 data join. The visualization demonstrates importing D3 modules locally, fetching data with `fetch`, and managing asynchronous state updates through a simple state management pattern. It also showcases loading D3 v7 from UNPKG and composing modular ES6 JavaScript files.

Jun 14, 2023

Loading thumbnail…

Activity 6

This example displays the text “Hello VizHub!” in the center of the page using D3 v5, loaded via UNPKG. It demonstrates importing individual API functions like `select` from the D3 module, as well as local ES6 modules for reusable content. The `select` method targets the `#message` div and sets its text content to the imported `message` string. Styling relies on a separate CSS file that centers the text and sets a large font size, showing a basic modular structure for VizHub projects.

Jun 14, 2023

Loading thumbnail…

5 Buddhas

The 5 Buddhas visualization displays a dense, seemingly random field of diamond-shaped polygons rendered in vibrant colors against a black background, alongside a single detailed Buddha figure composed of complex SVG paths. The piece uses React components to map over nested arrays and generate hundreds of polygons, each with randomized coordinates, fill colors, and rotations. The SVG includes a large, ornate path representing the Buddha, scaled and positioned via transforms, while the surrounding polygons are created using custom JavaScript calculations and the built-in `Math.random` function. The code leverages ReactDOM to mount the visualization into the DOM, with styling defined in the HTML file.

Jun 7, 2023