I

ILYAS AHMED

@ILYASAHMED8096·19 public vizzes

Loading thumbnail…

Fork of Activity 7_Answer 1_D3.JS

This chart shows the distribution of vehicle types in a dataset as a pie chart, with each slice labeled in a legend and the raw counts provided via hover tooltips. The chart uses an SVG rendering approach with D3.js v7, specifically leveraging `d3.pie` for angle generation, `d3.arc` for path construction, and `d3.rollup` to aggregate the CSV data by vehicle type. The color scale uses `d3.scaleOrdinal` with the Tableau10 scheme. An x-axis title and a mislabeled y-axis title (indicated as "Count (slice size)") are decorative, as no coordinates are plotted.

Loading thumbnail…

Fork of Fork of Q2_Activity7.1

This area chart visualizes yearly global CO₂ emissions in million metric tons, with a steelblue filled region showing emissions over time on a linear scale. The visualization uses D3 v6 APIs including `d3.csv` for data loading, `d3.area` for path generation, and `d3.axisBottom` and `d3.axisLeft` for axes. The data is loaded from a GitHub gist CSV file. A title, axis labels, and a clean SVG rendering with margins complete the chart.

Loading thumbnail…

Fork of Q2_Activity7.1

This area chart visualizes yearly global CO₂ emissions in million metric tons, with a semi-transparent steelblue fill and labeled axes for year and emissions. The D3 v6 code loads a CSV dataset from a GitHub gist, parses its numeric columns, and uses `d3.scaleLinear` for both axes, `d3.area` to generate the area path, and `d3.axisBottom`/`d3.axisLeft` for the tick marks, while annotating the axes with custom text elements.

Loading thumbnail…

Fork of Q1_Activity7.1

This pie chart displays the distribution of world population by country. It visualizes the proportional share of each nation's population through colored slices, with a legend to the right identifying each country and the population values labeled directly on the slices. The visualization uses D3.js v6, loading data from a CSV file hosted on GitHub Gist, and relies on D3's `pie`, `arc`, and `scaleOrdinal` APIs to generate the chart, with SVG elements for rendering the pie slices, labels, and legend.

Loading thumbnail…

Fork of Activity_7.1Tutorial

This animated scatter plot displays Fisher's Iris dataset, cycling through the four measured features (petal and sepal width/length) on the x-axis while plotting sepal length on the y-axis. Species are distinguished by color (skyblue, lightgreen, and orange), with a legend and axis labels updating at each interval. The visualization is built with D3.js (v6.7.0) using the `scatterPlot` module, `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` for animation, rendering as an SVG with data loaded from a remote CSV.

Loading thumbnail…

Fork of Activity6_Task1

This visualization displays the populations of 20 countries in 2010 as horizontal bars sorted along a categorical y-axis. Built with React and D3.v5, it uses `scaleBand` and `scaleLinear` to map countries and population values, rendering SVG rectangles with tooltips. Axis components generate custom ticks, with bottom tick labels formatted using `d3.format` to abbreviate large numbers (e.g., “1.2B”). Data is loaded asynchronously from a CSV file using D3’s `csv` function.

Loading thumbnail…

Fork of Activity6_Task2

This horizontally stacked bar chart displays average horsepower, torque, and highway MPG by car make, using a color-coded segment for each spec. The data is loaded from a CSV file and rendered as SVG rectangles via `d3.stack()`, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. UI text uses custom fonts, and the visualization includes axis labels and a title.

Loading thumbnail…

Fork of Activity6_Task3

This scatter plot visualizes the relationship between average temperature and rainfall across multiple cities, using distinct colors and geometric shapes to differentiate data points by city. The visualization loads city data from a GitHub-hosted CSV file and renders it as an SVG using D3 v7, with linear scales for both axes. It employs `d3.symbol` with ordinal scaling to assign unique shapes to each city, while `d3.scaleOrdinal` with `schemeCategory10` provides color encoding. The chart includes labeled axes, a title, and a legend constructed from repeated symbol paths and text elements.

Loading thumbnail…

Fork of Activity6_Task4

