Venkat-Sumith-Thota

@Venkat-Sumith-Thota·48 public vizzes

Tree Visualization

This example visualizes a hierarchical tree structure of a university’s departments and courses using D3 v5. Thecode imports data from a local ES6 module and renders an SVG tree layout with `d3.tree()`, `d3.hierarchy()`, and custom link paths via cubic Bézier curves. Each depth level is distinguished by a different shape (circle, rectangle, ellipse) and color, while node labels are positioned above or below based on whether they have children. The visualization runs entirely in the browser with SVG rendering.

Jul 22, 2023

Loading thumbnail…

World and Country Map

This example displays two side-by-side map visualizations: a basic world map and a choropleth country map. The world map renders all country boundaries using an SVG path generated with `d3.geoPath` and a `d3.geoMercator` projection. The country map colors specific nations (Egypt, Nigeria, Sudan) on a linear color scale from light to dark blue based on numeric values, while labeling each country’s name at its centroid. Both maps load GeoJSON data from the same GitHub-hosted world dataset.

Jul 22, 2023

Loading thumbnail…

Social Network Chart

A force-directed social network chart visualizes five named nodes and five edges representing connections. The graph is rendered as SVG elements, including circles for nodes, lines for links, and text labels positioned above each circle. The layout is computed using `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` forces. D3 version 5 is loaded via UNPKG, and the example demonstrates importing from the `"d3"` module and a local ES6 module.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot that visualizes student data from a local CSV file, comparing the Standard column against Score1 and Score2 in a rotating animation. The visualization updates every two seconds, toggling between the two score columns while displaying axes, labels, and a title. The code uses D3 v6’s `csv` loader, `scaleLinear` for scaling, `axisBottom` and `axisLeft` for axes, and SVG circles for data points. The plot clears and redraws its entire SVG contents on each interval, showcasing a simple approach to dynamic data updates.

Jul 22, 2023

Loading thumbnail…

Tree Visualization

This tree visualization displays hierarchical data as a node-link diagram with circular nodes and connecting links, rendered as an SVG on a 600x600 canvas. The code uses D3 v5, loaded via UNPKG, to select the SVG container and draw the structure, while CSS styles the node circles with a steelblue stroke and the links in light gray. The visualization demonstrates importing D3 functions and local ES6 modules through VizHub, though the specific dataset is not visible in the provided files.

Jul 22, 2023

Loading thumbnail…

India Map with d3.js

This example renders a choropleth-style map of India using the D3.js library. It loads GeoJSON data from a remote TopoJSON repository and projects it with a Mercator projection, using `d3.geoMercator` and `d3.geoPath`. The SVG output displays each state as a path with gray fill and dark stroke, sized to an 800x600 viewport.

Jul 22, 2023

Loading thumbnail…

Population Bubble Chart

This example visualizes population data for five countries as a bubble chart, mapping birth rate to the x-axis, life expectancy to the y-axis, and population to the size of each circle. Drawn as SVG circles with country labels, the chart also includes axes. The code uses D3 v6 scales (`d3.scaleLinear`, `d3.scaleSqrt`, `d3.scaleOrdinal`) with `d3.schemeCategory10` for colors and `d3.axisBottom` and `d3.axisLeft` to render the axes.

Jul 22, 2023

Loading thumbnail…

Mobile Inventory stacked bar chart

