Skip to main content
Log in
N

numitha

@numioguri·24 public vizzes

Loading thumbnail…

Que1

This example shows a pie chart visualizing survival data from a CSV file, with each slice labeled by passenger ID and a corresponding legend. The chart is rendered as an SVG using D3 v7, employing `d3.pie` to compute arc angles and `d3.arc` to generate the path shapes. Slices are colored with `d3.scaleOrdinal` and `d3.schemeCategory10`, with labels positioned at each arc’s centroid. Data is loaded asynchronously via `d3.csv` from a remote GitHub gist.

Apr 13, 2024
Loading thumbnail…

Fork of AQ1

This pie chart visualizes survival outcomes from a dataset, displaying the proportion of survivors versus non-survivors in a circular layout. The chart uses a D3.js v7 pipeline with `d3.csv` to fetch the data, `d3.pie` to compute arc segments, and `d3.arc` for path generation, with an ordinal color scale applied via `d3.scaleOrdinal` and `d3.schemeCategory10`. It renders as an SVG with a stroke outline, opacity styling, and a legend positioned to the right.

Apr 13, 2024
Loading thumbnail…

AssQue1

This example shows a D3.js area chart displaying Happiness Scores across countries on a categorical x-axis. The visualization uses an SVG rendering approach with `d3.area` to draw a steelblue filled region beneath the score line. It loads CSV data from a GitHub gist via `d3.csv`, applies `d3.scaleBand` and `d3.scaleLinear` for positioning, and annotates axes with labels using `d3.axisBottom` and `d3.axisLeft`.

Apr 13, 2024
Loading thumbnail…

ASSQ1

This pie chart visualizes data loaded from a remote CSV file, showing proportional values for different categories. While the code never fully implements a pie chart, it sets up an SVG-based visualization using D3.js, importing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from the D3 library. The example includes placeholder data and color schemes, with a scatter plot function that assembles circles and axes, though the actual pie chart rendering is incomplete. The text styling uses the 'Times New Roman' font, and the page layout is configured through the accompanying CSS file.

Apr 13, 2024
Loading thumbnail…

Fork of Act6_Q4

This bubble chart displays the correlation between processor speed, RAM, and storage across multiple smartphone brands, with each circle's x-position, y-position, and radius representing the three respective specifications. The chart also uses different colors to distinguish brands, with a legend identifying each one. Built with D3.js v7, the visualization loads data from a CSV file and renders as an SVG, using `d3.scaleLinear` for the axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for brand colors, and the `d3.axisBottom` and `d3.axisLeft` APIs for the coordinate system.

Apr 6, 2024
Loading thumbnail…

Act6_task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque, while its size represents highway MPG, and its color distinguishes the manufacturer. The visualization uses d3.csv to load the data and d3.scaleLinear for axes and bubble scaling, with an SVG-based tooltip showing the car make on hover. A legend displays MPG value references and color-coded make labels.

Apr 6, 2024
Loading thumbnail…

Activity6_Q3

This scatter plot visualizes the relationship between color intensity and alcohol content in a wine dataset. The D3.js v6 code loads data from a remote CSV file, parses the numeric fields, and uses `scaleLinear` and `extent` to map the values to SVG coordinates. Circles are rendered with `steelblue` fill, with axes labeled "Alcohol" and "Color Intensity" via `axisLeft` and `axisBottom`. The chart displays a clear positive trend between the two variables.

Apr 6, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot displays the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses D3 v6’s `csv` loader to fetch data from a remote URL, then employs `scaleLinear` and `extent` to compute scales and axes, rendered as SVG circles with width and height derived from the window dimensions. Axis labels are added via `svg.append` and rotated text.

Apr 6, 2024
Loading thumbnail…

Fork of Activity 6

This scatter plot visualizes the Wine dataset, mapping color intensity on the x-axis and alcohol content on the y-axis. It displays 178 data points as steel-blue circles within an SVG canvas. Built with D3 v6, the code uses `csv` to load remote data, `scaleLinear` for both axes, and the `axisLeft` and `axisBottom` functions to render tick marks and labels. The plot’s scales are computed from the data’s extent, and axis titles appear in green text.

Apr 6, 2024
Loading thumbnail…

Activity6_3.2

This scatter plot visualizes Iris flower measurements, plotting sepal length against petal length while using different shapes to distinguish between species. The visualization loads the Iris dataset from a remote CSV file using `csvParse`, then renders the points with `d3.symbol` glyphs. A shape legend identifies each species, while `d3.scaleLinear` and `d3.scaleOrdinal` handle the continuous axes and categorical shape mapping. The chart includes labeled axes and a legend positioned within the SVG canvas.

Apr 6, 2024
Loading thumbnail…

Activity6_q2

This stacked bar chart visualizes the percentage distribution of five sales performance categories (Below 100, 100-500, 500-1000, 1000-5000, Above 5000) across six product categories, showing how sales outcomes vary by product type. Using D3.js v7 with SVG rendering, the chart employs `d3.stack()` to generate stacked segments and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The data comes from a local CSV file, and the visualization uses linear and band scales for positioning.

Apr 6, 2024
Loading thumbnail…

222

This stacked bar chart shows the percentage distribution of sales performance across five product categories, with each bar segmented into five sales ranges from "Below 100" to "Above 5000". Hovering over a segment reveals a tooltip with the exact percentage for that category and range. The visualization uses d3.stack() to create the stacked segments, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Data comes from a CSV file with pre-calculated proportions summing to 1 for each category.

Apr 6, 2024
Loading thumbnail…

Act6_Qu2

