I

indushashi.g@gmail.com

@INDU1998-GIT·44 public vizzes

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements across three species. Using D3.js with SVG rendering, the plot cycles through different measurement pairings on the axes via setInterval, updating the scatter plot dynamically. The visualization employs d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom, and a reusable scatterPlot function to handle axis scaling and rendering. Points are color-coded by species (setosa, versicolor, virginica) with a legend, while axis labels and a title update to reflect the current dimension selection.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle’s position maps horsepower on the x-axis and torque on the y-axis, while its radius and color encode highway MPG and car brand. Built with d3.v7, it uses d3.scaleOrdinal for color, d3.scaleLinear for sizing, and SVG elements with mouseover tooltips displaying the make. A legend explains bubble sizes and brand colors, with data loaded from a CSV file.

Loading thumbnail…

Activity 7

A horizontal bar chart shows the populations of 30 countries in 2020, ranked by country name, with bars colored green on a white background. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Population values are formatted with `d3.format` and displayed with tick labels, while data is loaded asynchronously from a CSV via `d3.csv`.

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, with each of the three iris species colored differently (skyblue, lightgreen, and orange). It also encodes sepal length and width as the rx and ry attributes of each circle, though these do not affect the rendering since the radius is fixed. The visualization uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values, and render axes. Data is loaded from a raw GitHub gist CSV file, and the SVG is sized to the full browser window.

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, with each bar segment representing a rating range from below 5.0 to above 8.5. Hovering over a segment reveals an exact percentage via a tooltip. The visualization uses d3.csv to load data, d3.stack for stacking, and d3.scaleOrdinal for color coding. SVG rectangles render the bars, while d3.axisBottom and d3.axisLeft provide the percentage and genre scales. Data originates from an external CSV file.

Loading thumbnail…

Fork of Activity 7

This example shows the population of the top 20 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. It is rendered as SVG in a React application using D3 v5 scales such as `scaleBand` and `scaleLinear`, with data loaded from a CSV file via D3’s `csv` function. The bars are colored light green, and the x-axis labels use D3’s `format` to abbreviate values into billions.

Loading thumbnail…

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

The visualization renders a dense, abstract composition of overlapping diamond-shaped polygons, repeated through nested `A.map()` loops in React, with each triangle’s position, size, color, and rotation randomized per iteration. Built with React 16.10 and rendered as SVG, it layers a static Buddhist icon path—drawn via `d3`-style path data—at the center, surrounded by the chaotic, semi-transparent geometric shapes. The code uses `Math.random()` to generate fill values in RGB ranges and apply rotation transforms, producing a vibrant, collaged effect atop the green background.

Loading thumbnail…

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

