Hassan Abdullah

@hassanabdullah-art·14 public vizzes

Untitled

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization demonstrates customization of D3 axes, with styled tick marks, labels, and a title. The chart uses D3 to load the CSV data and render bars, with the y-axis and x-axis formatted for readability. The bar fill is steelblue, and all text elements use sans-serif fonts. The example builds on a previous bar chart tutorial and includes a button that triggers a JavaScript function.

Dec 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a basic interactive HTML page that displays a large, centered “Hello HTML!” message. A button labeled “Click me” triggers a `myFunction` JavaScript function, which logs “You clivked me” to the browser’s console. The page uses plain HTML, CSS for styling via the `.message` class, and JavaScript for the button’s onclick event handler, without any external libraries or frameworks.

Dec 12, 2021

Loading thumbnail…

Flight Paths using Edge Bundling

This visualization shows flight paths between US airports using edge bundling, with a basemap of the continental United States rendered as projected SVG paths. Airport positions are marked with scaled circles, and a Voronoi diagram enables interactive highlighting of individual airports. The code uses d3.json, d3.csv, and Promise.all to load topojson map data and CSV flight/airport datasets, then filters and sorts the data to display the top 50 airports. d3.geoPath, d3.geoAlbers, and d3.scaleSqrt are used for map projection, path generation, and bubble sizing.

Dec 11, 2021

Loading thumbnail…

Show National Contiguity with a Force Directed Graph - D3.js

This example visualizes national contiguity using a force-directed graph, where each country is represented by a flag sprite node and connections between bordering nations are shown as red links. It uses D3 v3’s `d3.layout.force` to simulate the physical layout, with nodes and links animated over time as the simulation runs. Hovering over a flag triggers a tooltip displaying the country name. The data is loaded asynchronously from a remote JSON file hosted on GitHub.

Dec 8, 2021

Loading thumbnail…

Untitled

A force-directed graph displays connections among a set of named nodes, with gray circles linked by straight lines. The visualization is built using D3 v7 and SVG, employing `d3.forceSimulation` to compute node positions and update the layout on each tick. Links represent relationships from a fixed array of source-target pairs, while the code also includes a commented-out CSV loader for potential data import. Node and link styling is defined in an external stylesheet.

Dec 8, 2021

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example demonstrates how to load and render world country boundaries as SVG paths. It fetches GeoJSON data from the world-atlas TopoJSON dataset via `d3.json` and converts it using `topojson.feature`. The visualization applies `d3.geoMercator` and `d3.geoPath` to project the geographic coordinates into a 960 by 500 pixel SVG canvas, though the rendering function is only partially implemented, leaving the map unpublished until the path data is appended. The code imports `select`, `json`, `geoPath`, and `geoMercator` from D3 v5.

Dec 6, 2021

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower, with each car represented as a semi-transparent red circle. The data originates from an auto-mpg CSV file, loaded via `csv()`, with numeric fields parsed and scales computed using `scaleLinear()`, `extent()`, and `nice()`. D3’s `axisBottom()` and `axisLeft()` render labeled axes with customized tick styling. SVG circles are positioned via `cx` and `cy` attributes, and the chart includes a title, axis labels, and rotated y-axis text.

Dec 5, 2021

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries, using 2018 data from the United Nations World Population Prospects. A linear scale maps population counts to horizontal positions, while a point scale arranges country names vertically. The code builds the SVG visualization with d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom, formatting tick labels with d3.format. Grid lines and custom axis labels enhance readability, and circles render the data points.

Dec 5, 2021

Loading thumbnail…

Fork of Making bar chart

This example presents a horizontal bar chart ranking countries by population, using a fork of a D3 bar-chart template. It shows the data from `data.csv` with D3 v5, mapping population values to bar lengths and country names to vertical bands. The visualization is rendered as an SVG, with a linear scale for the x-axis and a band scale for the y-axis. It utilizes `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, gridlines, and labels, styled via CSS with custom tick and title fonts.

Dec 4, 2021

Loading thumbnail…

Making bar chart

A horizontal bar chart displays the top ten countries by population, using the provided data.csv file. D3 v5 with SVG renders steel-blue bars and axes, employing `scaleLinear` and `scaleBand` for scales. The code imports `select`, `csv`, `max`, and axis functions from D3, customizes tick formatting via `format('.3s')`, and removes redundant axis lines for a cleaner presentation.

Dec 4, 2021

Loading thumbnail…

Face

This example uses D3.js (v5) to draw a simple yellow face as an SVG graphic. It constructs the face from basic shapes: a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth. The code uses D3 selections, the `arc()` generator with `innerRadius`, `outerRadius`, and angle values, and applies SVG attributes like `cx`, `cy`, and `transform` to position elements. The visualization demonstrates how D3 can create static, non-data-driven graphics through geometric primitives.

Nov 30, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled directly with CSS. It shows how color, stroke, and fill attributes apply both inline and through a class selector, with a transformed group scaling and translating the artwork. The SVG is embedded directly in HTML, with the stylesheet controlling the body layout and the `.lines` group’s stroke properties. Static rendering uses no JavaScript libraries, relying purely on SVG markup and CSS rules.

Nov 30, 2021

Loading thumbnail…

Cars Report

This example demonstrates a minimal visualization gallery entry that displays the text "H" in a large HTML `<pre>` element. It loads D3 via UNPKG and uses ES6 module imports to fetch and parse a hard-coded JSON array of car data from `cars.js`. The code imports the parsed `cars` array but does not render it, instead writing a static message to the DOM via `document.getElementById`. The example primarily showcases VizHub’s support for module loading and D3 integration.

Nov 30, 2021

Loading thumbnail…

Fork of Cars Report

This fork of a Cars Report displays a live list of used cars with their prices, presented in a large, pre-formatted text block. The visualization begins by showing a "Loading..." state before producing a filtered report. It uses JavaScript to handle a hard-coded JSON array of vehicle data, simulating an asynchronous fetch through a Promise. The core logic employs the `filter` and `map` array methods, alongside object destructuring and template literals, to select and format cars under a specified price threshold.

Nov 30, 2021