This example shows mobile inventory counts for three brands—Samsung, OnePlus, and Motorola—broken into Mobile, Tablet, and Earpods categories using a stacked bar chart. Each bar segments three colored rectangles (pink, yellow, red) representing the product types, with axis labels and a legend to the right. The code uses D3 v7 via UNPKG, building the visualization with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` in an SVG. The dataset is hardcoded in the script, and the legend maps each color to its corresponding value name.

Jul 22, 2023

Loading thumbnail…

Store sales scatter plot

A scatter plot displays sales figures for five store products, with each product represented by a color-coded circle positioned along a band scale for product names and a linear scale for sales values. Sales numbers appear as labels above each circle, while axis titles identify the product and sales dimensions. Built with D3 v6, the SVG chart uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization from static in-memory data.

Jul 22, 2023

Loading thumbnail…

Population Bar Chart

This bar chart visualizes population figures for five countries—USA, Canada, India, France, and UK—using a static SVG rendered with d3.v6. It employs `d3.scaleLinear` for the y-axis population scale and `d3.scaleBand` for the categorical x-axis. Bars change color from blue to red on mouseover via `transition`. Population labels appear atop each bar using `toLocaleString`, and axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The dataset is hardcoded in the script; no external data source is loaded.

Jul 22, 2023

Loading thumbnail…

d3.js Tree Visualization

A static tree visualization renders hierarchical weather data with three seasonal branches, each containing three related weather conditions. The example demonstrates loading D3 v5 via UNPKG and importing ES6 modules. Using `d3.tree()` and `d3.hierarchy`, it computes node positions and draws curved links with cubic Bézier paths (`C` commands) between parent and child nodes. SVG circles and text labels show each node, with labels offset above or below based on whether a node has children.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter plot with Wine Quality Data

This reusable scatter plot visualizes wine quality data from a CSV file, mapping pH on the x-axis and alcohol content on the y-axis, with point color indicating quality ratings. Built with D3 v6, the example demonstrates loading D3 via UNPKG and using local ES6 modules. The `scatterPlot.js` module defines a reusable chart function with configurable width, height, margins, and radius, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes. The main script appends SVG circles, legends, and styled axis labels directly.

Jul 21, 2023

Loading thumbnail…

Fork of Fork of Untitled

This example demonstrates a simple ES6 module and D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It loads D3 via UNPKG and uses the `select` function from D3 to set the text content of a `#message` div. A local module, `myMessage.js`, exports the string, which is imported in `index.js`. The styling is defined in an external CSS file for large, centered text.

Jul 21, 2023

Loading thumbnail…

Fork of Untitled

This example demonstrates how to load D3 via UNPKG and use ES6 modules in VizHub. It imports the `select` function from D3 and a `message` string from a local `myMessage.js` module. The code then uses `select` to target the `#message` div and sets its text content, which is styled with large centered font via CSS. It showcases basic module imports and DOM manipulation without any data processing or visualization.

Jul 21, 2023

Loading thumbnail…

Fork of Stacked Bar Chart

This stacked bar chart compares clothing brands across three categories—Formal, Casual, and Shoes—using d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The SVG rendering displays colored bars and a legend, with data from a hardcoded dataset of four brands. The code uses D3 v7, loaded via UNPKG, and demonstrates axis generation with d3.axisBottom and d3.axisLeft, plus a custom legend built from appended rectangles and text.

Jul 21, 2023

Loading thumbnail…

Height vs. Weight Scatterplot

This scatterplot visualizes the relationship between height (in centimeters) and weight (in kilograms) for six individuals. It uses D3.js v6 to render an SVG chart with a linear scale for each axis, including axis labels. The data is embedded as a CSV string and parsed with `d3.csvParse`. Circles are positioned using `d3.scaleLinear` and appended via `selectAll().data().enter().append()`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

Jul 21, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart compares four clothing brands across three product categories—Formal, Casual, and Shoes—using a fixed dataset embedded in the script. The chart renders in SVG via D3 v7, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Each brand’s stacked segments are colored distinctly, with a manual legend built from appended rectangles and text. The code loads D3 from UNPKG and uses inline JavaScript without local modules.

Jul 17, 2023

Loading thumbnail…

Untitled

This example displays the message “Hello VizHub!” in large, centered text within a web page. It demonstrates fundamental VizHub capabilities by loading D3 via UNPKG and using the `select` function from D3 to set the text content of an HTML element. The code also imports a local ES6 module, `myMessage.js`, which exports the displayed string, and applies styling through an external `styles.css` file.

Jul 17, 2023

Loading thumbnail…

Simple Tree with D3.js

A simple hierarchical tree diagram visualizes a root node with three branches—Animals, Vehicles, and Countries—each leading to two leaf nodes. The code uses D3.js v6’s `d3.hierarchy` and `d3.tree` layouts to compute node positions, and renders the structure as an SVG with curved links via path elements. Nodes appear as steelblue circles, with labels added as text elements, and a custom `project` function converts the tree layout’s polar coordinates into Cartesian coordinates for placement.

