M

mdadeebfarhaan@gmail.com

@adeebfarhan76·18 public vizzes

Loading thumbnail…

D3.js Scatter Plot and Area Chart

This example presents two linked visualizations of COVID-19 data: a scatter plot of confirmed cases versus deaths, and a time-series area chart of confirmed cases over dates. Built with D3 v7, it uses SVG selections with `scatterSvg` and `areaSvg` for rendering, and implements interactive tooltips via `d3.select` with mouseover/mouseout events. The area chart employs `xAreaScale.invert` to map mouse positions back to dates, and both charts reference local data arrays for case counts. A CSS-styled tooltip div provides hover details.

Loading thumbnail…

D3.js Line Chart and Stacked Bar Chart

This example visualizes COVID-19 data for the state of Kerala using two D3.js v7 charts. A line chart traces confirmed cases over time, with red dots and interactive tooltips showing exact dates and counts. Below it, a stacked bar chart breaks down the same data into confirmed, cured, and death categories. The visualization loads data from a remote CSV via `d3.csv`, uses `d3.scaleTime` and `d3.scaleLinear` for axes, and renders with SVG paths, circles, and animated tooltip transitions.

Loading thumbnail…

Scatter Plot and Bar Chart

This example presents two linked visualizations of country-level data: a scatter plot mapping population (2022) against population density, and a bar chart showing the same population values per country. Both charts use D3.js v7, loaded via UNPKG, and render as SVGs within separate container divs. The code employs `d3.csv` to fetch remote CSV data, then builds the visuals with `d3.select`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent`. Interactive tooltips appear on mouseover for scatter points, using a positioned HTML div to display country, population, and density values.

Loading thumbnail…

Task9&10_Q2

This area chart visualizes automobile industry sales from 2000 to 2010, with the x-axis showing years and the y-axis representing sales figures (formatted in billions). The chart uses a green filled area under a basis curve to display the trend. Built with D3 v5, it employs `scaleTime` for the time-based x-axis, `scaleLinear` for the y-axis, and the `area` generator with `curveBasis` to create the smooth filled shape. Grid lines and axis labels are styled via CSS. The data is loaded from a CSV file hosted on GitHub, which includes year and sales columns parsed for rendering.

Loading thumbnail…

Task9&10_Q2

This example displays world population over time as a filled area chart using D3 v5. The SVG renders a smooth, maroon area curve from year-based time-series data sourced from a CSV file. The code uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` with `curveBasis` to generate the path. Axis ticks are formatted with `d3.format` to abbreviate billions as "B", and the source data comes from a curated dataset on VizHub.

Loading thumbnail…

Task9&10-Q1

This visualization displays vehicle registration counts as a donut pie chart, with each slice labeled by its value in thousands and color-coded by vehicle type. A legend on the right lists each type alongside its corresponding count. Built with D3 v5, the code uses `pie` and `arc` to generate the slices, `scaleOrdinal` for colors, and `csv` to load the dataset from a GitHub gist. The SVG output is rendered through `select` and appended paths and text elements.

Loading thumbnail…

Task 9&10 Q1

This example shows a pie chart displaying total sales distribution across item categories, with each slice labeled by category name and sales amount, plus a legend on the right. The visualization is built using D3.js version 6, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Data is loaded from a remote CSV file via `d3.csv`, and aggregated using `d3.rollups` to sum sales per category. The chart includes a title and subtitle, rendered as SVG text elements.

Loading thumbnail…

Task9&10

This example presents an animated scatterplot of the Iris dataset, cycling through four different variable pairings on the x-axis while keeping petal width on the y-axis. Points are colored by species (setosa, versicolor, virginica) and rendered as ellipses using their sepal dimensions. The visualization uses D3 v6 via UNPKG, employing `scaleLinear`, `axisLeft`, and `axisBottom` from the scatterPlot module. A `setInterval` updates the x-value mapping every few seconds, while SVG elements like circles and text labels are dynamically joined and appended. Data loads from a CSV URL using `d3.csv`.

Loading thumbnail…

Task-8-Q4.9

