byiringirodalio

@byiringirodalio·12 public vizzes

Fork of Smiley face part 1

This visualization displays the populations of ten countries as horizontal bars, scaled proportionally to their population values. The chart uses D3's `scaleLinear` to map population data from a CSV file to pixel widths, with each bar's length representing its country's total population. The React-based rendering appends SVG `rect` elements to the canvas, and the data is preprocessed by multiplying the population values by 1000 before scaling.

Apr 9, 2021

Loading thumbnail…

Fork of Smiley face part 1

This example shows a static green rectangle drawn on a red SVG background, representing the first step toward a smiley face. The visualization uses React with D3 v6, where the `select` API targets the SVG element and `append` adds the rectangle with explicit width, height, fill, and stroke attributes. The code also loads a CSV file containing population data for ten countries using `csv` from D3, converting the population values to numbers. However, the loaded data does not currently influence the rendering, leaving the rectangle as the only visible output.

Apr 6, 2021

Loading thumbnail…

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

This fork of “Let's make a face with D3.js!” demonstrates fundamental DOM manipulation by rendering a static smiley face with movable eyebrows. The example loads a CSV file containing country population data, parsing and scaling the population values by 1000 using the `d3.csv` method. The visualization uses D3 v5 to select an SVG element and bind data, though the face itself is constructed with basic SVG shapes rather than data-driven elements. The code highlights asynchronous data loading and console logging before any visual update occurs.

Mar 31, 2021

Loading thumbnail…

Fork of Smiley face part 1

A static smiley face drawn with React and D3, rendered as SVG. The face consists of two offset eye circles and a mouth arc built with the `d3.arc` generator, centered within a larger yellow circle with a black stroke. The mouth’s start and end angles define a downward curve, while the eyes use fixed offsets from the center. The background is set to red via D3 selection in the HTML, though the core visual is generated entirely by React components.

Mar 31, 2021

Loading thumbnail…

Fork of Hello

This example displays a single car model from a small dataset of vehicles, showing the text "accord" centered on the page with large font styling. It imports car data from a local ES6 module (`cars.js`) that parses a JSON string using `JSON.parse`, then accesses the second entry to extract the model field. The code demonstrates module imports, DOM manipulation via `getElementById`, and CSS styling for the message element.

Mar 30, 2021

Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how VizHub’s `package.json` configuration maps NPM dependencies to browser globals, enabling ES6 imports for React and React DOM. It renders a simple React component displaying the text “Hello package.json” using `ReactDOM.render`. The `vizhub.libraries` field specifies `global` and `path` mappings for `react` and `react-dom`, which VizHub uses to inject the correct CDN `<script>` tags from `unpkg.com`. The example also shows a custom `ISC` license declaration.

Mar 30, 2021

Loading thumbnail…

Fork of Hello Package.json

This example demonstrates VizHub’s package.json support by displaying the text “byiringiro” in a large, centered font. The code uses a minimal React setup, though the actual rendering relies on a simple script that sets the text content of a `<pre>` element. The visualization highlights how to declare dependencies and custom CDN mappings for React and ReactDOM within the package.json file, which VizHub uses to automatically load the required libraries.

Mar 30, 2021

Loading thumbnail…

Datavisualizationcourse

A minimal React page displays a hardcoded string of car data, including make, model, year, and price, directly in the browser. The example uses JavaScript’s `JSON.parse` to interpret the embedded data structure and then renders it as plain text through the `document.getElementById` method. The page demonstrates basic DOM manipulation with vanilla JavaScript within a React starter template, showing how to import and display data from a separate module. The styling is minimal, centering the text on a white background.

Mar 30, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” prominently centered on the page at a massive 13em font size, while also logging “Hello JavaScript!” to the console. It demonstrates a minimal HTML document with embedded CSS styling and a JavaScript script tag. The code uses plain HTML elements, CSS body rules, and the console.log API to illustrate basic web page structure and interaction. It serves as a simple starter template for understanding how HTML, CSS, and JavaScript combine in a single file.

Mar 30, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays static text reading “Hello HTML” on a large scale, with population data logged to the browser console. The HTML page uses CSS for centered styling and inline JavaScript for a console message, while a separate script imports D3’s `select` and `csv` functions to load data.csv. The visualization does not render the dataset visually; it only demonstrates basic D3 data loading and console output within a bare HTML starter template.

Mar 30, 2021

Loading thumbnail…

Document

This example displays the model name of the third car in a small dataset, rendered as large text on a webpage. It uses a static JSON array of car objects containing year, make, model, and price, imported from a separate module. The code employs the `document.getElementById` method to select the `<pre>` element and sets its `textContent` to the model value, demonstrating basic data retrieval and DOM manipulation in a React project.

Mar 24, 2021

Loading thumbnail…

First htmk

This example demonstrates a minimal HTML page that renders the text “hellow world” using CSS styling and a JavaScript variable. The page uses standard DOM APIs via the `<script>` tag to assign the message string to a `<pre>` element, while CSS sets the font size and alignment. The code also logs a message to the browser console. It serves as a bare-bones introduction to combining HTML, CSS, and JavaScript in a single file, with no external libraries or data sources.

Mar 22, 2021