C

chowdaryhemanth14@gmail.com

@hemanth-chowdary-07·17 public vizzes

Loading thumbnail…

Activity_7_Q2(11807290)

This area chart shows population trends across continents from 2000 to 2020, with each continent represented as a stacked colored layer. The visualization uses d3.stack() to aggregate population data by year and continent, and d3.area() to render the stacked layers as SVG paths. Axes are generated with d3.axisLeft() and d3.axisBottom(), while colors are assigned via d3.scaleOrdinal() with d3.schemeCategory10. Data is loaded asynchronously from a remote CSV using d3.csv, and a custom legend identifies each continent.

Loading thumbnail…

Activity_7Q1_11807290

This pie chart visualizes programming language popularity using a dataset of user counts from a CSV file. It uses D3.js (v7) with its `pie` and `arc` APIs to generate the slices, which are colored via a category scale and rendered as SVG paths with stroke outlines. Labels are placed at each arc’s centroid, and a legend with colored rectangles is drawn on the left. The chart also includes dummy x- and y-axis labels, though these are not functionally linked to the data.

Loading thumbnail…

Activity_7_Q1(11807290)

This chart visualizes the popularity of programming languages using a pie chart in D3 v7, with each slice colored via `d3.scaleOrdinal` and labeled with language names. It loads CSV data from a GitHub URL using `d3.csv`, then constructs the pie layout with `d3.pie` and renders arcs with `d3.arc`. A legend, dummy X and Y axis labels, and SVG rendering complete the static visualization.

Loading thumbnail…

Activity6_Question4(9,10,11)

A bubble chart displays the relationship between market capitalization and employee count for major tech companies, with circle size encoding market cap and color distinguishing industry sectors. The visualization uses d3.scaleLinear for both axes, d3.scaleSqrt for circle radii, and d3.scaleOrdinal with d3.schemeSet2 for categorical coloring. Axes and legend are rendered via custom modules, while the SVG output loads data from a static CSV file using d3.csv.

Loading thumbnail…

Activity6_Tutorial4

This bubble chart visualizes the relationship between horsepower and torque for 31 car makes, with each circle’s radius encoding horsepower and its color representing the manufacturer. The D3 v7 code uses `d3.scaleLinear` for the x- and y-axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Axes and legends are rendered via custom SVG components in separate ES6 modules, while data loads asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Activity6_Tutorial_3_Q3(6,7,8)

A scatter plot shows the relationship between battery life and weight for five smartphone models, with each brand distinguished by a unique symbol shape. The visualization is built using D3.js v7 with SVG rendering, reading data from a CSV file. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with symbol generators (`d3.symbolCircle`, `d3.symbolSquare`) to encode brand, and a custom legend module. Axes are labeled via `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Activity6_Tutorial_3.2

This visualization displays the classic Iris dataset, plotting sepal length against petal length to compare three species. Each point is rendered as a distinct SVG path shape—circles, squares, and triangles—indicating setosa, versicolor, and virginica, with a legend generated by the custom `shapeLegend` module. The chart uses D3 v7's `scaleLinear` and `scaleOrdinal` scales, along with `d3.symbol` to produce the marks, and `renderAxes` to draw labeled axes.

Loading thumbnail…

Activity_6_Tutorial_3.1

A scatter plot of the Iris dataset shows sepal length on the x-axis versus petal length on the y-axis, with each of the three species distinguished by color. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for species colors, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded asynchronously from a local CSV via `d3.csv`, and circles represent individual observations across 150 flowers.

Loading thumbnail…

Activity_Tutorial_3.1

This stacked bar chart displays mobile operating system market share percentages across five global regions, with colored segments for Android, iOS, and Other. Each region’s horizontal bar spans from 0 to 100 percent, and hovering over a segment reveals its exact value via a tooltip. The visualization uses D3 v7’s `d3.stack()` to transform the CSV data, `d3.scaleBand` for region positioning, `d3.scaleLinear` for percentages, and `d3.schemeSet2` for categorical colors. SVG rendering handles the axes, while mouse events update tooltip opacity and content.

Loading thumbnail…

Activity_Tutorial2_Q2

This stacked bar chart visualizes mobile operating system market share (Android, iOS, and Other) across five global regions, with horizontal bars showing percentage values that sum to 100%. Interactive tooltips display exact numeric values on hover. The visualization uses D3 v7’s `d3.stack()` to compute layered data, `d3.scaleBand()` for categorical y-axis positioning, `d3.scaleLinear()` for percentage scaling, and `d3.scaleOrdinal()` with `d3.schemeSet2` for coloring. Bars render as SVG rectangles within a grouped `<g>` element, with data loaded from a CSV file specifying regional OS percentages.

Loading thumbnail…

Activity_Tutorial2

This stacked bar chart shows the percentage distribution of movie ratings (G, PG, PG-13, R) across five genres, with each bar segmented by rating category. The visualization uses D3 v7’s `d3.scaleBand` for the categorical genre axis and `d3.scaleLinear` for the percentage scale. Data is loaded from a CSV file, and bars are generated using `d3.stack()` to compute cumulative values, with colors from `d3.schemeSet2`. Hovering over any segment reveals its exact percentage via a styled tooltip.

Loading thumbnail…

Activity_Tutorial2

This example demonstrates a minimalist text message display. It renders the phrase “Hello VizHub!” centered on the page using the D3.js `select` function to target a `div` element and set its text content. The styling, defined in CSS, applies a 12em font size and text alignment. The code imports the message from a separate ES6 module, `myMessage.js`, and uses D3 v6 loaded from a CDN. The data source is a static string, with no dynamic data or interactive behavior present.

Loading thumbnail…

Activity 6_Task 1_Q1.2

This bar chart displays the 2010 population figures for the top 20 countries, sorted in descending order. The visualization uses D3 v7 with ES6 modules to load CSV data from a GitHub repository, then renders the bars as SVG rectangles. A linear x-scale encodes population values while a banded y-scale positions each country, with axes generated using d3.axisBottom and d3.axisLeft. The chart is built through modular functions for data handling, axis creation, and mark rendering.

Loading thumbnail…

Activity 6_Task 1_Q1.1

This bar chart displays the population of the top 10 countries in the year 2000, sorted in descending order. It uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The data is loaded asynchronously from a remote CSV file using `d3.csv`, then filtered and sorted. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the bars are drawn as SVG rectangles.

Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays population estimates for the top 30 countries in 2020, using d3.csv to load a CSV dataset and d3.scaleBand and d3.scaleLinear to map country names and population values. The SVG rendering uses d3.axisBottom and d3.axisLeft for tick marks, and the Marks module appends filled rectangles with steelblue to represent each bar’s length. Axis labels and a title for “POPULATION – 2020” are included.

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays the populations of the first 30 countries from a CSV dataset for the year 2020 as horizontal bars. Built with React and rendered as SVG, it uses D3 v5 functions `scaleBand` and `scaleLinear` to map country names and population values to coordinates, with axis ticks from custom React components. The chart loads data via `d3.csv`, formats population values on the x-axis using `d3.format`, and provides hover tooltips.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the classic “Hello VizHub” starter template, displaying a large, centered text message on a blank page. The visualization uses D3.js v6’s `select` function to target the `#message` div and set its text content from an imported ES6 module. The styling, defined in separate CSS via the `#message` selector, applies a 12em font size and center alignment. The code shows basic integration of local modules, external D3 library, and HTML structure.