HaniAlHawasli

@HaniAlHawasli·12 public vizzes

Making A Bar Chart

This horizontal bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nation’s World Population Prospects. The chart uses D3 v5 with an SVG renderer, mapping population to a linear scale and country names to a band scale. Axes are generated via `axisLeft` and `axisBottom`, while rectangular bars are appended and sized based on the scaled data values.

Dec 10, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example draws a cartoon face in an SVG canvas using D3.js v6. It constructs a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. All shapes are positioned within a centered group using SVG transforms, with hardcoded coordinates and dimensions from the index.js source. The final render is scaled via an SVG transform attribute in the HTML.

Dec 9, 2020

Loading thumbnail…

Let's Make a Face Part I

A single yellow circle with a black outline sits centered on a white SVG canvas, flanked by two smaller black circles positioned as eyes. The work is the first step toward constructing a smiley face, showing only the head and eyes without a mouth. The rendering relies on basic SVG primitives—`circle` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—defined directly in static HTML. No JavaScript libraries or data sources are involved; the composition is purely declarative markup.

Dec 9, 2020

Loading thumbnail…

Smiley Face Part III

This example shows a yellow smiley face drawn with SVG, centered in a 960-by-500 viewport. The face consists of three circles for the head and eyes, plus an arc for the mouth, all rendered using React components. The code uses React 16.9 and D3 v5, specifically the `arc` generator from `d3` to create the mouth path. Coordinates are computed from fixed constants and a centered group transform, with the head circle radius derived from the viewport height.

Dec 9, 2020

Loading thumbnail…

Shapes with SVG and CSS

A simple SVG scene displays basic geometric shapes—circles, rectangles, a line, and a polyline path—positioned in an HTML document. The code uses raw SVG elements with CSS styling, including a class selector to apply stroke color and width to the line and path. The shapes demonstrate different fill and stroke properties, such as a red circle, a green rectangle, and a group with a blue fill and black stroke. The SVG canvas is scaled with a transform, and CSS hides page margins and overflow.

Dec 8, 2020

Loading thumbnail…

Cars Report

This example visualizes a small dataset of five used cars with their make, model, year, and price. It loads D3 via UNPKG and imports car data from a local ES6 module using `JSON.parse`. The page renders the raw data into an HTML `<pre>` element with large font size, demonstrating basic module imports and D3 integration with minimal setup.

Dec 8, 2020

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small JSON dataset as text on a web page. It imports the `cars` array from a local ES6 module and uses JavaScript to access the `make` property, which is then assigned to the `textContent` of a `<pre>` element. The visualization demonstrates loading D3 via UNPKG and using ES6 `import` syntax for both local modules and the D3 library, though the current code only renders a single string value.

Dec 8, 2020

Loading thumbnail…

Scatter Plot cars

This scatter plot displays the relationship between horsepower and weight for various car models, sourced from the auto-mpg dataset. The visualization loads data via `d3.csv` and encodes each car as a circle, using `d3.scaleLinear` for both axes. The code constructs the chart with `d3.select`, `d3.axisBottom`, and `d3.axisLeft`, and removes the default axes domains for a cleaner look. All marks are rendered as SVG elements, with styling applied through a linked stylesheet.

Nov 24, 2020

Loading thumbnail…

Let's make a face

This example shows a blank SVG canvas that is ready for a face to be drawn, but it does not yet display any visualization. The code sets up an HTML page with D3 v5 loaded from a CDN, an SVG element sized 960 by 500 pixels, and a script that logs the D3 object to the console. The styling removes body margins and hides overflow. No data or drawing occurs beyond this initialization, making it a minimal starting point for a future D3-based face-building project.

Nov 23, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example displays an empty SVG canvas with a hidden overflow, logging the D3 library version to the console. It uses D3 v5 and relies on CSS for styling, with an SVG element sized at 960 by 500 pixels. The page demonstrates a minimal setup for SVG-based visualization, where the script confirms D3’s availability but renders no shapes or colors.

Nov 23, 2020

Loading thumbnail…

Let's make a face with D3.js

This example builds a stylized face using SVG elements positioned with D3.js v5 in a React context. The code renders a static face composed of circles for the eyes and mouth, with the D3 library loaded via a script tag from unpkg. It demonstrates basic SVG shape creation and styling through CSS, logging the D3 object to the console to confirm the library is available.

Nov 23, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the static text “Hello HTML” centered on a blank white canvas. It demonstrates basic web development structure using CSS for styling and JavaScript for console logging. The code uses inline style rules to set the body’s text alignment, font size, and a script tag with a `console.log` call. This starter serves purely as a foundation for adding visualizations or interactive content.

Nov 23, 2020