N

nikhithaaitha22@gmail.com

@nikhithaaitha·21 public vizzes

Loading thumbnail…

7-q2

This visualization displays the relationship between age and BMI in a diabetic patient dataset, using a semi-transparent steel-blue area chart to emphasize the distribution of BMI values across different ages. The SVG-based chart, built with D3 v7, loads data from a remote CSV file and uses `d3.scaleLinear` for both axes, `d3.area` to generate the filled region, and `d3.axisBottom` and `d3.axisLeft` to render labeled axes for Age and BMI respectively.

Loading thumbnail…

7-q1

This pie chart shows the distribution of mobile device types from a CSV dataset sourced from GitHub, displaying each device model’s count as a labeled slice with a legend. It uses D3.js v7 APIs including `pie()`, `arc()` for SVG path generation, `scaleOrdinal` for color mapping, and `csv()` for data loading. The code aggregates raw records by device model, then renders colored arcs with count labels and a legend, all within an SVG container styled with an external stylesheet.

Loading thumbnail…

activity6_task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. The code uses D3.js v7 to render SVG circles, with bubble size encoding MPG and color encoding the car manufacturer. Interactive tooltips display the car make on mouseover, while a legend clarifies the bubble size mapping. The chart includes labeled axes and a title, with data loaded from a CSV file and a custom color scale using `d3.interpolateTurbo`.

Loading thumbnail…

activity6_task4q9

This interactive bubble chart explores the relationship between population, urban population, and median age across various countries and years. Each circle’s x-coordinate maps to total population, its y-coordinate to urban population, with bubble size reflecting median age and color encoding the year of the data. Built with D3 v7, it employs `d3.scaleLinear` for continuous axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical year colors, and uses `d3.axisBottom` and `d3.axisLeft` for axes. Hovering reveals a tooltip with the country’s exact statistics, while a legend identifies the color-year mapping. Data comes from the included `bubblechart.csv` file.

Loading thumbnail…

Activity6question3

This example visualizes a sales dataset as a scatter plot, plotting total sales on the x-axis against order numbers on the y-axis, with points colored by customer using `d3.scaleOrdinal` and `schemeTableau10`. A legend identifies each customer, and hover tooltips display product details and total sales. The chart loads CSV data from a GitHub repository via `d3.csv` and renders as SVG, using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Loading thumbnail…

question3.6

A scatter plot displays sales data from a CSV file, plotting total sales on the x-axis and order numbers on the y-axis with circles colored by customer. The visualization includes axes, a legend, and interactive tooltips showing product and sales details. It uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, with SVG rendering and the Tableau10 color scheme.

Loading thumbnail…

tutorial3.2

This example demonstrates a scatter plot of the Iris dataset, showing sepal length versus petal length, with species encoded by symbol shapes and a corresponding shape legend. The visualization uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, `d3.axisLeft`, and `d3.axisBottom`. Data is loaded asynchronously as CSV and parsed with `d3.csvParse`. The code is modularized into separate ES6 modules for the scatter plot, axes, and legend, built as a reusable visualization component.

Loading thumbnail…

activity6_task3

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica) using D3's `csv` loader and `scaleLinear` scales. The SVG rendering uses `axisLeft` and `axisBottom` for labeled axes, with tick text styled at 20 pixels. Circle marks are colored skyblue, lightgreen, or orange, and the chart includes green axis labels for sepal length and petal length. The visualization reads data from an external CSV file hosted on GitHub.

Loading thumbnail…

question3.6

This example demonstrates a minimal D3.js setup within VizHub, showing how to load the library via UNPKG and use ES6 modules for local code organization. It renders a greeting message by selecting a DOM element with `d3.select` and setting its text content, while applying styling through an external CSS file. The visualization highlights basic setup patterns rather than data-driven graphics, with no datasets or scales involved. The code imports utilities from the `d3` package and a custom exported variable from a local module, illustrating modular JavaScript structure for web-based visualizations.

Loading thumbnail…

question2

This stacked bar chart visualizes the Iris dataset, showing the average measurements of sepal length, sepal width, petal length, and petal width for three Iris species: setosa, versicolor, and virginica. Using D3.js v7, the visualization applies `d3.stack()` to arrange the four numerical attributes as stacked segments within each species category. The code uses scale bands and linear scales for positioning, with color encoding via `d3.scaleOrdinal` and the Category10 color scheme. The resulting SVG provides a compact comparison of the relative contributions of each measurement type across species.

Loading thumbnail…

Activity6_task2

