abjalshaik02@gmail.com

Activity-7 Question1

This pie chart visualizes the top 8 countries with the highest death tolls from air pollution, using data from a CSV file. The chart displays the proportional share of deaths for each country, with labels showing values in thousands and a legend mapping colors to country names. The visualization is built with D3 v5, using the `pie()` generator to compute arc angles and `arc()` with an inner radius of zero to draw segments. Text labels are positioned at arc centroids, while the legend is constructed manually using appended SVG elements.

Nov 7, 2024

Fork of activity 7Question 1

This pie chart displays the top 10 countries by deaths in 2020 from air pollution. The code loads data from a CSV file, calculates each country’s share, and renders sections using d3.pie and d3.arc. It applies a d3.scaleOrdinal for colors, labels each slice with a formatted death count, and includes a legend built with SVG rectangles and text. The visualization uses D3 v5 with SVG rendering, featuring a simple color palette of ten predefined CSS colors.

Nov 6, 2024

Fork of Activity-9&10

This pie chart visualizes the number of vehicles seized across different U.S. states, using a dataset fetched from a GitHub-hosted CSV file. Each slice represents a state, with its value and the state name displayed in an adjacent legend. The visualization is built with D3 v5, using the `pie` and `arc` generators to create the chart and `scaleOrdinal` for color mapping. Labels inside slices show values in thousands, and the SVG output is styled with custom CSS.

Nov 6, 2024

Fork of SDV Activity 7

This visualization displays the top 10 countries by population in 2020 using a pie chart. Each slice represents a country’s population, with values labeled in thousands and a corresponding legend listing country names and population figures. The code uses d3.pie and d3.arc to generate the chart, d3.scaleOrdinal for slice colors, and d3.csv to load the dataset from a GitHub Gist. Text labels are positioned using arc.centroid, and the legend is built manually with appended SVG rectangles and text elements.

Activity-7 Tutorial

This animated scatterplot cycles through four Iris flower measurements, plotting petal width, sepal width, petal length, and sepal length on the x-axis while sepal length remains on the y-axis. The visualization uses D3.js modules imported via UNPKG, including `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` for data parsing, with a custom `scatterPlot` function handling the SVG rendering. Circles are color-coded by species—lightblue for setosa, lightgreen for versicolor, and orange for virginica—with a legend and axis labels updated every two seconds via `setInterval`. The code demonstrates local ES6 module imports and dynamic chart reconfiguration with smooth transitions.

Activity-7 Tutorial

This animated scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis every five seconds, using D3 scales and axes. The visualization loads CSV data via d3.csv, renders points as SVG circles with d3.scaleLinear and extent, and updates the axis through setInterval. A color-coded legend distinguishes the three species, while axis labels and a title appear as SVG text elements.

Fork of Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, displaying petal and sepal measurements with points colored by species (setosa, versicolor, virginica). Using D3.js v6 with SVG rendering, the visualization cycles through four variable combinations on the x-axis at regular intervals via `setInterval`, while the y-axis remains fixed. The chart includes a species legend, axis labels, and a title, with the reusable `scatterPlot` module handling scales and axes through D3's `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a GitHub-hosted CSV file.

Activity 6 Question 9

This bubble chart visualizes the distribution of movie ratings across six genres, plotting the proportion of ratings between 5.0–6.5 on the x-axis, 6.5–7.5 on the y-axis, and using circle radius to encode the share of ratings above 8.5. Genre categories are color-coded using an ordinal scale. The visualization is built with D3.js v6, using scaleLinear for all three encodings and SVG circles for rendering. Hovering over a circle triggers a tooltip displaying the exact proportions for that genre. Data is loaded asynchronously from a remote CSV file.

Fork of Activity6_task4

This bubble chart displays the relationship between rating distributions for six film genres, plotting the percentage of ratings between 5.0-6.5 on the x-axis and 6.5-7.5 on the y-axis, with bubble size representing the percentage of ratings above 8.5. The visualization uses D3 v6 scales (d3.scaleLinear) and an ordinal color scale (d3.scaleOrdinal with d3.schemeCategory10) to distinguish genres. Hovering reveals a tooltip with exact values, while the axis labels and animated SVG rendering make the comparison of rating patterns across genres immediately visible. Data comes from a remote CSV file, with the chart built using standard SVG circles, axes, and margins.

