B

bogasamudramvamsikrishnareddy

@bogasamudramvamsikrishnareddy·41 public vizzes

Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten friends, with nodes representing people and edges depicting their friendship connections. The graph is rendered as a static SVG, but users can drag nodes to rearrange the layout. The visualization is built using D3.js v6, specifically leveraging the `d3.forceSimulation` API for the physics-based layout, along with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`. Node colors are uniform, and edge thickness is not varied, though link data includes a `value` attribute. Data comes from the included `graph.json` file.

Loading thumbnail…

MuscleCars tree

This interactive SVG tree visualizes the hierarchy of muscle car models under their manufacturers, Ford and Dodge. Data is loaded from a JSON file and rendered with D3.js v3, using the `d3.layout.tree` API to compute node positions. Nodes are color-coded by type, and the visualization supports zooming, panning, and click interactions to expand or collapse subtrees.

Loading thumbnail…

Activity 8 Country

This example renders a map of India using geographic data from the world-atlas TopoJSON dataset. It loads D3 v5 and topojson-client via CDN, extracts the India geometry with `topojson.feature`, and projects it using `d3.geoMercator` with `fitSize`. A single SVG path is generated via `d3.geoPath` and appended to the page, displaying the country’s outline. The visualization demonstrates basic map projection and path rendering without additional interactivity or styling.

Loading thumbnail…

Activity 8 Map

A world map rendered as an SVG using D3.js and TopoJSON. The map displays countries with light green fill and indigo borders, set against a sky-blue ocean background, with hover states turning countries maroon. The visualization uses the equirectangular projection and supports zooming via the D3 zoom event. Data comes from the world-atlas countries-110m GeoJSON source. The code uses D3's `select`, `json`, `geoPath`, `geoEquirectangular`, and `zoom` APIs, alongside TopoJSON's `feature` method to build country geometries.

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, using a smoothed curve to show the trend over time. The SVG rendering uses d3.scaleTime and d3.scaleLinear for the axes, with d3.area and d3.line generators employing curveBasis to create the filled region and stroke. Data is loaded as CSV via d3.csv and parsed with new Date() for the year values, with axis ticks formatted using d3.format.

Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013 using annual data points from a CSV file. The chart employs D3 v7's `scaleBand` for the categorical year axis and `scaleLinear` for the cost axis, rendering a thick light-green line via `d3.line()` within an SVG. Axis labels and tick formatting are applied through `d3.axisBottom` and `d3.axisLeft`, with the data loaded asynchronously via `d3.csv`.

Loading thumbnail…

Pie Chart

A pie chart displays the number of students per major at UNT, with each slice labeled with its value in thousands and accompanied by a legend showing major names and corresponding counts. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG paths, with data loaded asynchronously from a CSV URL. The chart applies a categorical color scale and formats tick values using `d3.format`.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot explores the Iris dataset, displaying four measurement attributes while cycling through different x-axis variables to reveal patterns among three flower species. The visualization color-codes data points by species using custom markers and includes a legend, axis labels, and animated transitions. Built with D3.js version 6.7, it combines reusable scatter plot components, scaleLinear, axisBottom, and axisLeft functions with SVG rendering. The chart automatically updates every interval, rotating through petal width, sepal width, petal length, and sepal length on the x-axis while maintaining a fixed y-axis for comparison.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for various car makes, using a turbo color scale to distinguish each brand. Interactive tooltips reveal the make on hover, and the SVG is generated dynamically from a CSV file. The chart employs D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`. A legend shows the bubble size scale and color key, with smooth transitions on tooltip display.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example displays the classic Iris flower dataset, plotting sepal length against petal length with dots colored and shaped to represent different species. The visualization uses a D3.js scatter plot, with points positioned by linear scales and a legend that maps species names to their corresponding shapes via a shape scale. The axes and legend are all built with D3’s selection API, while the data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, encoding petal length on the x-axis and petal width on the y-axis. The code uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom`, rendering to an SVG. Data points are colored by species (skyblue, lightgreen, orange), and the plot also incorporates sepal dimensions as extra coordinates, though only the petal dimensions are used for point positions. The chart labels axes as petal length and sepal length.

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows how IMDb ratings are distributed across six movie genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5.” The horizontal segments represent the percentage of films in each genre falling into each rating band, revealing that documentaries and dramas tend to receive higher ratings than action or comedy films. Built with d3.v7 and rendered as SVG, the visualization uses d3.stack to create the stacked segments, d3.scaleOrdinal for color encoding, and d3.axisBottom with a linear scale for the percentage axis. Hovering over any segment displays a tooltip with the exact percentage for that rating level within the selected genre, computed from the provided data.csv file.

Loading thumbnail…

Activity 7

This chart visualizes the 2010 population of the top 20 countries by country, presented as a horizontal bar chart. The code uses React to construct the SVG elements, with D3's `scaleBand` and `scaleLinear` to map data to the x and y axes. The data is fetched live from a CSV file using D3's `csv` function. Blue axis ticks and green bars are styled via CSS, with a tooltip showing the formatted population on hover.

Loading thumbnail…

BMI by Age

This scatterplot visualizes the average Body Mass Index (BMI) across age groups, using data from the CDC Dataset. The chart aggregates individual data points into age bins, with each bar representing the mean BMI for that age range, using D3's `bin` and `sum` functions. The visualization is rendered as an SVG, with axes generated via `axisLeft` and `axisBottom`, and custom styling applied through CSS to highlight the distribution of BMI values across the lifespan.

Loading thumbnail…

Transforming Data

This example loads the classic Iris dataset from a CSV file and uses `d3.csvParse` to convert it into an array of JavaScript objects, coercing the four measurement columns to numbers. It then applies `d3.flatRollup` with `d3.sum` to compute the average sepal length for each species, producing a compact summary table. The result is rendered as formatted JSON inside a `<pre>` element using a data join, with the visualization re-rendering via a simple state-management loop. The code imports utilities like `extent`, `group`, and `bin` but only `flatRollup` and `sum` are actively used.

Loading thumbnail…

Activity 6

This example demonstrates how to load and inspect a CSV dataset using D3 version 5, displaying the first ten rows as formatted JSON in the browser. The code uses the `csv` function from D3 to fetch data from a GitHub gist, then appends `<pre>` elements to the page body via `d3.select` and `selection.append` to show the raw data and a JSON representation. The page also includes a static SVG background image and a YouTube tutorial link.

Loading thumbnail…

Activity_6

This example renders a single, large text message centered on a blank page using D3.js. It demonstrates how to load D3 v5 from a CDN via UNPKG and import specific functions, such as `select`, from the library. The code also showcases local ES6 module usage by importing a `message` string from a separate `myMessage.js` file and setting the text content of a `<div>` element through D3’s selection API. Styling is applied via an external CSS file.

Loading thumbnail…

Activity 7

This bar chart displays the number of users for various applications, drawing from a CSV dataset of 50 entries. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles for each bar. The code includes custom `AxisBottom` and `AxisLeft` components for ticks and labels, with tooltips formatted using D3’s `format` function.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes automobile data from a CSV file, plotting Horsepower against Mileage with points colored by vehicle Make using distinct shapes. The scatter plot uses D3 scales for axes and an ordinal scale mapped to symbol types via `symbolsFill`. A custom shape legend explains the mapping. The code demonstrates D3 v7 modular imports, including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`, while handling data loading asynchronously through `d3.csv` and updating the visualization via a state-based render loop.