Jul 16, 2023

Loading thumbnail…

World Map with Cancer Data

This example visualizes cancer case counts by country on a natural Earth projection world map. The choropleth map colors each country with a sequential blue scale based on its reported cases, while a legend and interactive tooltip display exact values on hover. It builds the map using D3 v6’s `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSequential`, and `d3.interpolateBlues`, loading GeoJSON shapes and joining them with a sample dataset. The code also incorporates an axis-based legend and SVG rendering.

Jul 16, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3.js and ES6 modules can be used together in a VizHub project. It renders a simple text message, "Hello VizHub!", centered on the page using a CSS style. The code imports the `select` function from D3 and a custom local module exporting the message string. It loads D3 from a CDN and uses D3's selection API to update the DOM.

Jul 16, 2023

Loading thumbnail…

Bubble Chart

This bubble chart maps countries by cost of living on the x-axis and population on the y-axis, with bubble radius encoding population using a square-root scale. The visualization uses d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. SVG circles and text labels are positioned via xScale and yScale, with d3.axisBottom and d3.axisLeft rendering the axes. The data is a static array of five country records, rendered as semi-transparent colored bubbles to compare living expenses against population size.

Jul 16, 2023

Loading thumbnail…

Bubble Chart

This bubble chart maps countries’ birth rates to the x-axis and life expectancy to the y-axis, with bubble size scaled by population. The visualization uses D3 v6’s `scaleLinear` for positioning and `scaleSqrt` for radius, while an ordinal color scale distinguishes countries. Each circle is rendered as an SVG element with a dark blue text label, and the chart includes standard `axisBottom` and `axisLeft` axes. The sample dataset is embedded directly in the code, and the visualization is presented in a 700x450 pixel container.

Jul 16, 2023

Loading thumbnail…

Scatter Plot of Birds on a tree

A scatter plot shows bird counts at five times of day, with red circles positioned along a point scale for time and a linear scale for count. The code uses D3 v6 to bind the dataset, append SVG circles and value labels, and render axes via `d3.axisBottom` and `d3.axisLeft`. The visualization is fully client-side, using hardcoded sample data and drawing with SVG elements inside an HTML container.

Jul 16, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays population data for cities, grouped by state and country. It uses D3.js v6 to process the nested dataset with `d3.nest()` and `d3.stack()`, then renders the stacks as SVG rectangles with an ordinal color scale. The chart includes axes via `d3.axisBottom()` and a legend. The data is hardcoded in the script rather than loaded from an external source.

Jul 16, 2023

Loading thumbnail…

Population

This example displays a static bar chart of population figures for five countries, rendered as an SVG. It loads the D3 v6 library via UNPKG and uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization. Bars change color from blue to red on mouseover via D3 transitions. Population values are displayed as text labels above each bar. The chart defines its own dimensions, margins, and axes, using the hardcoded `popn` dataset.

Jul 16, 2023

Loading thumbnail…

Bar Chart with D3.js

This example displays a bar chart of five categorical values, including topics like data visualization and machine learning, using D3.js with SVG rendering. The code loads D3 v6 from a CDN and builds the visualization with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Steel-blue bars are appended via `selectAll` and `enter`, with dimensions derived from the scales. The dataset is hardcoded in the script, and the chart is placed inside a div with the ID "chart".

Jul 15, 2023

Loading thumbnail…

Network Graph

This network graph displays a social network of ten people connected by friendship links. The visualization uses a force-directed layout via `d3.forceSimulation` with link distance, charge, collision, and centering forces. Nodes are rendered as green circles with labels in an SVG, and links appear as blue lines with arrow markers. Each node is draggable, and hovering highlights the circle. Data comes from `graph.json`, loaded with `d3.json`. The code imports specific functions like `select`, `scaleOrdinal`, and `selectAll` from D3 v6.

Jul 9, 2023

Loading thumbnail…

MuscleCars tree