A Buddhabrot fractal visualization rendered in React with SVG, featuring overlapping, semi-transparent Buddha-like patterns in a vibrant multicolor palette. The code generates 30 iterations of nested mappings, each drawing semi-transparent colored shapes with random RGB values, creating a dense, layered composition. The background image of flowers adds an organic backdrop to the geometric SVG overlay, while the title references multiple forks of the original visualization, emphasizing its iterative and remixed nature. Built with React and SVG, the visualization explores randomness, repetition, and opacity to produce a complex, evolving visual artifact.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This interactive bar chart visualizes the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization is implemented in React and uses d3’s `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. A custom `useData` hook fetches the CSV data, and d3’s `format` function converts large numbers into abbreviated tick labels. The chart includes axes with styled ticks and a hover tooltip revealing the exact population via SVG `<title>` elements.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. It visualizes population values on a horizontal linear scale with a band scale for country names. The React app loads and processes the CSV data, then renders SVG elements with D3 v5 scales. The code includes custom axis components, rect marks with tooltips, and a formatted x-axis that abbreviates large numbers using `d3.format` with SI prefixes.

Loading thumbnail…

MuscleCars tree

This visualization displays a hierarchical tree of muscle car models organized by their manufacturers, with nodes representing brands like Ford and Dodge and their respective car models such as Mustang and Charger. The tree uses color-coded nodes based on hierarchy depth and includes interactive features like clickable nodes and zooming via d3.behavior.zoom. Built with D3.js v3, it renders the structure as an animated SVG, pulling data from a JSON file and styling nodes with rect elements and tooltips.

Loading thumbnail…

Network Graph

A force-directed network graph visualizes social connections among ten people, with labeled nodes and directed, arrowed links. Node size reflects connection strength through link thickness, and hovering highlights a node. The example uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, rendering in SVG. Data comes from `graph.json` and includes relationship types and values. Interactive dragging is implemented via `d3.drag`.

Loading thumbnail…

Activity 8 Country

This example displays a single-country map of India using a Mercator projection. It fetches world geometry from the world-atlas TopoJSON dataset, extracts the India feature, and renders it as an SVG path. The visualization uses D3 v5’s `d3.json` for data loading, `d3.geoMercator` and `d3.geoPath` to project and draw the boundary, and `topojson.feature` to convert the TopoJSON data into GeoJSON. The map is sized to 960 by 500 pixels and fills the viewport based on India’s extent.

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, with a smooth, curved line tracing the trend and a light green fill beneath it. Built with D3 v5 and rendered as an SVG, the visualization uses `scaleTime` and `scaleLinear` for the axes, with `axisLeft` and `axisBottom` providing tick marks and labels. The smooth line and area are generated via `line()` and `area()` with `curveBasis` for interpolation. It loads its data from an external CSV file, parsing the year values as dates and cost as numbers.

Loading thumbnail…

Activity 8 Map

This example shows an interactive world map with zoom and pan capabilities. The map renders countries as light green SVG paths with indigo borders on a sky-blue sphere background, and countries turn maroon when hovered. The visualization uses D3 v5’s `geoEquirectangular` projection with `geoPath` to draw geographic features, and `zoom` for user interaction. TopoJSON is used to convert world-atlas country data into GeoJSON features.

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, with time on the x-axis and cost on the y-axis. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, and `line` with `curveBasis` for the smoothed line, while `area` fills the region beneath it in light green. Data is loaded from a CSV file via D3’s `csv` function, and the SVG output includes gridlines, red tick labels, and orange axis labels.

Loading thumbnail…

linechart

A line chart tracks cost of sales from 2000 to 2013, using a CSV dataset with year and cost columns. The visualization renders an SVG with D3 v7, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the path. The chart includes labeled axes and a light green stroke, with red axis labels and a styled heading.

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of students across majors at the University of North Texas. D3.js v5 renders each major as a colored slice with a proportional value label, alongside a legend that maps colors to major names and student counts. The data is loaded from a CSV file via `d3.csv`, and the chart uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute the arcs and assign a categorical color palette.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example uses a D3 v7 scatter plot to visualize the Iris flower dataset, mapping sepal length to the x-axis and petal length to the y-axis. The three species are distinguished by different symbol shapes from d3.symbol, rendered with `symbolGenerator.type()` and a `scaleOrdinal` mapping to `symbolsFill`. A custom legend, built with the shapeLegend module, displays the species-to-shape correspondence, while the axes module adds labeled axis scales via `d3.axisLeft` and `d3.axisBottom`. Data is fetched as CSV and parsed with `d3.csvParse`, with numeric values converted before plotting.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length versus petal width with points colored by species (setosa, versicolor, virginica) in skyblue, lightgreen, and orange. It also encodes sepal length and width as the rx and ry properties of each circle, though these do not affect the visible shape since the radius remains fixed. Built with D3 v6, the code loads CSV data via `d3.csv`, scales the axes with `scaleLinear`, draws circles using SVG, and adds labeled axes with `axisLeft` and `axisBottom`.

Loading thumbnail…

Activity 7

This visualization displays the top 20 countries by population in 2020 using a horizontal bar chart, rendered as SVG elements within a React application. The chart uses D3's `scaleBand` and `scaleLinear` to map country names and population values to visual positions, with a red-tinted axis and green bars. Population data is loaded via D3's `csv` function from a remote URL, and tooltips show formatted values using D3's `format` API. The chart includes custom axis components that label values with a "B" suffix for billions.

Loading thumbnail…

BMI by Age

This example shows the average Body Mass Index (BMI) of individuals binned across age groups, with the x-axis displaying age and the y-axis displaying average BMI. The data is loaded from a CSV file hosted on GitHub, with BMI calculated from weight and height columns. Using D3 v7, the visualization employs scales, axes, and a binning function to aggregate the data. It renders orange rectangles for each bin, with axis labels and a title, demonstrating D3's `csv`, `scaleLinear`, `axisBottom`, `axisLeft`, and `bin` APIs.

Loading thumbnail…

BMI by Age

This visualization displays average Body Mass Index (BMI) across different ages using a bar chart where each bar represents a binned age group. The chart uses D3's `bin` and `scaleLinear` functions to aggregate the CDC dataset into age ranges, with `avgBMI` calculating the mean BMI per bin. Bars are rendered as SVG rectangles with orange fills and white strokes, while axes are generated via `axisBottom` and `axisLeft` with custom tick styling. The BMI values are computed from weight and height measurements using the standard formula, with data loaded from a remote CSV source.

Loading thumbnail…

tsk

This example loads the classic Iris flower dataset from a CSV file and computes the average sepal length for each species using d3.flatRollup and d3.sum. The resulting summary is rendered as JSON text in a pre element, demonstrating asynchronous data loading with fetch, parsing with d3.csvParse, and state management through a simple setState pattern. The visualization is built with d3.v7 and local ES6 modules.

Loading thumbnail…

Fork of Hello VizHub

This example displays the average sepal length for each iris species in the classic Iris dataset. It reads the CSV file using `fetch` and parses it with `d3.csvParse`, then summarizes the data using `d3.flatRollup` and `d3.sum`. The resulting calculated averages are rendered as a JSON object inside a `<pre>` element via `d3.select` and `selection.join`. The visualization demonstrates loading D3 from UNPKG, importing from local ES6 modules, and managing asynchronous data loading through a state-based render cycle.

Loading thumbnail…

Transforming Data

This visualization displays the average sepal length for each iris species in the Fisher Iris dataset, computed from the raw measurements in data.csv. The code first parses the CSV with `d3.csvParse`, converts numeric fields, then uses `d3.flatRollup` and `d3.sum` to aggregate the data by species, calculating the mean sepal length per group. The result is rendered as formatted JSON text in a `<pre>` element, with the data loading process managed through a simple state machine and `fetch` to retrieve the CSV file.

Loading thumbnail…

Activity 6

This example demonstrates a workflow for fetching and inspecting tabular data from a remote CSV file using D3 version 5 within a Vue framework. It begins by showing the first ten rows of the dataset in a formatted JSON structure, revealing the data's shape and content. The visualization relies on D3's `csv` function to load the data and the `select` API to target the HTML body for display, with raw SVG embedding a background image.

Loading thumbnail…

Activity 6

This example demonstrates a minimal setup for integrating D3.js with ES6 modules in VizHub. It displays a large, centered “Hello VizHub!” message by dynamically setting the text content of an HTML element. The code imports the `select` function from D3 via UNPKG, and imports a local ES6 module exporting the message string. It uses D3’s `select` and the `text` method to update the targeted div, with styling applied through an external CSS file. The example illustrates basic module imports, CDN loading, and DOM manipulation with D3.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal “Hello VizHub!” application, rendering the message centered on the page using D3.js. It shows how to load D3 v5 from a CDN via UNPKG, use ES6 module imports to bring in the `select` function from the D3 library, and define custom local modules for sharing code. The visualization sets the text content of a `div` element with the id `message` using D3’s `select` and `.text` methods, styled by a separate CSS file. The data source is a simple hardcoded string from a local module.

Loading thumbnail…

using url Transforming Data

This example demonstrates how to fetch and transform CSV data from a remote URL using D3 v7. It loads the classic Iris flower dataset, parses it with `csvParse`, converts string values to numbers, and then applies `flatRollup` to calculate the average sepal length for each species. The resulting summary is rendered as a JSON object in a `<pre>` element, showing a simple text-based visualization of aggregated data. The code uses `fetch`, `select`, and `setState` for asynchronous data loading and re-rendering.

Loading thumbnail…

Transforming Data

The visualization demonstrates how D3 data transformation APIs can reshape the Iris dataset, computing the average sepal length for each species via `flatRollup` and `sum`. After fetching the CSV with `fetch()`, the data is parsed with `csvParse` and converted to numeric types. Results are displayed as formatted JSON in a `<pre>` element, showing a concise summary of the aggregated values. The example highlights the use of `flatRollup` and `sum` from the D3 API to perform binned aggregation and group operations.

Loading thumbnail…

Activity 6

This example shows a single webpage that displays the text “Hello D3 version 7” centered in a very large font size. It demonstrates the basic setup for using D3 version 7, with the library loaded from an external CDN. The code uses the `d3.select` method to target the body element and the `text` method to set its content. The example is a minimal introduction, with a YouTube video embedded in the README for further guidance.

Loading thumbnail…

Transforming Data

This visualization presents a scatter plot of the Iris dataset, transforming the raw CSV data into a visual analysis of flower species. It uses a D3.js force simulation to position the data points, which likely employs a clustering algorithm to separate the three species. The visualization is built with React and uses D3's core functions to map data dimensions to visual properties, with a tooltip system for exploring individual data points. The code accesses the data via a GitHub raw URL and renders it through a D3-generated SVG, demonstrating a modern React-D3 integration for exploratory data analysis.

Loading thumbnail…

boxplot

This example visualizes the distribution of automobile prices using a box plot, displaying the minimum, maximum, quartiles, median, and outliers. The code loads data from a CSV file hosted on GitHub, calculates the statistical measures with d3.min, d3.max, d3.quantile, and d3.median, and renders the chart as an SVG. It uses the d3-boxplot library to draw the box plot, with the chart titled "Box Plot of Car Prices" within a 600x400 viewport.

Loading thumbnail…

Age summary

This example displays the first ten rows of the UCI Auto MPG automobile dataset as raw JSON text on a black background. It shows how to load external CSV data using D3’s `csv` method, then formats the parsed array with `JSON.stringify` for output. The page is styled with custom CSS, uses D3 v5, and appends the data summary to the body via `select` and `append`.

Loading thumbnail…

histogram

This example displays a bar chart of car prices by make, with price on the vertical axis and car manufacturers along the horizontal axis. It uses d3.csv to load automobile data from a GitHub gist, then scales and renders the bars using d3.scaleBand, d3.scaleLinear, and d3.axisBottom/d3.axisLeft. The visualization is drawn as an SVG within a React project, with rotated x-axis labels and a title, using d3.v6.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This fork of a fork of a fork of an ICE-6 bar graph displays Amazon prices across different states, with an embedded instructional YouTube video and a data preview showing the first 10 rows from a GitHub-hosted CSV file. The visualization uses React and D3 v5, leveraging `d3.select` and `d3.csv` to fetch and parse the remote dataset, then outputs the raw JSON to the page. The interface includes a large centered title and a minimal layout without custom chart rendering.

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart displays the cost of sales from 2000 to 2013, with time on the x-axis and cost on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` API to render an SVG path with labeled axes and a title. Data is loaded as CSV from a GitHub gist, with year values parsed as dates and cost as numbers. The chart includes grid lines, axis labels, and a red stroke for the line path.