Loading thumbnail…

Company Data Scatter Plot

This scatter plot visualizes company data, showing the relationship between the number of employees and revenue, with the market value encoded by the size and color of each circle. The visualization uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleSqrt`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft`. Data is loaded from a remote CSV file, rendered as SVG circles on a linear scale for both axes, with a square-root scale determining the circle radius. The plot uses colorful circles colored via `d3.scaleOrdinal` with the `d3.schemeCategory10` palette.

Loading thumbnail…

Assignment2_Question3

This example demonstrates the basic functionality of VizHub, showing how to load D3 via the UNPKG CDN and import local ES6 modules. The page uses `select('#message')` from d3 to target a div element and set its text content to a string imported from `myMessage.js`. The `styles.css` file applies large, centered typography to the message. The example serves as a minimal template for combining D3 with external libraries and modular JavaScript code within a single HTML page.

Loading thumbnail…

Fork of Assignment2_Question

This bar chart displays the number of users for the top 50 software applications, using horizontal bars ordered by application name. Built with React and D3 v5, it renders as an SVG with scales from `scaleBand` and `scaleLinear`. The code imports data via `d3.csv` from a GitHub-hosted CSV file, formats tick labels with `d3.format`, and creates reusable axis and mark components that handle the visual encoding.

Loading thumbnail…

