Godspower Wodi

@GpWoody1·11 public vizzes

Make a bar chat d3js

This example shows a simple bar chart of COVID-19 total cases by geographic region, using data from a local CSV file. The bar heights represent case counts, with regions listed along the y-axis. It uses d3.scaleLinear for the x-axis domain, d3.scaleBand for the categorical y-axis, and renders SVG rectangles via d3.selectAll and data joins. The code imports specific functions from D3 v7 and the CSV loading is handled with d3.csv.

Apr 6, 2022

Loading thumbnail…

Fork of make a face d3js

This animated SVG face uses D3.js v7 to build a cheerful character from basic geometric shapes. It draws a yellow circle head with elliptical eyes, circular irises, rectangular brows, and a mouth shaped using the `arc` function. The eyebrows are the only animated elements, moving via chained `transition` calls on their transform attributes. The markup is generated imperatively through `select` and `append`, with coordinates calculated from the SVG’s width and height attributes.

Mar 3, 2022

Loading thumbnail…

Fork of make a face d3js

This example shows an interactive face made of circles that respond to mouse movement using a D3 force simulation. The visualization reads COVID-19 case data from a CSV file, though the display itself focuses on the playful animated face rather than a traditional chart. Built with D3 v7 and React, the code uses `d3.forceSimulation` to position the facial features, which are rendered as SVG elements within a 960x500 viewport. The simulation continuously updates node positions, creating a lively, dynamic expression that follows the pointer.

Mar 3, 2022

Loading thumbnail…

make a face d3js

This example uses D3.js (v7) and React to draw a stylized, animated face composed of SVG shapes, including a yellow circle head, elliptical eyes with irises, rectangular eyebrows, and an arc-shaped mouth. The face is centered on a 960×500 canvas, with eyebrows moving via chained D3 transitions. The code builds the face using D3’s `select`, `append`, and `attr` methods, along with the `d3.arc` API for the mouth path, all rendered as SVG elements.

Feb 22, 2022

Loading thumbnail…

Fork of make a face d3js

This example shows a cartoon face built entirely from basic SVG shapes, using D3 v7 to create a yellow circle head, two elliptical eyes with irises, and a wavy mouth path. The code leverages D3’s `select` and `arc` APIs to generate two crescent-shaped arcs, transformed and positioned to represent drunk, half-closed eye lids. Additional shapes like `circle` and `ellipse` are appended manually, while the mouth is a hand-written path string with stroke styling, all rendered at a fixed 960×500 SVG canvas size.

Feb 22, 2022

Loading thumbnail…

Fork of Fork of make a face d3js

This example draws a simple smiling face using D3.js, with a yellow circular head, white elliptical eyes with dark pupils, and a wide arc-shaped mouth. The face is rendered as SVG elements within a 960×500 viewport, with the head centered and the mouth positioned using D3’s `arc` generator to create a path. The code explicitly selects the SVG canvas and appends shapes using D3’s selection API, setting attributes like fill, stroke, and geometry directly.

Feb 22, 2022

Loading thumbnail…

Fork of HTML Practice

This example demonstrates an SVG composition of circles, rectangles, lines, and a path, arranged in a scaled coordinate space. The shapes use both inline presentation attributes and CSS classes to control fill, stroke, and line join styling. It shows how SVG elements can be grouped and transformed using the `g` element with `transform` attributes, and how styles cascade from a stylesheet to specific elements like the path. The code primarily uses raw SVG markup within an HTML page, with no external JavaScript libraries.

Feb 22, 2022

Loading thumbnail…

HTML Practice

This example presents a simple car price report as a bulleted list. It demonstrates the basic roles of HTML for structure, an external CSS stylesheet for presentation, and JavaScript, though the visible code focuses on the former two. The page uses standard HTML elements like `<h1>` and `<ul>`, and CSS to apply a monospace font and highlight a specific list item with red background and white text. The data is hard-coded in the markup.

Feb 21, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple data report generator that filters a static dataset of five cars by price and displays the results as formatted text. It uses JavaScript Promises with `setTimeout` to simulate asynchronous data loading, then generates a report via the `generateReport` function, which filters cars under $2000 and formats each entry with `formatCars`. The output appears in an HTML `<pre>` element, initially showing a loading message. The code leverages plain JavaScript, `JSON.parse`, and DOM manipulation through `getElementById`, with no external charting or visualization libraries.

Feb 21, 2022

Loading thumbnail…

Fork of Cars Report

This example demonstrates how to generate a text-based car report by filtering a JSON dataset of vehicles based on price. It uses the `getCars` function with a simulated asynchronous delay to load car data, then the `generateReport` function filters cars below a price threshold and formats each entry using the `formatCar` function. The report is displayed in a `<pre>` element on the page via plain DOM manipulation in `index.js`. JavaScript modules and Promises are used to structure the data flow and rendering.

Feb 21, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the text “Hello HTML!” centered on a blank canvas. It uses plain HTML for structure, CSS to scale the message to a large font size and align it, with no data or JavaScript logic involved. The rendered output is a single static line of text, styled directly within the page’s `<style>` block.

Feb 20, 2022