Loading thumbnail…

Fork of ICE 6

A bar chart displays automobile prices across car makes, sourced from a CSV dataset. The visualization uses D3 v5 to load data via `d3.csv` and render SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels. The chart includes titles and axis labels, with bars colored steelblue.

Loading thumbnail…

ICE 6

This example shows a histogram of automobile horsepower values, with frequency counts displayed as steel-blue bars. It loads CSV data from a remote GitHub gist and uses D3 v5’s `d3.histogram` with a linear scale to bin the values into ten intervals. The SVG chart includes labeled axes, a title, and axis ticks via `d3.axisBottom` and `d3.axisLeft`, rendering entirely in SVG.

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to parse the CSV data, apply time and linear scales, and draw a smoothed curve via `line()` with `curveBasis`. Axis labels and tick marks are generated using `axisBottom` and `axisLeft`, while the SVG rendering includes a maroon path with styled gridlines and text elements.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a blank page, using a single CSS class to set a large font size and center alignment. It serves as a minimal demonstration of combining HTML structure, CSS styling, and JavaScript. The code uses plain HTML `<div>` and `<style>` tags without external libraries or frameworks. No data processing or dynamic rendering occurs; the page simply renders static content as a basic starter template.

Loading thumbnail…

5 Buddhas

The visualization shows a scattered field of 1000 small colored circles overlaid with five hand-drawn Buddha silhouettes rendered as SVG paths. It uses React to compose the SVG structure and maps nested arrays to generate random circle positions with varying RGB colors and opacity. The Buddha images are static path data, while the circles create a noisy, organic texture across the black background. React and ReactDOM handle rendering the SVG elements directly in the browser.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a blank page, using a single CSS class to set a large font size and center alignment. It serves as a minimal demonstration of combining HTML structure, CSS styling, and JavaScript. The code uses plain HTML `<div>` and `<style>` tags without external libraries or frameworks. No data processing or dynamic rendering occurs; the page simply renders static content as a basic starter template.