Halima-Ali

@Halima-Ali·5 public vizzes

Making a bar chart

This example shows an empty SVG canvas awaiting the construction of a bar chart. The code initializes a D3 selection on the `svg` element, importing only `select` and `arc` from D3 v7, though no data or bars are yet defined. The page loads D3 from a CDN and applies minimal CSS to remove margins and hide overflow, setting up a clean workspace for future chart rendering.

Oct 12, 2022

Loading thumbnail…

Let's make a face with d3.js

This example displays a cheerful cartoon face built entirely with D3.js SVG elements. A yellow circle forms the head, while smaller circles create the eyes and a path generated with the `d3.arc()` function draws the smile. The code constructs the face by appending grouped shapes to an SVG canvas, and the eyebrows animate up and down using chained `transition()` calls with a two-second duration each. The face is centered by translating a group element based on the SVG's height and width.

Oct 12, 2022

Loading thumbnail…

shapes with SVG and CSS

This example demonstrates the use of SVG shapes styled through CSS and inline attributes. It displays circles and rectangles, with some colored red and green, and a group applying blue fill with red stroke. A separate group with class "lines" draws a black line and a purple path with rounded line joins. The SVG is scaled by 1.5 using a transform. It relies solely on SVG elements and CSS for styling, with no JavaScript libraries.

Oct 6, 2022

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML list of car models, with the Nissan Leaf visually emphasized in red. It demonstrates static, document-style data presentation rather than interactive graphics. The page structure is defined by standard HTML markup in `index.html`, using an unordered list (`<ul>`) and list items (`<li>`) to render the data. Styling is applied via an external `styles.css` stylesheet, which sets a monospace font and a large base font size, and uses a `.highlighted` class selector to color the first car red. No JavaScript libraries or dynamic rendering APIs are used.

Sep 6, 2022

Loading thumbnail…

Car Report

This example demonstrates a text-based car report generated from a hardcoded JSON dataset. It displays a list of cars filtered by price, showing the year, make, model, and price of vehicles under a $2,000 threshold. The report loads asynchronously using a Promise with a two-second delay. The code uses D3 v5, ES6 modules for data processing, and JavaScript string formatting to build the final text output presented in a large preformatted HTML element.

Sep 4, 2022