A

akshayvenishetty1437

@akshayvenishetty1437·34 public vizzes

Loading thumbnail…

Activity 7

A horizontal bar chart displays the 2020 populations of ten countries, sorted by country name, with bars rendered as green SVG rectangles. The chart uses D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and population values to screen positions, while React components build the axes and marks. Data loads from a remote CSV file, with population values converted from thousands. Axis tick labels use D3's `format` to abbreviate large numbers, and hovering over a bar reveals a native tooltip with the formatted value.

Loading thumbnail…

MuscleCars tree

This interactive tree visualization displays a hierarchical structure of classic muscle cars, organized by brand (Ford, Dodge) and specific models, with a custom layout. Built with D3 v3, it renders collapsible nodes and animated links using SVG and the `d3.layout.tree` API, which calculates the tree's size and positions. The code reads the hierarchical data from a JSON file (`Tree.json`) and uses the `d3.behavior.zoom` module for pan and zoom interactions. Styling is applied via CSS classes, with node colors varying by type, and the visualization includes tooltips and a drop-shadow filter.

Loading thumbnail…

Reusable Scatter Plot with d3.js

This example demonstrates a reusable scatter plot function built with D3 v6, rendered as SVG. It maps quantitative x and y values to positions using `d3.scaleLinear` and draws circles as data points, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code uses the D3 selection and enter-append pattern to bind sample data, and includes labels for both axes. The plot is encapsulated within a `createScatterPlot` function, allowing it to be called with custom data and dimensions. Loading D3 via UNPKG, the example also shows an ES6 module import in `myMessage.js`.

Loading thumbnail…

D3.js Tree Example

This example shows a hierarchical tree layout with three levels of nodes—root, category, and subcategory—rendered as SVG shapes with distinct colors and symbols for each layer. It uses D3.js v5, loading the library via UNPKG, and applies the d3.tree layout, d3.hierarchy, d3.linkHorizontal, and d3.symbol APIs to position nodes and draw curved links. The data is hardcoded in JavaScript, and the visualization distinguishes node types using d3.scaleOrdinal for both color and shape.

Loading thumbnail…

D3.js Tree Example

This example shows a static hierarchical tree layout rendered as SVG, with a root node branching into three categories (Animals, Vehicles, Countries) and their leaf children. It demonstrates the core D3.js v5 tree API, using `d3.hierarchy()` to structure the data, `d3.tree()` to compute node positions, and `d3.linkHorizontal()` to draw curved paths between parent and child nodes. The code explicitly sets SVG dimensions with margins, appends circles for nodes and text labels that align based on whether a node has children, and loads D3 via a CDN script tag.

Loading thumbnail…

Activity 8 Country

This example displays a map of India using geographic data from the world-atlas TopoJSON dataset. It extracts the India feature from the countries collection, then renders the country’s outline as an SVG path. The visualization uses D3 v5’s `d3.json` to load the data, `topojson.feature` to convert the TopoJSON geometry, and a `d3.geoMercator` projection fitted to the map’s dimensions via `fitSize`. The resulting path is drawn with `d3.geoPath`, producing a simple, projected country boundary.

Loading thumbnail…

Activity 8 Map

This map renders a zoomable world map with country boundaries, using an equirectangular projection. Countries appear in black with red borders and turn maroon on hover. The visualization is built with D3 v5, using `d3.geoEquirectangular`, `d3.geoPath`, and `d3.zoom` for panning and scaling. Geographic data comes from the world-atlas TopoJSON file via the `jsdelivr` CDN, converted to GeoJSON features with the `topojson` library’s `feature` method and rendered as SVG paths.

Loading thumbnail…

Bubble Chart with d3.js

This example shows a bubble chart built with d3.v6, plotting five data points on x and y axes with bubble sizes encoding a third quantitative value. The chart renders as an SVG, using d3.scaleLinear to map data ranges for position and radius, and d3.axisBottom/axisLeft to draw labeled axes. It also demonstrates importing local ES6 modules and loading D3 via UNPKG in VizHub.

Loading thumbnail…

Scatter Plot with d3.js

A scatter plot displays five sample data points with quantitative x and y values, rendered as steelblue circles. The visualization uses D3.js v6 to create an SVG chart with linear scales, axes, and labels. The code loads D3 from UNPKG, selects the chart container via `d3.select`, and builds the visualization using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements. It also demonstrates importing from an ES6 module, showing a "Hello VizHub!" message.

Loading thumbnail…

Stacked Bar Chart with d3.js

This example creates a stacked bar chart from sample data using D3.js v6, displaying three quantitative values (valueA, valueB, valueC) across three categories. The chart renders as an SVG, with bars stacked using the D3 `d3.stack()` generator and colored via `d3.schemeCategory10`. Axes and labels are added using `d3.axisBottom` and `d3.axisLeft`, with scaling handled by `d3.scaleBand` and `d3.scaleLinear`. The code demonstrates importing D3 via a CDN and using local ES6 modules.

