Mohamed Ali

@Mohamedakhalil·4 public vizzes

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a dataset of automobiles, with tooltips revealing the car name. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, loads data from a CSV file via d3.csv, and renders as an SVG. The chart uses markPoint encoding with scaled axes and opacity to handle overlapping points, while the configuration customizes axis appearance and font styling.

Jul 31, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot of car data, using engine displacement and horsepower as quantitative axes with a tooltip that reveals the car’s name. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite, and relies on d3.v5 for data handling. The code fetches external data, applies a custom configuration for axis and label styling, and renders a full-window SVG with semi-transparent points. Vega-Tooltip enhances interactivity by providing hover-based details.

Jul 31, 2022

Loading thumbnail…

Smiley face part 1

This example shows a single gray circle centered in an SVG canvas, rendered using React and D3 v7. The circle is positioned statically at the midpoint of the 960×500 viewport, with no interactive data binding. It demonstrates React’s `ReactDOM.render` method to mount a functional component that returns an SVG `<circle>`, while a separate static SVG in the HTML displays two additional unfilled circles. A mouse move handler logs events to the console, but no visual feedback occurs. The rendering relies on React’s virtual DOM and D3’s SVG utilities.

Jul 27, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This fork of the Smiley Face Part II example renders a large yellow smiley face that scales to fill the browser window. The React application computes the face’s dimensions from `window.innerWidth` and `window.innerHeight`, centering the head and positioning two simple eye circles relative to that center. The visualization uses React’s `ReactDOM.render` to inject an SVG directly into the page, with the face’s body defined by a yellow circle with a black stroke, while the eyes are drawn as unfilled circles. No mouth is included in the final code, despite the name.

Jul 26, 2022