This visualization shows the distribution of IMDb ratings across different movie genres, with each genre displayed as a horizontal stacked bar representing five rating categories from “below 5.0” to “above 8.5.” The stacked bars are rendered as SVG rectangles using D3 v7’s `d3.stack()` and `d3.scaleBand()` for the categorical y-axis, while a linear scale maps the percentage values. A tooltip appears on mouseover to show the exact percentage for each rating segment. The data comes from the included `data.csv` file.

Loading thumbnail…

question2

This example displays a horizontal bar chart of population figures for 20 countries in 2010, sorted by country name. The visualization uses React to render SVG elements, with D3 v5 functions such as `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and tick labels. Data is loaded from a remote CSV file via `d3.csv`. The chart includes axis ticks with custom formatting, light green bars, and tooltips that display the population value in billions when hovered.

Loading thumbnail…

Activity 6 - Bar Chart

This example shows a horizontal bar chart of the top 10 countries by population in the year 2000. It uses React to render SVG primitives and D3's `scaleBand` and `scaleLinear` for positioning. The bars are colored green, and hovering reveals a tooltip formatted with D3's `format`. Data is loaded asynchronously from a remote CSV file via D3's `csv` function, and the chart includes custom axes with formatted tick labels.

Loading thumbnail…

question1

This example demonstrates the fundamental text rendering capabilities of D3.js alongside the use of local ES6 modules. It loads D3 via UNPKG and uses the `select` function to target a div element by its ID, then sets its text content to a message imported from a separate module. The example also includes a regular expression and a numeric constant defined in the main script, though these values are not used in any visible output. A CSS file styles the message with large, centered text.

Loading thumbnail…

Activity 6_task 1

This bar chart displays the population of ten countries in the year 2000, sourced from a remote CSV file. Built with React and D3, it uses `scaleBand` and `scaleLinear` to position rectangular marks, with axes rendered by custom React components. The chart loads data via D3’s `csv` function, formats tick labels using `format`, and limits the dataset to the first ten entries.

Loading thumbnail…

Activity6_Task3

This example demonstrates a minimal setup for a VizHub project, displaying the text "Hello VizHub!" in the center of the page using a large font size. It loads D3 v5 from UNPKG and uses the `select` function to set the text content of a div element. The project also showcases ES6 module imports by defining and using a `message` constant from a separate local file, along with basic CSS styling and JavaScript features like a regular expression.

Loading thumbnail…

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

This visualization displays a deeply layered, recursive composition of Buddha silhouettes, rendered as overlapping semi-transparent polygons in a vibrant, randomized color palette. The React and ReactDOM libraries generate a large SVG canvas, where multiple nested map functions produce hundreds of polygons with random positions and colors, creating a dense, abstract mandala-like effect. Atop this generative backdrop, a single static Buddha path is drawn using raw SVG path data, scaled and translated to form the central image. The code relies on JavaScript's built-in `Math.random()` for both color and positioning, and the SVG `<path>` and `<polygon>` elements for all geometric rendering, with the entire scene set against a floral background image via CSS.

Loading thumbnail…

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

A monochrome Buddha silhouette is layered with hundreds of overlapping colored circles, creating a vibrant, chaotic texture over the black background. The visualization uses React to render SVG elements, with a triple-nested `map` generating circles whose positions, colors, and opacity are randomized via `Math.random()`. The Buddha path is drawn using SVG `d` coordinates, scaled and translated via a `<g>` transform.

Loading thumbnail…

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

This React and SVG visualization presents a symmetrical arrangement of repeated Buddha figures. Using a single base path, the code employs React's `use` element to clone the shape across seven positions, applying `scale` transforms with negative values to create mirrored reflections. The rendering relies on ReactDOM and SVG group elements, with a black background and gold-filled paths, producing a kaleidoscopic pattern of overlapping, colored Buddhas distributed in a vertical sequence.

Loading thumbnail…

5 Buddhas

Five Buddhas is a generative SVG composition built with React and ReactDOM, rendering a field of semi-transparent polygons with randomized positions and colors derived from cubic expressions. Over this abstract backdrop, a single ornate Buddha silhouette is defined through an extensive SVG path, applied five times using transforms to create overlapping, scaled copies. The piece explores computational randomness against structured iconography within a black canvas.

Loading thumbnail…

5 Buddhas

A grid of multicolored circles scatters across a black background, layered beneath a single, larger Buddha outline in red. The circles are generated by nested React map functions, with random positions, RGB fill values, and opacity. The Buddha path is a static SVG path, rendered with a wide red stroke, while the circles and path are drawn using React and SVG in a `react` and `react-dom` setup, with no external data source.