Activity 6 Task4 Tutorial

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Each circle’s x-axis position represents horsepower, the y-axis represents torque, and its radius encodes highway MPG, with color differentiating car brands. The visualization uses `d3.scaleLinear` for positional and size mapping, `d3.scaleOrdinal` with `d3.schemeCategory10` for color, and `d3.axisBottom` and `d3.axisLeft` for axes. It loads data from `bubblechart.csv` and renders an SVG, including tooltips on mouseover and custom legends for size and color.

Activity 6 Question 6

This scatter plot visualizes the distribution of film rating percentages across genres using the Iris dataset. It uses D3 v6's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to map the ‘5.0-6.5’ and ‘6.5-7.5’ rating columns to Cartesian coordinates, with genres encoded by both color and shape (circles and crosses). Each point is an SVG `path` with a tooltip showing genre and coordinates. The underlying CSV is fetched via `d3.csv` from a GitHub repository.

Activity 6 Task 3 Tutorial 3.2

This scatter plot displays sepal length against petal length for the Iris dataset, with each of the three species represented by a distinct symbol shape and a legend. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to map data to positions and shapes. Data is loaded via `d3.csvParse` from a remote CSV file, and the chart includes labeled axes and a shape legend positioned at a fixed coordinate.

Fork of Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes, using circle size to encode fuel efficiency and color to distinguish brands. The visualization includes an interactive tooltip that displays the make on hover, along with a legend for both the MPG scale and the color-coded categories. Built with D3.js v7, it loads data from a CSV file and renders SVG elements with animations for tooltip transitions, while axes and labels are generated using d3.scaleLinear and d3.axisBottom/axisLeft.

Fork of Bubble chart

Activity 6 Task 3 tutorial 3.1

This scatter plot visualizes the Iris dataset, plotting petal length against petal width and coloring each point by species (setosa, versicolor, or virginica). The visualization uses D3 v6 to load CSV data, apply linear scales with `scaleLinear`, and render circles with `select` and `join`. Interactive axes are generated via `axisLeft` and `axisBottom`, with labels for both dimensions. The plot fills the browser window, using an SVG canvas, and includes a legend-like color mapping for the three species.

Fork of Activity6_q6

This scatter plot visualizes the relationship between movie rating percentages in the 5.0-6.5 and 6.5-7.5 ranges, with each circle representing a genre from the Data.csv dataset. The code loads data via d3.csv, maps values to positions using scaleLinear with domains from d3.extent, and renders colored circles with genre-specific fills through an ordinal color scale. Axes are generated with axisLeft and axisBottom, while d3.selectAll and .join add SVG circles that include tooltip titles showing exact coordinates. The visualization uses a margin-based SVG layout with custom axis labels.

Oct 22, 2024

Fork of Fork of Scatter Plot with Shape

This interactive scatter plot displays the Iris dataset, mapping sepal length against petal length while encoding species through distinct symbol shapes. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with d3.symbolsFill to assign unique geometric markers to each species. A custom legend, built with d3.symbol, explains the shape-to-species mapping. The code leverages d3.csvParse to load remote data and d3.axisLeft/axisBottom for labeled axes, with axes and legend implemented as reusable functions.

Fork of Activity 7 Scatter Plot

This scatter plot displays the Iris dataset, mapping petal length and petal width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). The visualization uses D3 v6, fetching data via the `csv` function from a remote URL, then constructs the plot using `scaleLinear`, `axisLeft`, and `axisBottom`. Circles are rendered with SVG elements, and the code also references sepal dimensions through `rx` and `ry` attributes, although these do not affect the visual output.

Activity 6 Question 3