Network Graph

This example demonstrates a social network graph of nine individuals connected by various relationships such as friendship, siblings, and colleagues. Nodes are represented as large green circles with red labels, and links are drawn as blue arrows with arrowhead markers. The visualization uses d3.forceSimulation to compute the layout, with forces for link distance, charge repulsion, collision, and centering. Users can drag nodes to reposition them, and hovering highlights a node with a red stroke. Data is loaded from a local graph.json file, and the code imports select and scaleOrdinal from d3.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal D3.js visualization within the VizHub environment. It shows a simple text message, “Hello VizHub!”, displayed prominently in the browser. The code loads D3 v5 from a CDN and uses the `select` method to target a specific HTML element and set its text content. It also highlights module import patterns, including importing local ES6 modules alongside D3’s API.

Loading thumbnail…

Fork of Assignment2_Graphs

This example demonstrates basic D3.js functionality by rendering a message in an HTML page. It imports the `select` function from d3 and uses it to set the text content of a div element with the ID `message`. The text comes from a local ES6 module, `myMessage.js`, which exports a simple string. The visualization is minimal, showing how D3 can be combined with ES6 module imports and styled via CSS to display large centered text in the browser.

Loading thumbnail…

Assignment2_Graphs

This example displays a single line of text, "Hello VizHub!", centered on the page. It demonstrates a minimal D3.js v5 setup using a custom ES6 module. The code imports the `select` function from D3 via UNPKG to target a specific HTML element, and it imports a `message` string from a local module to populate that element’s text content. The page’s styling is handled by a linked CSS file.

Loading thumbnail…

Assignment6_Graphs

This example demonstrates a minimal D3.js page structured for VizHub, displaying the text “Hello VizHub!” centered on the screen. It shows how to import both external D3 modules via UNPKG and local ES6 modules, using `select` from `d3` to update the DOM. The code renders static text without a dataset or interactive visualization, serving as a template for loading libraries and organizing modular code.

Loading thumbnail…

Assignment6_Question7_Tree

This interactive tree diagram displays the hierarchical relationships among programming languages and their associated frameworks, with data loaded from a JSON file. Users can click nodes to expand or collapse branches, triggering smooth animations. The visualization uses D3.js v3 layout and rendering APIs, including `d3.layout.tree`, SVG elements, and zoom behavior for panning. Node colors differentiate hierarchy types, while tooltips and directed links enhance readability. The implementation combines React for the application structure with D3 for data binding and SVG animation.

Loading thumbnail…

Assignment2_question6

This example displays a map of Texas rendered as an SVG using D3.js version 5. It loads U.S. state boundaries from the `us-atlas` TopoJSON file hosted on a CDN, then extracts the geometry for Texas using the `topojson.feature` API. The map is projected with `d3.geoAlbersUsa` and drawn with `d3.geoPath`, resulting in a single-path visualization of the state outline. The code selects the body element and appends an SVG canvas sized 960 by 500 pixels to display the final geographic shape.

Loading thumbnail…

Assignment2_Worldmap

This example displays an interactive world map using geographic data from the world-atlas TopoJSON file. The map presents continents and countries with distinct fill colors and stroke outlines, rendered as SVG paths via d3.geoPath and the geoEquirectangular projection. Users can pan and zoom through d3.zoom, which applies transformations to the SVG group. Hovering over a country changes its fill color to maroon through CSS :hover styling. The visualization demonstrates D3 version 5 with topojson.feature to convert TopoJSON to GeoJSON for rendering.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal D3.js visualization within the VizHub environment. It shows a simple text message, “Hello VizHub!”, displayed prominently in the browser. The code loads D3 v5 from a CDN and uses the `select` method to target a specific HTML element and set its text content. It also highlights module import patterns, including importing local ES6 modules alongside D3’s API.

Loading thumbnail…

Fork of Assignment2_WorldMap

