N

naveen.dodda4321@gmail.com

@nawindodda·33 public vizzes

Loading thumbnail…

Project_indian_Agriculture

This example presents an interactive bar chart of Indian agricultural data, allowing users to select a state and district from dropdown menus to load corresponding crop statistics. The visualization displays area, production, and yield metrics for various crops across different years using D3.js v7 to render SVG bars. The chart includes hover highlighting and a custom tooltip, with data structured as an inline JSON array containing detailed records for each district and crop type.

Loading thumbnail…

Project_Population

This example displays state-level population data for India in 2021 through an interactive line chart. Users select a state from a dropdown menu and load its corresponding visualization, which renders population figures using D3.js v7 in an SVG container. The chart includes a tooltip that appears on hover, styled with CSS transitions to show detailed population metrics. The data is embedded directly in the JavaScript as JSON objects containing comprehensive demographic information for each district.

Loading thumbnail…

Project_D3

This example displays a bar chart comparing annual temperature data for each year from 1961 onward. The chart uses D3.js v7 to render SVG bars, with a hover effect that changes bar color to yellow. The bars represent annual temperature values across the years, with x and y axes labeled for reference. The code includes a tooltip component styled with CSS, though the interaction behavior is not fully implemented in the visible script.

Loading thumbnail…

d3line_area

This example demonstrates a minimal "Hello World" visualization in the VizHub V3 runtime, displaying text at a large, adjustable font size centered on the page. It shows how a basic HTML element can be dynamically rendered and updated through JavaScript. The code uses the `main` export function to inject a string with inline styles into the container. The visualization relies on plain DOM manipulation with template literals, and the font size can be interactively changed via Alt-drag, though no data or charting library is involved.

Loading thumbnail…

d3webpage

This example demonstrates a minimal interactive setup in the VizHub V3 Runtime Environment, displaying a centered "Hello World!" message with a large, adjustable font size. It uses the exported `main` function to inject HTML into a container, with the font size defined as a numeric value that can be changed manually. The blank-slate state highlights the integration of JavaScript with live-reloading widgets, serving as a foundational template for more complex visualizations.

Loading thumbnail…

Agriculture_Project_D3

A bar chart displays tourist visitor counts across U.S. states for 2019, 2020, and 2021, using data sourced from the ICRISAT District Level dataset via a CSV URL. The visualization, built with D3.js v7 and rendered as SVG, uses `d3.scaleBand` for the x-axis (states) and `d3.scaleLinear` for the y-axis (visitors), with axes stripped of domain lines for a cleaner look. Rectangles are joined via `d3.join` and positioned by year, though the code appears to bind rice production values to the bar heights rather than tourist counts, and includes axis labels and a title. Styling comes from an external CSS file, while the layout uses a fixed 800x500 canvas with margins.

Loading thumbnail…

Area_Chart_Question2

This area chart displays India’s population over time using data from a CSV file loaded via `d3.csv`. The SVG visualization uses `d3.area()` to generate a steelblue filled path, with linear scales (`d3.scaleLinear`) mapping years and population values. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with formatted tick labels and axis titles. The chart is positioned within margins, and the data values are converted to numbers before rendering. The example demonstrates loading external data and building a basic area chart entirely with D3 v7.

Loading thumbnail…

Area_Chart_Question2

This area chart displays the population of the United Kingdom from 2010 to 2023. The visualization uses D3.js v5 to render an SVG with a time-scaled x-axis and a linear y-axis for population counts. The chart features a smooth basis-curve line and a filled area beneath it, with data loaded from a local CSV file. Axis labels, tick formatting, and chart styling are all handled through D3's scale, axis, and shape-generator APIs.

Loading thumbnail…

Areachart_Question-2

This area chart visualizes the world population from 1950 to 2015, sourced from the United Nations World Population Prospects 2017. The chart uses a smooth, curved area path to show population growth over time, with a red filled region and orange data points. The visualization is built with d3.v5, using `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` for the area path, and `axisBottom` and `axisLeft` for the labeled axes. It also includes a custom tick format that converts values to billions.

Loading thumbnail…

Area_Chart_Question2

This area chart displays India’s population over time, with the x-axis showing years and the y-axis showing population values. The chart is rendered as an SVG using D3 v7, loading data from a CSV file via `d3.csv`. The code uses `d3.area()` to generate the filled path, `d3.scaleLinear()` for both axes, and `d3.axisBottom()` and `d3.axisLeft()` to draw tick marks and labels.

Loading thumbnail…

Fork of area chart