This stacked bar chart visualizes car makes by their aggregated ratings in horsepower, torque, and highway MPG. Each bar is segmented by color to represent the contribution of each metric, with tooltips displaying the exact values. Built with D3 v7, it uses `d3.stack()` to process the CSV data and `d3.scaleOrdinal()` for color mapping, while axes and labels are rendered via `d3.axisLeft` and `d3.axisBottom`.

Fork of Activity6_q3

This stacked bar chart visualizes car make ratings by comparing three metrics—horsepower, torque, and highway MPG—for each brand. Using d3.stack and d3.scaleBand, the horizontal bars aggregate total ratings per make, with color-coded segments for each metric. Interactive tooltips display exact values on mouseover. The chart loads data from a CSV file, leveraging D3 v7's d3.csv and scaleOrdinal for consistent color mapping.

Activity 6 Task 2 Tutorial

This stacked bar chart displays the distribution of movie ratings across six genres, with each bar segmented into five rating categories from “below 5.0” to “above 8.5.” The visualization uses D3 v7’s `d3.stack()` to compute the stacked segments, `d3.scaleBand()` for the y-axis genres, and `d3.scaleLinear()` for the percentage x-axis. Hovering over a segment triggers a tooltip showing the exact percentage for that rating category, achieved through mouse event listeners. The SVG chart loads data from an inline CSV and applies a custom color scale for the rating bands.

Fork of Activity6_task2

This stacked bar chart visualizes IMDb rating distributions across six film genres, showing the proportion of movies falling into five rating brackets from “below 5.0” to “above 8.5.” The chart uses d3.stack to compute layered segments, along with d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom for percentage labels. Rectangles change opacity on mouseover, and a custom tooltip displays the exact percentage for each genre-rating combination. Data comes from the included CSV file, rendered as SVG with D3 v7.

Activity 6 Question 1.2

This visualization presents a horizontal bar chart ranking the populations of 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The bars are rendered as blue SVG rectangles using React components, while D3’s `scaleBand` and `scaleLinear` handle the positions and scaling. Data is loaded asynchronously from a CSV file via `d3.csv`. Axis ticks and labels are generated through custom React components, and hovering over a bar reveals its exact population value via the SVG `<title>` element.

Activity 6 Question 1.1

This example shows a horizontal bar chart comparing the population of ten countries in the year 2000. The visualization uses D3 v5's `scaleBand` and `scaleLinear` to map categorical country names and numeric population values to SVG coordinates, while React renders the chart elements. The chart includes red tick lines on the x-axis, a labeled x-axis for "POPULATION-2000", and blue rectangular marks that display a tooltip with the population value when hovered. Data is loaded from a remote CSV file using D3's `csv` function.

Activity 6 _Task 1 Tutorial

This bar chart displays the populations of 30 countries for the year 2020, sorted along a vertical band scale with proportional horizontal bars. The visualization uses D3 v5 scaleBand and scaleLinear to map data loaded from an external CSV via d3.csv, while React components handle axis rendering and marks. SVG rectangles represent each country, with a native title element providing tooltips, and axes are formatted using D3’s si-format to abbreviate large numbers.

Fork of Activity 7

This chart displays the 2020 population of 30 countries as a horizontal bar chart, sourced from a GitHub-hosted CSV file. Built with React and D3 v5, it renders as SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The bars are drawn as `rect` elements with tooltips, while axis ticks are styled—bottom ticks blue and labels gray—via `AxisBottom` and `AxisLeft` components, with tick formatting using D3's `format('.2s')` to abbreviate large numbers.

Fork of Activity6_q1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, with React rendering the SVG elements. Each bar includes a native `<title>` tooltip displaying the formatted population in billions (using `format('.2s')`). Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and axes are generated by custom React components (`AxisBottom` and `AxisLeft`).

Fork of Fork of Activity6_q1.1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart using SVG rendering in React. The code employs d3.scaleBand and d3.scaleLinear from the D3 v5 library to map countries to the y-axis and population values to the x-axis, with formatted tick labels converting numbers to billions. Data is loaded from a CSV file via d3.csv, and the bars include tooltips showing the population value. The chart also features custom axis components and a Poppins font from Google Fonts.