This example displays a single text message, “Hello VizHub!”, rendered at a massive font size and centered on the page. It demonstrates fundamental workflow patterns by loading D3.js version 5 from a CDN via UNPKG and using the `select` function from D3 to update the DOM content of a designated `div` element. The text itself comes from a local ES6 module through an exported constant, showing how to organize code into separate importable files. No external data sources or map-specific functionality are present despite the title.

Loading thumbnail…

Assignment2_WorldMap

This example displays a simple web page with the text “Hello VizHub!” centered on the screen. It demonstrates how to import D3.js functions and local ES6 modules within a VizHub project. The code uses `d3.select` to target the `#message` div and set its text content, while CSS styles control the font size and alignment. The page is built with an `index.html` file that loads D3 v5 from UNPKG and includes a compiled `bundle.js` script.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the relationship between average grades, study hours, and extracurricular activities for 50 students. The x-axis represents study hours, the y-axis shows average grades, and each bubble’s size encodes the number of extracurricular activities. The visualization uses D3 v7 with SVG rendering and animation. Data is loaded from a CSV file, and bubbles are rendered with d3.forceSimulation for positioning. Hovering highlights individual students, while axis labels and a title provide context for interpreting the educational data.

Loading thumbnail…

Fork of music rating

This visualization uses stacked horizontal bars to show how music ratings are distributed across four genres: Rock, Pop, Jazz, and Country. Each bar is segmented into five rating categories, from below 5.0 to above 8.5, with colors assigned by D3's `scaleOrdinal`. Hovering over a segment reveals the exact percentage for that genre and rating category via a tooltip. The chart is built with D3 v7, using `d3.stack`, `d3.scaleLinear`, and `d3.scaleBand` to position the bars, and reads its data from a CSV file.

Loading thumbnail…

Fork of Fork of Assignment2_Question

This example shows a horizontal bar chart ranking five countries by their 2020 population, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5 scales (scaleBand, scaleLinear) and formatting via d3.format to display values in billions. Data is loaded asynchronously from a remote CSV using d3.csv, and each bar includes a native SVG title element for hover tooltips. The chart includes styled axes with blue tick lines and labels.

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of product sales, using a categorical y-axis for product names and a linear x-axis for sales values. It renders with React and SVG, using D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `format` APIs to load and scale data from a GitHub-hosted CSV file. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the axes and rectangular marks, with native SVG `<title>` elements providing tooltips. The data is filtered to the top seven products, and sales values are formatted with a compact SI prefix.

Loading thumbnail…

Assignment2_Barchart

This example displays a bar chart visualization titled "Assignment2_Barchart" using D3.js v5. The chart renders data loaded from a local ES6 module, demonstrating how to import and use D3 functions like `select` alongside custom JavaScript modules. The visualization is built with a simple HTML structure that includes a CSS file for styling and a CDN-hosted D3 library. The code shows how to create a basic D3-based bar chart with dynamic data binding and SVG rendering capabilities.

Loading thumbnail…

Activity 7

This visualization displays the 2020 populations of 20 countries as a horizontal bar chart, using green bars sorted by country name on a blue-axis grid. Built with React and D3 v5, it employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `d3.csv` to load data from a GitHub-hosted dataset. The chart formats population values in billions using D3’s `format` function and includes tooltips via SVG `<title>` elements.

Loading thumbnail…

Assignment_Barchart

This example uses an ES6 module called `myMessage.js` to provide a text string, which is then rendered by D3’s `select` method into a `div` with the ID `message`. The page loads D3 v5 from a CDN via UNPKG, and demonstrates importing local modules and D3 API functions. The result is a full-screen, centered display of the text “Hello VizHub!” styled with a large font size via CSS.

Loading thumbnail…

Acitivity5_Task3

A dense field of small, randomly rotated triangles covers an SVG canvas, with each triangle's position, size, and color determined by nested loops over an array of numbers and the `Math.random()` function. The triangles are rendered as SVG `polygon` elements, using string interpolation to construct their `points` attribute and a dynamic `rgb()` fill color. A single large, curving path is also rendered, transformed and scaled via the `transform` attribute. The visualization is built with React, using `React.createElement` implicitly through JSX, and ReactDOM to mount the component.