atayyaba

COVID-19 | April,2020

This map visualizes the global spread of COVID-19 as of April 26, 2020, displaying confirmed cases, deaths, and recoveries per country. It uses the ArcGIS API for JavaScript 4.15 with FeatureLayers over a gray basemap, centered on the Mediterranean at zoom level 2. The layer popup template shows country-specific statistics with digit formatting. Data comes from a Kaggle dataset, rendered via ArcGIS online services for confirmed cases and deaths.

Apr 30, 2020

Outbreaks

This visualization shows aggregated foodborne illness counts by month, with bars colored by the primary transmission mode of the outbreak. The chart uses a stacked bar chart where each month’s total illnesses are broken down by transmission category, and tooltips reveal the specific mode. Built with React, it loads data via D3’s `csv` method from a public dataset, then renders the chart using Vega-Lite’s API with a bar mark. The visualization filters out records with null primary modes and applies custom axis styling for readability.

Apr 30, 2020

Making Verticle Bar Chat

This example shows a vertical bar chart of country populations, using a bar for each nation sorted by population size. The visualization is built with D3 v5 and renders as SVG, using `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the x-axis. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands to absolute numbers. Axes are added with `d3.axisLeft` and `d3.axisBottom`, and bars are drawn as SVG `rect` elements with a steelblue fill.

Making Bar Chat

This example shows a horizontal bar chart of country populations, with bars sorted alphabetically by country name. The chart uses a linear scale for population values and a band scale for countries, with axes labeled accordingly. Rendered as an SVG, the visualization loads data from an external CSV file using D3's `csv` function, then applies `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5 to construct the chart and support resizing.

Making Verticle Bar Chat

This example shows a vertical bar chart of country populations using a CSV dataset. It uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the x-axis. The code loads data via `d3.csv`, applies a population multiplier, and renders bars with `d3.selectAll` and `rect` elements, while axes are drawn using `d3.axisLeft` and `d3.axisBottom`.

Making Bar Chat

This example shows a horizontal bar chart of country populations, with bars sorted alphabetically by country name. The chart uses a linear scale for population values and a band scale for countries, with axes labeled accordingly. Rendered as an SVG, the visualization loads data from an external CSV file using D3's `csv` function, then applies `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5 to construct the chart and support resizing.

Customized Axis

This example displays a horizontal bar chart of the top 10 most populated countries, using a customized axis to improve readability. The chart uses D3 v5 APIs, including `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. A custom axis label formats large numbers in a concise way (e.g., converting 'G' to 'B'), while axis lines and domains are selectively removed for a cleaner presentation. Labels and tick marks are styled with custom colors and fonts via CSS. Data is loaded from a CSV file.

Making Bar Chat

This example shows a horizontal bar chart of country populations, with bars sorted alphabetically by country name. The chart uses a linear scale for population values and a band scale for countries, with axes labeled accordingly. Rendered as an SVG, the visualization loads data from an external CSV file using D3's `csv` function, then applies `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5 to construct the chart and support resizing.

Customized Axis

This example displays a horizontal bar chart of the top 10 most populated countries, using a customized axis to improve readability. The chart uses D3 v5 APIs, including `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. A custom axis label formats large numbers in a concise way (e.g., converting 'G' to 'B'), while axis lines and domains are selectively removed for a cleaner presentation. Labels and tick marks are styled with custom colors and fonts via CSS. Data is loaded from a CSV file.

Lets make a face with D3

Using D3.js v5 within a React framework, this SVG animation constructs a smiling yellow face from basic geometric shapes. The code draws concentric circles for the head, eyes, and an arc-generated mouth, with rectangular eyebrows that animate vertically twice over four seconds. The face is centered via a translated group element, and all coordinates are computed from window dimensions. The piece uses D3's `select`, `arc`, and chained `transition().duration()` calls to move the brows, demonstrating how primitive primitives combine into expressive characters.