Act6_Qu2 visualizes how sales performance categories (Electronics, Clothing, Home Decor, Books, Toys, Groceries) distribute across five percentage bands, from “Below 100” to “Above 5000.” Each stacked bar shows the proportion of sales falling into each band, with the total normalized to 100%. Built with d3.v7, it uses `d3.stack` to generate the layered series and `d3.scaleOrdinal` for color mapping. Hovering over a segment highlights it and displays the exact percentage via a tooltip. The SVG chart includes labeled axes and a legend derived from the provided CSV data.

Apr 6, 2024
Loading thumbnail…

Act6_q2

This stacked bar chart shows the percentage distribution of five rating levels across different movie genres, revealing how genre influences audience ratings. Each horizontal bar represents a genre, subdivided into colored segments corresponding to rating categories, with hover interactions displaying precise percentages via tooltips. The visualization uses D3 v7’s `d3.stack()` to compute stacked data, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Data is loaded from a CSV file where ratings are pre-calculated as percentages summing to 1, rendered as SVG rect elements with ordinal color scaling.

Apr 6, 2024
Loading thumbnail…

Activity6_task2

This stacked bar chart shows how IMDb movie ratings are distributed across six genres, with each bar segment representing the percentage of films falling into a rating bracket. The chart uses d3.stack and d3.scaleBand to construct the visualization, with data loaded from a CSV file. Color-coded segments correspond to rating categories, and hovering over any bar segment reveals the exact percentage via a tooltip built with d3.select. The SVG rendering employs d3.axisBottom and d3.scaleOrdinal for the x-axis and color scheme.

Apr 6, 2024
Loading thumbnail…

Activity6_Task2

A stacked bar chart displays the percentage distribution of IMDb ratings across six movie genres, with each bar segmented into five rating levels from "below 5.0" to "above 8.5." Hovering over a segment reveals a tooltip showing the exact percentage for that rating level within the genre. The visualization uses d3.stack() to compute stacked data, d3.scaleOrdinal for color encoding, and d3.scaleBand for categorical positioning on the y-axis. The data comes from a CSV file loaded via d3.csv, rendered as SVG elements with mouse event handlers for interactivity.

Apr 6, 2024
Loading thumbnail…

Act6_Q1.1

This bar chart displays the top ten countries by population in the year 2000, using a horizontal layout with a logarithmic scale for the population axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. Data is loaded from a CSV file via D3's `csv` function, with population values calculated by multiplying the raw data by 1000. The chart uses SVG rendering with interactive tooltips showing formatted population values on hover.

Apr 5, 2024
Loading thumbnail…

Fork of Act6_Q1.2

This example shows the populations of the top 20 countries in 2010 as a horizontal bar chart. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with SVG rectangles rendered via React. Data is loaded from a CSV using D3’s `csv` parser and formatted with `format('.2s')`. The chart includes styled axes and tooltips that display each bar’s value.

Apr 5, 2024
Loading thumbnail…

activity6_task 1

This example shows a horizontal bar chart of 2020 population figures for 30 countries, with a green mark for each bar and blue tick lines on the axes. The React-based application loads CSV data via d3.csv, scales it with d3.scaleBand and d3.scaleLinear, and formats tick labels using d3.format. The SVG rendering uses reusable components for the axes and marks, with tooltips provided by SVG title elements. Population values are converted from raw numbers by multiplying by 1,000.

Apr 5, 2024
Loading thumbnail…

Activity6

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered in a large font. It shows how to load D3 via CDN, import specific functions like `select` using ES6 modules, and import a local module for the message string. The code uses `d3.select` to set the text content of the `#message` div, with styling applied via CSS. It serves as a template for combining external libraries and local modules in a web-based visualization project.

Apr 4, 2024
Loading thumbnail…

6 budhas

A dense field of randomly positioned, rotated polygons in vibrant colors serves as the backdrop for six large, identical Buddha silhouettes rendered in black. The polygons are generated through nested `Array.map` iterations in React, with their coordinates, fill colors, and rotation determined by `Math.random`. The Buddha paths are drawn using SVG `path` elements within `ReactDOM` and a `<svg>` container, with the entire composition set against a black background. The visualization demonstrates the contrast between chaotic generative geometry and structured, repeating iconography.

Apr 4, 2024
Loading thumbnail…

5Buddas

Five intertwined Buddha silhouettes emerge from a dense field of rotating, randomly colored polygons on a black background, creating a layered, mandala-like composition. The piece uses React to render SVG elements, with nested `map` functions generating hundreds of polygon shapes whose positions, sizes, and rotations are determined by `Math.random()` calls. Each polygon is filled with an RGB color computed from random values, set to full opacity. The central Buddha paths are defined as complex SVG `path` data, transformed via scaling and translation to create the overlapping visual effect.

Apr 4, 2024
Loading thumbnail…

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

A chaotic generative artwork layers hundreds of semi-transparent, rotated polygons with random colors and coordinates, creating an overlapping, kaleidoscopic pattern over a green background. A large SVG path depicting a Buddha figure is rendered on top, scaled and translocated. Built with React, the visualization uses nested array maps to produce polygons, with ReactDOM rendering the SVG elements and inline style attributes driving the random visual output.

Apr 4, 2024
Loading thumbnail…

5Buddha

The visualization displays five overlapping Buddha silhouettes, each rendered as a distinct SVG path filled with semi-transparent color, creating a layered, ghostly composition against a black background. A field of randomly positioned circles, generated with React’s `map` function and `Math.random()` for coordinates and RGB values, surrounds the figures. The paths are drawn using SVG `<path>` elements with complex cubic Bezier commands, while the circles use `<circle>` tags with computed opacity and color. The code relies on React and ReactDOM to structure the SVG canvas, with no external data source; all geometry and styling are procedurally generated within the JavaScript.

Apr 4, 2024