moataznasr36

@moataznasr36·8 public vizzes

Fork of Vega-Lite API Template

This visualization displays a scatter plot of auto industry data from the UCI Machine Learning Repository’s Auto MPG dataset. It plots fuel efficiency (mpg) against horsepower, with points colored by origin, sized by vehicle weight, and showing car names as tooltips. The code uses the Vega-Lite API to generate the chart, leveraging `vl.markCircle`, `vl.encode`, and field encodings. The visualization is rendered with Vega, Vega-Lite, and Vega-Tooltip, pulling data via `d3.csv` and applying custom axis and label styling.

Oct 25, 2021

Loading thumbnail…

Fork of React Starter

This example demonstrates a React component that renders a car selection dropdown, styled with a large 5rem font size. The interface shows a label and a select element with four car options (Volvo, Saab, Mercedes, Audi), where Saab is preselected. The code uses React 16.13.1 and ReactDOM to mount the App component into the page, with select and option elements managed as JSX within the component’s return statement. Styling is applied via a CSS class in the HTML document, while the display remains static without interactive updates.

Oct 19, 2021

Loading thumbnail…

Loading Data with React and d3

This example demonstrates an interactive circle that follows the mouse pointer across an SVG canvas in a React application. The circle’s center coordinates update dynamically based on cursor position, handled through React state and the `onMouseMove` event. The code uses React 16.13.1 with `React.useState` and `React.useCallback`, rendering to the DOM via `ReactDOM.render`. No external data is loaded; the visualization relies solely on user input to drive the black circle’s movement within a 960x500 viewport.

Oct 13, 2021

Loading thumbnail…

fetch csv data

This example demonstrates how to fetch and parse a remote CSV file using D3.js. The page displays the static text "Hello HTML" while the JavaScript loads a CSS named color dataset from a GitHub gist via `d3.csv()`. The parsed data is logged to the browser console, showing the array of color objects. The code also includes a commented-out alternative approach using the native `fetch()` API combined with `d3.csvParse()`, illustrating two ways to handle CSV data loading in D3 v7. The example uses minimal CSS styling with centered, oversized text.

Oct 12, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor inside an SVG canvas, with its center tracking the pointer's position in real time. The visualization uses React's state management and event handling, specifically React.useState for storing coordinates and React.useCallback for the mouse move handler. The SVG element registers an onMouseMove event, and the circle's cx and cy attributes update accordingly. The code renders through ReactDOM.render, with the SVG viewport set to 960 by 500 pixels.

Oct 12, 2021

Loading thumbnail…

Mouse Follower

This example displays the text “Hello HTML” prominently in the center of the page, styled with CSS at a font size of 13em. The page’s JavaScript uses the `fetch` API to asynchronously retrieve a CSV file of named CSS colors from a GitHub gist, logging the fetched text to the browser’s console. It demonstrates a simple React-free HTML/CSS/JavaScript setup for loading external data.

Oct 12, 2021

Loading thumbnail…

Smiling face

A smiling face rendered as a yellow SVG circle with two black eyes and a curved mouth, centered on a 960 by 500 canvas. Built with React and D3 v7, it uses D3's `arc` generator to create the mouth path, while the face and eyes are simple SVG `circle` elements positioned with hardcoded offsets relative to the center. The black stroke on the outer circle and the fill colors are set directly in the SVG markup.

Oct 12, 2021

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text “Hello HTML” in large, centered type, with the page’s body styled to fill the screen. It demonstrates fetching and logging data to the console. The code uses the Fetch API to retrieve a CSV file containing CSS named colors from a GitHub Gist, then logs the raw text response to the browser’s developer console. The visualization itself is minimal, focusing on the client-side data retrieval pattern within a basic HTML and CSS layout.

Oct 12, 2021