activity-6_Task 1

This example demonstrates a minimal Hello World page that displays a greeting message centered on the screen. It loads D3 v5 from UNPKG and uses the `d3.select` API to target the HTML `div#message` element, setting its text content to a string imported from a local ES6 module. The page renders static text only, with no data binding, interaction, or visual encoding beyond basic CSS styling for font size and alignment.

Fork of Fork of Hello VizHub

This example displays a horizontal bar chart of population data for ten countries in the year 2000, using a React-based SVG visualization. The chart employs D3 v5’s `scaleBand` for categorical y-axis positioning and `scaleLinear` for the numeric x-axis population values. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, then formatted with `d3.format` to abbreviate large numbers. Gray rectangular marks are rendered per country, with interactive tooltips showing the exact population value.

Fork of Fork of Hello VizHubmkm

This example demonstrates how a simple VizHub project is structured, showing a message displayed in large, centered text. It loads D3 v5 from a CDN and uses the `select` API to update the DOM, while also importing a string from a local ES6 module (`myMessage.js`). The code highlights basic module imports, regular expression syntax, and CSS styling within a minimal HTML setup.

Fork of Fork of Hello VizHub bhbj

A horizontal bar chart ranks ten countries by their population in the year 2000, using gray rectangles with blue tick lines and axis labels. The visualization loads CSV data from a GitHub URL and processes it with d3.csv, then scales the population values with d3.scaleLinear and positions the bars using d3.scaleBand. React components render the SVG axes and marks, while d3.format abbreviates tick labels (e.g., converting billions to "B"). The chart includes a "population-2000" x-axis label and provides tooltips showing the formatted population value for each bar.

Class Activity6 Tutorial

This example demonstrates basic VizHub functionality by displaying the text “Hello VizHub!” centered on the page. It loads D3 v5 from UNPKG and imports the `select` function from the D3 module, using it to set the text content of an HTML div. A local ES6 module exports a custom message string, which is then rendered via the DOM manipulation. The page styling is handled through an external CSS file.

Question3

This example displays a grid of flower images against a nature background, with each flower rendered as a scaleable SVG path. Built with React and ReactDOM, the main visualization uses a hardcoded SVG path with numerous cubic Bezier curves to draw the flower shape, repeated at different positions and scales using SVG group transformations. The code imports React libraries and creates an array of numbers for possible data-driven manipulation, though the current view focuses on the decorative flower illustrations. The interface incorporates a CSS grid layout and styled images with white borders and drop shadows on a full-screen floral backdrop.

Oct 19, 2024

Fork of Buddha-6 reflections

A decorative collage displays repeated Buddha face line-art, overlaid on a lush flower background photograph. The React app maps over a numeric array to generate hundreds of semi-transparent SVG circles in randomized positions and colors, while hand-drawn path data renders the central Buddha figure. SVG elements are styled with CSS grid layout, image borders, and hover zoom effects, all rendered client-side with React 16 and ReactDOM.

Oct 19, 2024

Abjal

A chaotic field of overlapping, randomly rotated polygons fills a black canvas, with one large, translucent Buddha-like silhouette embedded in the center. The piece relies on React and ReactDOM to construct SVG elements, generating hundreds of triangles with randomized positions, colors, and opacity through nested `map` operations. The Buddha path is defined by a long string of cubic Bézier coordinates, manually placed within a transformed group. Random values from `Math.random` drive the polygon placement and RGB fill values, producing a dense, abstract composition that blends algorithmic noise with a recognizable figurative form.

Oct 18, 2024

Fork of 6buddhas

This example displays a large, stylized Buddhist figure composed of intricate black-and-white SVG path data, overlaid on a floral background photograph. The visualization uses React to render multiple scaled and translated copies of the same path, creating a layered, overlapping composition. The code relies on ReactDOM to mount the SVG elements, with each path drawn via the `<path>` tag and manually defined coordinate strings. The design combines a natural image backdrop with geometric vector art, emphasizing repetition and transformation through CSS transforms.

Oct 18, 2024