This bubble chart compares breakfast cereal manufacturers by plotting each product’s rating on the x-axis against its sodium level on the y-axis, with bubble size encoding calories and color distinguishing seven manufacturers. The visualization includes both size and color legends, plus labeled axes. Built with D3 v7, it uses `d3.scaleLinear` for positioning and radius, `d3.scaleOrdinal` with `d3.schemeSet1` for coloring, and renders circles as SVG elements loaded from a CSV file.

Loading thumbnail…

Task-8-Tutorial-4

This visualization is a bubble chart exploring the correlation between average horsepower, torque, and highway MPG across top football league car makes. The chart uses D3.js v7 to render SVG circles whose size encodes highway MPG, with color mapping to car manufacturers via `d3.scaleOrdinal` and `d3.interpolateTurbo`. It includes interactive tooltips on mouseover, a size legend, and axis labels from the CSV data source.

Loading thumbnail…

Task-8-Q3.6

This animated scatter plot from D3 explores various statistics for top football league scorers, sourced from a Kaggle dataset. Users can select any two metrics for the axes and choose a specific year from 2016 to 2020, with each point colored by league. The visualization utilizes D3's `scaleLinear`, `scaleOrdinal` with `schemeCategory10`, and the `@curran/responsive-axes` library for the chart. Hovering over a point enlarges it and shows the player's name, while clicking a legend item filters the data by league.

Loading thumbnail…

Task-8-Tutorial-3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length, with points shaped according to species. The chart uses d3.scaleLinear for axes and d3.scaleOrdinal with d3.symbolsFill to map species to distinct shapes, rendered via d3.symbol. A custom shape legend clarifies the species mapping. Data is loaded asynchronously from a CSV file hosted on GitHub, parsed with d3.csvParse, and rendered using D3’s join operation within a React starter framework.

Loading thumbnail…

Task-8-Tutorial3.1

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes, with both axes labeled. The points are color-coded by species (setosa, versicolor, virginica) using a custom marker function. The visualization uses D3 v6's `csv` parser, `scaleLinear`, `extent`, and the `axisBottom` and `axisLeft` helpers to render an SVG chart. It also includes extra radial attributes (rx, ry) for each circle, though only the constant radius is applied.

Loading thumbnail…

Task-8-Tutorial-2

This example visualizes IMDb movie ratings across genres using a stacked horizontal bar chart, showing the percentage distribution of ratings in categories like "5.0-6.5" and "above 8.5" for genres such as Documentary and Action. Built with D3 v7 and rendered as SVG, the chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to position bars, with mouse events driving a tooltip that displays exact percentages. The data is loaded from a CSV file.

Loading thumbnail…

Task-8-Q2.3

This example shows the distribution of game ratings across six sports, with each sport’s ratings divided into five percentage categories. It uses a stacked horizontal bar chart, where each bar segment represents the proportion of ratings in a category, and the total bar length spans from zero to one hundred percent. The visualization is rendered as SVG using D3 v7, with data loaded from a CSV file. The code leverages D3’s `scaleBand`, `scaleLinear`, `stack`, and `scaleOrdinal` APIs to construct the chart, and tooltips display the precise percentage for each segment.

Loading thumbnail…

Task-8-Q1.1

This visualization presents a horizontal bar chart of the top ten countries by population for the year 2000. The chart uses React with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendered as SVG rectangles. Population data is loaded from a CSV file via the `csv` function and formatted with abbreviations like "B" for billions. The visualization includes axes, axis labels, and tooltips showing population values.

Loading thumbnail…

Tas-8-Q1.1

This example demonstrates the VizHub V3 Runtime Environment, showing a "Hello World" text rendered inside a container div. The code exports a `main` function that takes the container element and sets its inner HTML with a styled div, including a hardcoded font size of 221 pixels. It highlights interactive widgets, where holding the Alt key while dragging a number in the editor updates the property in real time. The example uses plain HTML and JavaScript, with no external libraries.

Loading thumbnail…

Task-8-Q1.2

This visualization is a horizontal bar chart displaying the populations of the top 20 countries for the year 2010. The chart uses a linear scale for the population axis and a band scale for the categorical country axis, with light green bars and blue tick marks. Built with React and D3 v5, the code utilizes `d3.scaleBand` and `d3.scaleLinear` for scaling, `d3.csv` to fetch and parse data from a GitHub-hosted CSV file, and renders the chart as SVG elements.