Loading thumbnail…

Simple Bar Chart with d3.js

This example displays a simple bar chart visualizing five categorical values using D3 v6. The chart renders as an SVG with labeled axes, a title, and styled rectangles representing the dataset. The code loads D3 from UNPKG and uses core APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to map data to visual elements. Although the project includes an ES6 module example, the main chart logic resides in a separate script file and renders entirely in the browser.

Loading thumbnail…

Country/States Map Example

This example displays a choropleth map of geographic regions rendered as SVG paths, with each region colored uniformly. The visualization uses D3’s `d3.geoMercator()` projection and `d3.geoPath()` generator to transform GeoJSON features from a local `country.json` file into scalable vector graphics. The code loads D3 v6 via a CDN and demonstrates both D3 API imports and local ES6 module integration, though the primary map drawing relies solely on the built-in path generator to convert coordinate data into visible shapes.

Loading thumbnail…

Country/States Map Example

This example displays a geographic map rendered as SVG paths from GeoJSON data, showing country or state boundaries. It uses D3 v6’s `d3.geoMercator` projection and `d3.geoPath` to translate geographic coordinates into screen positions. The map is drawn by appending a `path` element for each feature in the loaded `country.json` file. The visualization focuses on the raw geometry of regions without additional styling or interactivity.

Loading thumbnail…

Social Network Graph Example

A social network graph example visualizes five people (John, Alice, Bob, Eve, Cynthia) as blue circles connected by six friendship links as lines. Using D3 v6, the code employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive dragging. The SVG rendering updates node positions (`cx`, `cy`) and link coordinates on each simulation tick, with text labels showing names. This demonstrates loading D3 via UNPKG and importing local ES6 modules.

Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten individuals and their friendship connections. The code uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes dynamically. Nodes are rendered as SVG circles with text labels, while links appear as blue lines with arrow markers. The simulation updates node and link positions on each tick, and users can drag nodes to reposition them. The data comes from a local graph.json file containing explicit node and link definitions.

Loading thumbnail…

Activity 8 Country

This example displays a map of India rendered as a single SVG path, filled with the default black color on a white background. It loads geographic boundary data from the World Atlas TopoJSON dataset via `d3.json`, filters for the country feature using `topojson.feature`, and fits a `d3.geoMercator` projection to the geometry with `fitSize`. The resulting shape is drawn using `d3.geoPath`, demonstrating a minimal workflow for extracting and projecting a country outline in D3 v5.

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as light-green SVG paths with an indigo stroke against a sky-blue sphere. The map loads geographic data from the world-atlas countries-110m.json dataset and supports zooming and panning through d3.zoom. Hovering over a country changes its fill to maroon via CSS, while d3.geoPath and d3.geoEquirectangular handle the projection and path generation for the GeoJSON features.

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, with a green filled region beneath a black line. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, `area`, and `curveBasis` to generate the SVG elements. Data is loaded from a remote CSV file, with year values parsed as dates and cost values converted to numbers. The chart includes red tick labels, orange axis labels, and grid lines.

Loading thumbnail…

linechart

This line chart displays cost of sales data from 2000 to 2013, with each year’s cost plotted as a point connected by a thick lightgreen line. The visualization uses D3 v7 with an SVG rendering approach, loading data from a local CSV file via `d3.csv`. It employs `d3.scaleBand` for the X-axis (years) and `d3.scaleLinear` for the Y-axis (cost), with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The line is generated using `d3.line` with coordinates offset to align with band centers.

Loading thumbnail…

Pie Chart

A pie chart displays the count of students from each major at UNT, using a dataset of courses loaded from a remote CSV URL. The visualization renders as an SVG with colored slices, value labels, and a legend showing majors and student counts. It uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `csv` to compute arc segments, assign colors, and fetch data. The chart is positioned via SVG transforms, with styling applied through CSS.

Loading thumbnail…

Reusable Scatter plot Activity 8