This example displays India’s population over time as a filled area chart. It loads CSV data from a GitHub gist and renders an SVG with D3 v7, using `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to draw the path and labeled axes. The chart encodes years on the x-axis and population values on the y-axis, with a steelblue fill.

Loading thumbnail…

Pie_Chart_Question1

A pie chart displays the basic cost of Netflix subscriptions across ten countries, sorted from highest to lowest and formatted in US dollars. The chart renders as an SVG using D3 v5 within a React framework, leveraging D3's `pie`, `arc`, and `scaleOrdinal` functions to generate segments and apply a categorical color scheme. A legend with colored rectangles, country names, and cost values accompanies the plot, and hovering over a segment logs its cost to the console. Data is loaded asynchronously from a GitHub-hosted CSV file using D3's `csv` method.

Loading thumbnail…

Pie_Chart_Question1

This pie chart visualizes the basic cost of Netflix subscriptions across ten countries, sorted in descending order and displayed as a donut-style chart with a color-coded legend. The data is loaded from a GitHub-hosted CSV file using `d3.csv`. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths and apply a categorical color scheme. Mouseover events log each slice’s cost to the console, while the legend lists country names and their corresponding dollar values.

Loading thumbnail…

Pie_chart_Question1

This example presents a pie chart comparing the basic monthly cost of Netflix subscriptions across ten countries, with values displayed in US dollars. The chart renders as an SVG using D3 v5, with `d3.pie` and `d3.arc` generating the segments and a `d3.scaleOrdinal` with `schemeCategory10` assigning colors. A legend, built with SVG rectangles and text, lists each country alongside its cost. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the countries are sorted descending by cost before rendering.

Loading thumbnail…

Activity-6-Question-4

This bubble chart visualizes the relationship between average battery life, RAM, and camera megapixels for various smartphone brands. Each circle represents a phone make, with its x-position mapped to horsepower and y-position to torque, while the circle’s radius encodes highway fuel efficiency. The code uses D3 v7 to load CSV data, create linear scales, and render SVG elements. Interactive tooltips display the brand name on mouseover, and a color scale distinguishes each manufacturer.

Loading thumbnail…

Activity-6-Task-4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes, using the D3.js library (v7). Circle size encodes MPG values, while color distinguishes each make, and hovering reveals a tooltip with the car brand. The chart includes labeled axes, a bubble size legend, and a color legend. It renders as SVG and loads data from a CSV file using `d3.csv`.

Loading thumbnail…

Activity-6-Question-3

This scatter plot visualizes banking data, plotting CustomerAge against CreditScore, with the AccountType encoded by the shape of each point. A legend on the right maps these shapes to account types. The example demonstrates a modular D3 workflow, using local ES6 modules like `scatterPlot.js` and `axes.js` that import from the `d3` module. It loads data from a remote CSV, then uses `scaleLinear`, `scaleOrdinal`, and `symbol` to create the visualization.

Loading thumbnail…

Activity-6-task-3.2

This scatter plot visualizes the iris dataset, mapping sepal length to petal length and encoding species with distinct symbols. The chart uses D3’s `scaleLinear` for axes and `scaleOrdinal` with `symbolsFill` for shape mapping, along with custom `axisLeft`, `axisBottom`, and `shapeLegend` modules. Data is loaded from a CSV via `fetch` and parsed with `csvParse`. The visualization also includes labeled axes and a legend, leveraging D3’s selection join API for efficient SVG updates.

Loading thumbnail…

Activity-6-Task-3.1

This scatter plot visualizes the Iris dataset, displaying petal length against petal width, with points colored by species (setosa, versicolor, virginica). The chart uses D3.js (v6) with the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load, scale, and render the data as SVG circles. It also reads sepal measurements for each point, though only petal dimensions position the marks. The plot includes labeled axes and a legend-like color mapping determined by species.

Loading thumbnail…

Activity-6-task-2

This visualization displays the percentage distribution of IMDb movie ratings across five genres, using a horizontal stacked bar chart. Each bar represents a genre, with color-coded segments for rating ranges from "below 5.0" to "above 8.5". The code uses D3.js v7 APIs such as `d3.stack`, `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.axisLeft` to process the CSV data and render the SVG. Interactive tooltips, implemented with `mouseover` events, show exact percentages on hover.

Loading thumbnail…

Activity-6-Question-2

A stacked bar chart shows the percentage of student ratings across six subjects, with each bar segmented into five rating bands from "below 60%" to "above 90%". The chart uses `d3.stack()` to compute the layered data and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The visualization is rendered as an SVG with axes created via `d3.axisLeft()` and `d3.axisBottom()`, reading data from a local CSV file.

Loading thumbnail…

Activity-6-Question-1.2

This example displays a horizontal bar chart comparing the populations of 20 countries in 2010, rendered as SVG within a React application. The chart uses D3 scale functions, `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with population values read from a CSV file. Axes are custom components that render ticks and labels, while bars include native SVG tooltips showing formatted population values. The code loads data via `d3.csv` and formats tick labels using `d3.format`.

