asimcyb@gmail.com

Task9-Q2

This example visualizes the historical price of Bitcoin as a filled area chart over time. It loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders an SVG area path using `d3.area` with time and linear scales. The chart includes labeled axes, a title, and demonstrates local ES6 module imports alongside D3 v7 loading via UNPKG.

Apr 21, 2024

Task-9-Q1

This example shows a pie chart of sales totals grouped by product line, with a tooltip that displays the product name and sales value on hover. It loads a CSV file from a GitHub gist using d3.csv, then aggregates the data with d3.rollups and d3.sum. The chart is rendered as SVG using d3.pie and d3.arc, with a color scale from d3.schemeCategory10. A legend and axis labels are added manually, and a hover tooltip is implemented with D3 mouse events.

Apr 21, 2024

Task-9

An animated scatter plot of the Iris dataset cycles through the four measured features (petal and sepal width and length) on the x-axis while keeping petal width on the y-axis. D3.js, loaded via UNPKG, draws colored circles for each species (setosa, versicolor, virginica) and updates the axes and labels every few seconds using `setInterval`. The code uses local ES6 modules (`scatterPlot.js`), imports `csv`, `select`, `scaleLinear`, `extent`, and axis helpers from `d3`, and renders as an SVG.

Apr 21, 2024

Question4

A sales bubble chart visualizes revenue against units sold for ten product categories, with circle size encoding profit margin and color distinguishing each product. The D3 v7 visualization uses SVG rendering and includes axis labels, a categorical color legend, and interactive tooltips revealing exact values on hover. Data loads from a CSV file, with linear and square-root scales mapping the numeric dimensions.

Activity6_Task4

A bubble chart displays the relationship between average horsepower, torque, and highway MPG for various car makes, with bubble size encoding MPG and color distinguishing manufacturers. The visualization uses D3.js v7 to load CSV data, render SVG circles, and apply linear scales for axes and bubble sizing. Interactive tooltips appear on mouseover, while legends explain the size and color mappings. The chart includes axis labels and a title, with data sourced from a local CSV file.

Question3

This example shows a scatter plot of car weight versus fuel efficiency (MPG), using a small CSV dataset with ten vehicles. Each point is colored by manufacturer, with a legend listing the distinct brands. The visualization is rendered as an SVG using D3 v6, employing `d3.csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal`. Axes are labeled for weight and MPG, with margins and a title, demonstrating basic data loading, scaling, and legend construction.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by different point shapes. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position marks and generate the shape legend. Data is fetched from a GitHub CSV and parsed with `csvParse`; axes and labels are drawn via the custom `axes` and `shapeLegend` modules.

Activity6_Task3

This example presents a scatter plot of the Iris dataset, visualizing petal length and width for different species. The plot uses colored circles (skyblue, lightgreen, orange) to distinguish between setosa, versicolor, and virginica flowers, with each point’s size reflecting sepal dimensions via the `rx` and `ry` attributes. Built with D3 v6, it loads CSV data from a GitHub repository, uses `scaleLinear` and `extent` for axis scaling, and renders axes with `axisLeft` and `axisBottom`. The SVG output includes labeled axes and a centered title.

Question 2

A stacked bar chart visualizes sales performance by region, breaking down percentages across four product categories using data from a local CSV file. The chart employs D3 v7's `d3.stack` and `d3.scaleBand` to render SVG rectangles, with a tooltip triggered by mouse events. An ordinal color scale maps categories, and axes display percentage values. The static title and legend complete the presentation, showcasing local module imports alongside the D3 library.

Activity6_Task2

This chart visualizes the distribution of IMDb ratings across six film genres using a stacked horizontal bar chart. Each genre row is segmented into five rating categories, from below 5.0 to above 8.5, with segment lengths representing the percentage of titles in each category. The visualization uses D3.js v7 with an SVG renderer, employing `d3.stack()` to aggregate data, `d3.scaleOrdinal()` with a custom color palette to distinguish rating bands, and `d3.axisBottom` plus `d3.axisLeft` for the percentage and genre axes. Interactive tooltips display exact percentages on mouseover via D3 event handlers. The data comes from the provided `data.csv` file, showcasing proportional comparisons of rating distributions among genres.

Fork of Question1.2

A bar chart displays the 2010 population of 20 countries, sorted by country name on the y-axis and population on the x-axis. The visualization loads data from a remote CSV via `d3.csv`, converts population values from thousands, and renders horizontal bars using React and SVG. `d3.scaleBand` and `d3.scaleLinear` position bars, while custom `AxisBottom` and `AxisLeft` components generate ticks with `d3.format` for abbreviated axis labels. Hovering reveals tooltips via SVG `<title>` elements.

Question1.1

A horizontal bar chart displays the population of ten countries in the year 2000, using a linear scale for the x-axis and a band scale for the y-axis. The React app loads CSV data via `d3.csv`, transforms the population values by multiplying by 1000, and renders SVG rectangles with `d3.scaleLinear`, `d3.scaleBand`, and `d3.max`. Axis components use `d3.scaleBand.ticks` and `d3.format` to show abbreviated tick labels, while a tooltip is provided through SVG `<title>` elements.

activity_6 fork

This example shows a horizontal bar chart ranking the populations of thirty countries in 2020, using a React component that renders an SVG. The code imports D3’s `scaleBand`, `scaleLinear`, `max`, `format`, and `csv` to load data from a GitHub-hosted CSV, scale the values, and create tick labels formatted in billions. Custom React components render the axes and marks, with bars colored green and blue tick lines, while a `<title>` element provides tooltips.

Fork of Activity 7

This example shows a horizontal bar chart of the top 30 countries by 2020 population, with blue axis ticks, green bars, and formatted labels (using SI units where G becomes B). The React application uses D3 v5 utilities d3.scaleBand, d3.scaleLinear, and d3.csv to fetch and process data, rendering SVG marks via custom components. Tooltips reveal precise population values on hover, while the axes and labels use styling from the Poppins font.

activity_6 fork

This example demonstrates a minimal VizHub project that renders a simple text message. It loads D3 via UNPKG and uses the `select` function from D3 to set the text content of a target HTML element. The message itself comes from a local ES6 module through an import, and the page’s styling is defined in a linked CSS file. The code also includes a regular expression literal and a constant variable, but these are not used in the visible output.

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization where a single text element is populated with a message. The code loads D3 from a CDN and uses the `select` API to target the `#message` div, setting its content from an imported local ES6 module. It also includes a CSS file for styling the text. The example serves as a basic template for integrating D3, local modules, and stylesheets within the VizHub environment.