This animated scatter plot of the Iris dataset cycles through four different feature combinations on the x-axis—petal width, sepal width, petal length, and sepal length—while the y-axis remains fixed on sepal length. Points are colored by species (setosa, versicolor, virginica) and switch between elliptical and circular shapes. Built with D3.js (`d3.csv`, `d3.scaleLinear`, `d3.axis`), it updates the plot every few seconds using `setInterval`, re-rendering axes and labels dynamically in SVG. The visualization appears to load data from a GitHub-hosted CSV and includes a custom legend with species names and colors.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct D3 symbol shape. It uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `symbolsFill` for categorical shapes, and `d3.axisLeft`/`axisBottom` for labeled axes. A custom legend module draws the symbol shapes alongside species names. Data is fetched as CSV and parsed with `d3.csvParse`, with numeric columns converted before rendering.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis. Each circle’s color represents the iris species—setosa in skyblue, versicolor in lightgreen, and virginica in orange. Built with D3 v6, the code loads CSV data and renders SVG circles via `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. It highlights the author's custom use of `rx` and `ry` attributes, though these do not affect the circular shape. The data comes from a GitHub-hosted CSV file.

Loading thumbnail…

Bubble chart

This bubble chart from D3 v7 visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s x-position maps to horsepower, its y-position to torque, and its radius encodes highway MPG, while color distinguishes the car brand via `d3.scaleOrdinal` with the `interpolateTurbo` palette. The chart uses `d3.axisBottom` and `d3.axisLeft` for axes, and an SVG legend explains the bubble-size scale. Interactive tooltips appear on mouseover, and the data comes from a local CSV file.

Loading thumbnail…

IMDb Movie ratings

A stacked bar chart displays the percentage of IMDb ratings across six genres, broken into five rating brackets. Each genre row uses color-coded segments to show the proportion of ratings below 5.0 through above 8.5. The visualization uses D3 v7’s `d3.stack` and `d3.scaleOrdinal` for data shaping and color mapping, with an SVG view. Interactive tooltips appear on hover, showing the exact percentage for each segment using `d3.format`. Data comes from a local CSV file loaded via `d3.csv`.

Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on a blank page. It demonstrates the basic workflow of a VizHub project by loading D3.js from a CDN and using the `select` API to target a `#message` div and set its text. The message itself comes from a local ES6 module, showcasing how to structure code across separate files. Styling is applied via an external CSS file, setting the font size and alignment.

Loading thumbnail…

BMI by Age

This scatterplot displays average Body Mass Index (BMI) by age, using data from the CDC dataset. The visualization bins individual age and BMI records into age intervals, then draws orange rectangles representing the mean BMI for each bin, with the y-axis labeled "Average Body Mass Index." The chart uses D3 v7’s `bin`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to aggregate and render the data as SVG rectangles. BMI values are computed from weight and height using the formula (weight / height²) × 703.

Loading thumbnail…

Transforming Data

This visualization displays the average sepal length for each iris species using D3 v7. The code loads iris data from a CSV file, parses it with `d3.csvParse`, and aggregates measurements using `d3.flatRollup` and `d3.sum`. Results are rendered as formatted JSON text displayed in a `<pre>` element. The example demonstrates a data transformation pipeline, starting with raw tabular data and summarizing it through grouping and reduction operations.

Loading thumbnail…

Activity 6

This example loads a remote CSV dataset and displays the first ten rows as JavaScript Object Notation (JSON) text within a webpage. It demonstrates importing specific functions, `select`, `csv`, and `csvFormat`, from the D3 library via a local ES6 module. The visualization uses an SVG-based background image as a decorative layer, while the primary output is rendered as formatted text appended to the body, using D3’s DOM selection and CSV parsing capabilities.

Loading thumbnail…

Activity 6

This example demonstrates a coordinate transformation applied to an image, converting its original aspect ratio to a square format while displaying it in an SVG. The code loads D3 via UNPKG, imports the `select` function from D3, and imports a local ES6 module that supplies the text message. The SVG contains an embedded base64-encoded JPEG image, which is rendered through a pattern definition. A separate HTML element displays the text "Hello VizHub!" using D3's `select` method, while CSS styles the message prominently.

Loading thumbnail…

My Webpage

This example demonstrates the loading and display of a CSV dataset from a GitHub Gist, showing file size, row count, and column count in a preformatted text container. The page combines basic HTML and CSS styling with D3.js v5, using the `d3.csv` API to fetch and parse the remote data asynchronously. The visualization also includes a simple inline SVG graphic with geometric shapes, and the code highlights VizHub's modular architecture through local ES6 module imports in separate JavaScript files.

Loading thumbnail…

Activity 6

This example demonstrates how VizHub integrates D3 with ES6 modules to render a simple text message. The page displays the text “Hello VizHub!” centered in a large font, using D3’s `select` function to set the content of a `<div>` element. The message itself is imported from a local ES6 module, `myMessage.js`, showcasing modular code organization. Styles are applied via an external CSS file, and D3 is loaded from UNPKG as a script tag. The visualization serves as a minimal template for combining D3, local imports, and styling.

Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on a blank page. It demonstrates the basic workflow of a VizHub project by loading D3.js from a CDN and using the `select` API to target a `#message` div and set its text. The message itself comes from a local ES6 module, showcasing how to structure code across separate files. Styling is applied via an external CSS file, setting the font size and alignment.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of randomly positioned, colored polygons overlays a large Buddha path rendered in SVG. The polygons are generated through triple-nested React map functions, using `Math.random` for coordinates, fill colors, and rotation transforms. The React and ReactDOM libraries build the output, while the Buddha itself is a complete SVG path element, scaled and translated into the center of the composition.