Loading thumbnail…

Activity-6-Question-1

This bar chart displays population estimates for ten countries in the year 2000, with countries listed vertically and population values shown horizontally. The visualization is built using React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a remote CSV file using D3’s `csv` function, and the bars are rendered as SVG rectangles with tooltips. The code demonstrates modular ES6 imports for axis and mark components, with custom tick formatting that converts large values to billions.

Loading thumbnail…

Fork of Avtivity-6-Task-1

A horizontal bar chart displays 2020 population estimates for 30 countries, using a D3 scaleBand for country categories on the y-axis and a scaleLinear for population values on the x-axis. The React app fetches a remote CSV via d3.csv and converts string values to numbers. SVG rectangles render each bar, with axes generated by custom React components, and tick labels formatted using d3.format’s SI notation with "G" replaced by "B" for billions.

Loading thumbnail…

Avtivity-6-tutorial-1

This example demonstrates a minimal VizHub project that displays the text "Hello VizHub!" centered on a blank page. It shows how to set up a D3.js visualization using version 5.16.0 loaded via UNPKG, combining a simple HTML structure with a CSS stylesheet for styling. The code imports the `select` function from the d3 module to target the `#message` div and set its text content. It also imports a custom local ES6 module, `myMessage.js`, which exports the displayed string, illustrating how to mix D3 API calls with modular JavaScript for reusable content.

Loading thumbnail…

5 Buddhas

Five overlapping, multicolored Buddha silhouettes fill the screen against a black background. The visualization is built with React and renders SVG polygons positioned and colored using repeated calls to `Math.random()` within nested array mappings. Each Buddha path is drawn from static SVG path data, while the background is composed of randomly generated diamond shapes that rotate and vary in color, creating a kaleidoscopic, layered effect.

Loading thumbnail…

6buddhas

Six Buddhas are drawn as overlapping, black-filled vector paths against a floral background image. Rendered with React and SVG, each path is a single Buddha silhouette, transformed and scaled using `translate` and `scale` operations. The code defines its own coordinate data and path strings, and duplicates the figure across the canvas by directly applying these SVG transforms to create the layered composition.

Loading thumbnail…

Fork of 6 Buddha

A layered, overlapping Buddha figure is rendered in a thousand-pixel SVG, with hundreds of semi-transparent colored dots scattered randomly behind it. The image is composed through nested `React` `map` calls, which generate the background particles. A single complex SVG `path` defines the Buddha's outline, and is transformed and scaled to create the central figure, while the code imports React and ReactDOM for rendering.

Loading thumbnail…

Fork of 6 Buddha

A layered, overlapping Buddha figure is rendered in a thousand-pixel SVG, with hundreds of semi-transparent colored dots scattered randomly behind it. The image is composed through nested `React` `map` calls, which generate the background particles. A single complex SVG `path` defines the Buddha's outline, and is transformed and scaled to create the central figure, while the code imports React and ReactDOM for rendering.

Loading thumbnail…

Fork of 6 Buddha

A layered, overlapping Buddha figure is rendered in a thousand-pixel SVG, with hundreds of semi-transparent colored dots scattered randomly behind it. The image is composed through nested `React` `map` calls, which generate the background particles. A single complex SVG `path` defines the Buddha's outline, and is transformed and scaled to create the central figure, while the code imports React and ReactDOM for rendering.

Loading thumbnail…

Fork of 6 Buddha

A layered, overlapping Buddha figure is rendered in a thousand-pixel SVG, with hundreds of semi-transparent colored dots scattered randomly behind it. The image is composed through nested `React` `map` calls, which generate the background particles. A single complex SVG `path` defines the Buddha's outline, and is transformed and scaled to create the central figure, while the code imports React and ReactDOM for rendering.

Loading thumbnail…

Fork of 6 Buddha

A layered, overlapping Buddha figure is rendered in a thousand-pixel SVG, with hundreds of semi-transparent colored dots scattered randomly behind it. The image is composed through nested `React` `map` calls, which generate the background particles. A single complex SVG `path` defines the Buddha's outline, and is transformed and scaled to create the central figure, while the code imports React and ReactDOM for rendering.

Loading thumbnail…

Buddha

A black canvas displays dozens of randomly placed, semi-transparent circles in varied colors, layered with a large orange and white line drawing of Buddha rendered as an SVG path. The React app uses `ReactDOM` to render SVG elements, mapping over nested arrays to generate circles with random positions and fill values. The Buddha path is hardcoded and drawn with a thick stroke, combining generative randomness with a static figurative icon.