Ilyas Filali

@Nayetwolf·12 public vizzes

SVG Fundamentals

This example demonstrates raw SVG shape drawing within a web page. It shows a blue circle, a second black circle, and a thick navy diagonal line rendered on a 960 by 500 canvas. The code uses the standard SVG elements `circle` and `line`, defining their positions with `cx`, `cy`, `r`, `x1`, `y1`, `x2`, and `y2` attributes. Colors and stroke width are set directly via the `fill`, `stroke`, and `stroke-width` presentation attributes, with no external data or scripting involved.

Dec 6, 2022

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, showing sepal length and width measurements for individual flowers. Each point is rendered as an SVG circle, with axis labels and tick marks styled using a custom Poppins font and muted color palette. The visualization is built with React and D3 v5, using `scaleLinear` for axis scaling, `extent` to compute domains, and `csv` to load data. Components for axes and marks are modularized, with hover tooltips implemented via native SVG `<title>` elements.

Sep 20, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive scatterplot displays the Iris flower dataset, mapping sepal length and width as circular marks. Built with React and D3 v5, it uses `d3.scaleLinear` and `d3.extent` to set scales, while custom Axis components render tick lines and labels in SVG. The visualization includes hover tooltips via SVG `<title>` elements, styled with Poppins typography and teal marks, with data loaded asynchronously from a CSV source.

Sep 19, 2022

Loading thumbnail…

Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, using a teal color scheme and a clean, minimal aesthetic. The chart is rendered with SVG inside a React component, leveraging D3 scales (scaleBand and scaleLinear) to position bars and axes. Population values are formatted with D3’s format function, and tooltips show the raw numbers. Data comes from the United Nations World Population Prospects 2019, filtered to the first ten entries.

Sep 19, 2022

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, using data loaded from a CSV of UN population figures. The chart renders bars with SVG `<rect>` elements, with a linear scale for the x-axis and a band scale for the y-axis. React components structure the visualization, while D3 utilities like `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. Axis components generate tick marks and labels, all within a fixed-width SVG canvas.

Sep 17, 2022

Loading thumbnail…

Axes with React & D3

This example renders a horizontal bar chart of the ten most populous countries in 2020, using React to manage the user interface and D3 v5 utilities for data loading and scales. The code fetches data from a CSV using `d3.csv`, then builds a band scale for countries and a linear scale for population values. SVG elements are generated declaratively through React, with D3’s `scaleBand` and `scaleLinear` computing positions, while explicit axis ticks and labels are mapped from the scales’ domains.

Sep 17, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the ten most populous countries as horizontal bars, with bar length proportional to population. It uses React hooks (useState, useEffect) to load and manage data, and d3’s scaleBand and scaleLinear to position and size SVG rectangles. Population figures come from the United Nations World Population Prospects 2019 CSV, sourced via a gist. No axes or labels are drawn, keeping the chart intentionally bare.

Sep 17, 2022

Loading thumbnail…

Terminator Smiley Face

A yellow smiley face rendered in SVG, composed of a circular face, two black eyes, one red eye, and a thick red arc mouth. The visualization uses React for component structure and D3’s `arc` generator to compute the mouth path. All shapes are positioned via SVG transforms and coordinate offsets, with hardcoded constants for dimensions. The example demonstrates a simple, non-interactive static graphic built with D3 v5 and React 16.9.

Sep 16, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a bar chart of the auto-mpg dataset, with bars representing origin categories and encoding horsepower on the y-axis, mpg through size, and color by origin. Hovering reveals car names via a tooltip. The code imports data through D3’s CSV loader, registers Vega and Vega-Lite via the vega-lite-api library, and configures axis styling and tooltip handling in the provided config.js and index.js files.

Sep 16, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between engine displacement and horsepower for classic automobiles, using a scatter plot with semi-transparent points and tooltips that reveal car model names. It uses the Vega-Lite API to declare the visualization, with D3’s `csv` function loading the data from a GitHub gist. The view renders as SVG, sized to the full window, and applies custom axis and label styling from a separate configuration module. Vega-Tooltip provides interactive hover details.

Sep 16, 2022

Loading thumbnail…

Mouse Follower

A circle follows the cursor within an SVG canvas. The React application tracks mouse movement through the `onMouseMove` event handler, updating the circle's center coordinates via the `useState` hook. The circle moves responsively across a 700 by 500 pixel space, rendered using SVG markup. The `mousePosition` state is initialized at the canvas center before any user interaction.

Sep 15, 2022

Loading thumbnail…

Smiley Face Part I

A grid of 18 smiley faces, each with randomized eye position, eye radius, and mouth size, renders as a playful SVG composition. The faces are generated using React components, with each face composed of a yellow background circle, black eyes, and a mouth arc created via d3.arc. The d3.range function generates the array of faces, and React’s map method renders each with varying parameters. The SVG output is produced through a FaceContainer that translates the center coordinates, while the d3 v7 library supplies the arc generator for the mouth path.

Sep 15, 2022