This interactive bubble chart visualizes the relationship between city population, area, and GDP. Each circle’s size encodes GDP, position maps population and area, and color distinguishes cities. The chart uses D3 v7 with SVG and animation, featuring custom tooltips that display city details on hover. Data is loaded from a CSV file and rendered with scales for axes and bubble sizing.

Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on the page in large type. It demonstrates a minimal setup for a D3.js visualization project within the VizHub environment. The page is built with an `index.html` file that loads D3 version 6 from a CDN and a separate `bundle.js` script. The `index.js` file imports the `select` function from D3 and uses it to target the `#message` division, setting its text content with a value imported from a local ES6 module. Styling is applied via an external `styles.css` file, which centers the message and sets its font size.

Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on the page in large type. It demonstrates a minimal setup for a D3.js visualization project within the VizHub environment. The page is built with an `index.html` file that loads D3 version 6 from a CDN and a separate `bundle.js` script. The `index.js` file imports the `select` function from D3 and uses it to target the `#message` division, setting its text content with a value imported from a local ES6 module. Styling is applied via an external `styles.css` file, which centers the message and sets its font size.

Loading thumbnail…

Fork of Activity6_Task1

This bar chart displays the top 20 countries by population in 2010, with countries listed on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for axis scaling. The `Marks.js` component creates the orange bars, while `AxisBottom.js` and `AxisLeft.js` generate the axes. Data is loaded asynchronously from a CSV file using D3's `csv` function, and hover effects show precise population values via SVG `<title>` tooltips.

Loading thumbnail…

Fork of Activity6_Task3

This scatter plot visualizes the relationship between average temperature and rainfall across multiple cities, using distinct colors and geometric shapes to differentiate data points by city. The visualization loads city data from a GitHub-hosted CSV file and renders it as an SVG using D3 v7, with linear scales for both axes. It employs `d3.symbol` with ordinal scaling to assign unique shapes to each city, while `d3.scaleOrdinal` with `schemeCategory10` provides color encoding. The chart includes labeled axes, a title, and a legend constructed from repeated symbol paths and text elements.

Loading thumbnail…

Fork of Activity6_Task4

This interactive bubble chart visualizes the relationship between city population, area, and GDP. Each circle’s size encodes GDP, position maps population and area, and color distinguishes cities. The chart uses D3 v7 with SVG and animation, featuring custom tooltips that display city details on hover. Data is loaded from a CSV file and rendered with scales for axes and bubble sizing.

Loading thumbnail…

Fork of Activity6_Task3

This scatter plot visualizes the relationship between average temperature and rainfall across multiple cities, using distinct colors and geometric shapes to differentiate data points by city. The visualization loads city data from a GitHub-hosted CSV file and renders it as an SVG using D3 v7, with linear scales for both axes. It employs `d3.symbol` with ordinal scaling to assign unique shapes to each city, while `d3.scaleOrdinal` with `schemeCategory10` provides color encoding. The chart includes labeled axes, a title, and a legend constructed from repeated symbol paths and text elements.

Loading thumbnail…

Fork of Activity6_Task2

This horizontally stacked bar chart displays average horsepower, torque, and highway MPG by car make, using a color-coded segment for each spec. The data is loaded from a CSV file and rendered as SVG rectangles via `d3.stack()`, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. UI text uses custom fonts, and the visualization includes axis labels and a title.

Loading thumbnail…

Fork of Activity6_Task1

This bar chart displays the populations of the top 20 countries in 2010, sorted by country name along the vertical axis. The horizontal bars use a linear scale to represent population values, with tick labels formatted in billions using d3.format. The visualization is built with React and renders SVG elements, pulling data from a remote CSV file via d3.csv. Axes are constructed using custom components that map scales to SVG lines and text, while rectangular marks include native tooltips showing the formatted population value.

Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the population of 20 countries in 2010, using a horizontal layout where bar lengths represent population values. Built with React and D3 v5, the visualization loads CSV data from a GitHub gist and renders SVG elements through custom ES6 modules. D3's `scaleBand`, `scaleLinear`, and `format` APIs handle axis positioning and tick labels, while interactive tooltips reveal precise population figures via SVG `<title>` elements.

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a static horizontal bar chart titled “Population by Country - 2000,” rendered as an SVG element sized 960 by 500 pixels. The chart’s data is not loaded from an external file but instead relies on a placeholder message in the `myMessage.js` module, which D3’s `select` API sets into an HTML div. The visualization uses D3’s import system to select the SVG and message elements, following the v3 source format, with all styling defined in an external `styles.css` file.