An interactive SVG tree diagram visualizes a hierarchy of muscle car models, from the "Muscle Cars" root down to Ford, Dodge, and their specific models like Mustang and Charger. Nodes are color-coded by type and rendered as rounded rectangles with drop shadows. The visualization uses D3 v3's `d3.layout.tree` for layout, with pan and zoom via `d3.behavior.zoom`, and animated updates on node click. Data is loaded from a static JSON file (Tree.json) and styled using external CSS.

Jul 9, 2023

Loading thumbnail…

Activity 8 Country

This example displays a geographic map of India rendered as an SVG using D3.js. It loads world country boundary data in TopoJSON format from the world-atlas package, extracts India via the `topojson.feature` function, and projects it with `d3.geoMercator`. The map is drawn using `d3.geoPath` with a fixed 960x500 viewport, demonstrating how to filter and visualize a single country from a global dataset.

Jul 9, 2023

Loading thumbnail…

Activity 8 Map

This example displays a zoomable world map using an equirectangular projection, with countries rendered as interactive SVG paths that change color on hover. It loads geographic data from the world-atlas TopoJSON file, converting it to GeoJSON with the `feature` method from the `topojson` library. The visualization applies a blue sphere background and green country fill, using D3 v5's `geoPath`, `geoEquirectangular`, and `zoom` APIs to enable panning and scaling of the map.

Jul 9, 2023

Loading thumbnail…

Area Chart Activity 8

This example visualizes the cost of sales from 2000 to 2013 as an area chart with an overlaid line. It uses D3 v5 with SVG rendering, importing `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` from D3. The chart loads CSV data from a GitHub gist, parses the Year and Cost fields, and displays axes with gridlines and labeled axis titles. The area and line paths are generated using `d3.area` and `d3.line` with a basis curve.

Jul 9, 2023

Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013, with each year plotted on the x-axis and cost on the y-axis. The data is loaded from a CSV file using `d3.csv` and rendered as SVG with a lightgreen stroke. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`, with custom text elements for “Year” and “cost.”

Jul 9, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the count of students in each major at UNT, with proportional slices and a legend displaying major names and student counts. It loads CSV data from a GitHub repository and uses d3.pie, d3.arc, and d3.scaleOrdinal to generate SVG paths with custom colors and value labels. The chart also uses d3.csv for data fetching, d3.format for tick formatting, and local ES6 module imports.

Jul 9, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through four different flower measurements on the x-axis while keeping petal width on the y-axis. Data points are colored by species using a custom color mapping function, with legend labels and axis titles updating dynamically. The visualization uses D3's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` APIs, with a reusable `scatterPlot` module and an animated `setInterval` loop that switches between measurement dimensions. SVG circles change their `cx` position as the x-axis scale recalculates, while decorative styling uses custom fonts, colors, and italicized text.

Jul 9, 2023

Loading thumbnail…

Bubble chart

A bubble chart shows the correlation between average torque, horsepower, and highway MPG across car makes. Each circle’s position maps to horsepower and torque, while its radius encodes highway MPG and its color represents the car make. The chart uses D3 v7 with SVG rendering, including scales for position and size, a color ordinal scale, and interactive tooltips on mouseover. A legend displays both the MPG size scale and color-coded makes. Data loads from a local CSV file.

Jul 9, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot displays iris flower measurements with sepal length on the x-axis and petal length on the y-axis, using d3.scaleLinear for position scales and d3.scaleOrdinal with d3.symbolsFill to map species to distinct shapes. A custom shapeLegend module renders the species key, while d3.axisLeft and d3.axisBottom generate the axes with labels. The visualization loads CSV data via fetch and d3.csvParse, and both local ES6 modules (axes, scatterPlot, shapeLegend) and D3 v7 imports demonstrate modular code organization.

Jul 9, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for three species (setosa, versicolor, and virginica) with color-coded points. The chart loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to compute scales, and renders circles in SVG with `d3.axisLeft` and `d3.axisBottom` for axes.

Jul 9, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses D3 v7 to load CSV data, apply a d3.stack layout, and render the result as SVG rectangles. A d3.scaleOrdinal maps rating categories to a fixed color palette, while d3.axisBottom and d3.axisLeft provide the percentage and genre scales. Interactive tooltips display the exact percentage for each segment on mouseover.

Jul 9, 2023

Loading thumbnail…

Activity 7

This horizontal bar chart displays the 2010 populations of ten countries, sorted by country name, with light green bars on an SVG canvas. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are loaded from a CSV file via `d3.csv`, formatted with `format` (converting G to B), and rendered through custom React components for axes and marks. A native SVG `<title>` element provides hover tooltips.

Jul 9, 2023

Loading thumbnail…

My Webpage

This example demonstrates loading a CSV dataset from a GitHub gist and displaying its size in kilobytes, row count, and first ten rows as JSON in a webpage. It uses D3 v5’s `d3.csv` and `d3.csvFormat` APIs to fetch and measure the data, alongside local ES6 module imports from `index.js`. The page also features static HTML/CSS content and an embedded SVG graphic of a cricket-themed illustration.

Jul 1, 2023

Loading thumbnail…

My Webpage

This example shows a webpage that loads data from a remote CSV file using `d3.csv`, displaying the file's size, row count, and column count in a `<pre>` tag. The page also includes an SVG graphic and a static header. The code uses the D3 v5 library loaded via UNPKG, and an equivalent `index.js` demonstrates importing `csv`, `csvFormat`, and `select` from the `d3` module to parse and preview the first 10 rows of the Automobile dataset.

Jun 30, 2023

Loading thumbnail…

My Webpage

A webpage displays a welcome message and an SVG logo alongside placeholder text, with a section linking to externally hosted CSV data and an empty table element intended for a data preview. The example demonstrates importing D3 functions via `select` from the UNPKG-hosted D3 library and using a local ES6 module (`myMessage.js`) to set the text of a `#message` div. The page’s styling is defined in CSS within the HTML file, while a separate `styles.css` file styles the message text in large, centered type.

Jun 30, 2023

Loading thumbnail…

BMI by Age

This example visualizes the relationship between age and average body mass index (BMI) using a binned bar chart. The code loads data from a CSV file, computes BMI values, and uses D3 v7's `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `bin` utilities to create the visualization. The bars are rendered as SVG rectangles, with the y-axis labeled "Average Body Mass Index" and the x-axis "Age". The chart includes customized tick styling and an overall title, demonstrating D3's data import and ES6 module usage.

Jun 24, 2023

Loading thumbnail…

parsing data

This example demonstrates how to load and display tabular data from a remote CSV file using D3 v5. It fetches data from a GitHub Gist URL, converts the first 10 rows to JSON, and appends them to the page as formatted text. The code uses `d3.csv` for parsing and `d3.csvFormat` to calculate the dataset’s size in kilobytes, while `d3.select` manages DOM updates.

Jun 24, 2023

Loading thumbnail…

Transforming Data

This example demonstrates data transformation by computing the average sepal length for each species of iris and displaying the results as a JSON summary. The visualization uses the D3.js library (v7) with `csvParse` to load the data, and `flatRollup` with `sum` to aggregate values. The code also showcases modular ES6 imports, loading D3 from UNPKG, and demonstrates VizHub's workflow of fetching a CSV file and rendering the result with a `join` operation.

Jun 24, 2023

Loading thumbnail…

Activity 6

This example displays a large, detailed Bitmap JPEG image as a repeating SVG pattern within a static 2880x1800 canvas. The SVG uses a `<pattern>` and `<image>` element with a base64-encoded JPEG data URI to render the visual content. The page also demonstrates a minimal D3.js v5 integration by importing the `select` function to set the text of a div, alongside a local ES6 module for a greeting message. Both SVG and WebGL rendering are leveraged to present the image data.

Jun 24, 2023

Loading thumbnail…

5 forks

This example displays a dense cluster of randomly colored, rotated polygons overlaid with a single hand-drawn black fork path. Using React and ReactDOM, the visualization generates 21³ nested SVG polygon elements within a 960 by 1000 pixel canvas, while the fork path is rendered with an SVG path element using a static `d` attribute. The polygons’ positions, colors, and rotations are determined by JavaScript’s `Math.random()`, creating a chaotic, abstract backdrop that contrasts with the structured, predefined fork shape.

Jun 12, 2023