A

AbdouEnsaj

@AbdouEnsaj·40 public vizzes

Loading thumbnail…

Bar chart with D3.js

This bar chart displays the most loved programming languages in 2018, based on Stack Overflow survey data, with values as percentages on a love meter scale. Using D3.js v5 within a React framework, the SVG visualization includes labeled axes, a title, and a source note. On mouse hover, a bar highlights, a dashed limit line appears, and divergence text shows percentage differences relative to the selected language. The code employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render the chart, with transitions animating the hover effects.

Loading thumbnail…

Fork of Aditya - React D3 Conditional Line Chart Practice

A React and D3 line chart visualizes risk values over time, with each data point colored conditionally by its value: green below 50, amber between 50 and 75, and red above 75. The line connects monthly data from a CSV file, while dashed threshold lines mark the 50 and 75 percent boundaries. The chart uses `scaleTime` and `scaleLinear` for axes, `d3.line` for the path, and SVG `<circle>` elements with hover tooltips showing formatted percentage values.

Loading thumbnail…

Making a bar chart (customized axes)

This example visualizes the population of the top 10 most populous countries using a horizontal bar chart, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes, including a formatted bottom axis that abbreviates large numbers (e.g., converting billions to "B") and a left axis with tick labels and grid lines. The code uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering the chart as SVG with styled rectangles and text labels.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This interactive stacked bar chart visualizes the estimated 2010 religious composition of the world’s 20 most populous countries, based on Pew Research data. Hovering over a bar reveals a tooltip with the specific religion, country, and population count. The color legend highlights individual religions when hovered, dimming other layers via a semi-transparent overlay. Built with D3.js (version 3.5.5), it uses `d3.layout.stack` for layered bars, `d3.svg.axis`, and `d3.legend.color`. The SVG output is animated, rendering smooth transitions between highlighted states.

Loading thumbnail…

Untitled

A bar chart displays XYZ Foods stock prices per year, reading from a CSV file and rendered as SVG. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with axes labeled "Year" and "Stock Price." On mouseover, bars highlight in orange via d3.select and animate with a transition, expanding width and shifting position while a dollar-value label appears; mouseout reverses these changes and removes the label. d3.v4 handles the animations and event-driven interactions.

Loading thumbnail…

Fork of Fork of Force-Directed Graph V9 test

This force-directed graph visualizes network connections between IT applications and infrastructure devices, with nodes loaded from applications.csv and links from interf.csv. The example uses d3.forceSimulation with forceManyBody, forceLink, forceCenter, and forceCollide to position nodes, while d3.drag enables interactive repositioning. Rendered as SVG circles and lines, node labels display alongside each element, with gray strokes marking links and text shadows for readability.

Loading thumbnail…

Fork of Force-Directed Graph V9 11

A force-directed graph visualizes system interfaces between applications, with nodes representing software and links showing data connections based on two CSV files. The graph uses `d3.forceSimulation` with forces for charge, link distance, center positioning, and collision avoidance, while `d3.drag` enables interactive node movement. Each circle and text label updates position during simulation ticks, and grey lines connect related applications. The implementation reads node and link data from CSV files, then renders the network using SVG elements with D3 v7.

Loading thumbnail…

Fork of Force-Directed Graph V9 abd

This interactive force-directed graph visualizes the integration relationships between a medical institution's software applications. Nodes represent systems like NAV, Ines, and Labor7, while edges show data exchanges (e.g., patient cases, financials). The layout is computed via d3.forceSimulation with forces like d3.forceManyBody, d3.forceLink, d3.forceCenter, and d3.forceCollide. Users can drag nodes, and the visualization is rendered as an SVG with circles and labels, based on two CSV files (applications.csv and interf.csv).

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

A horizontal bar chart displays population totals for ten countries, with bars ranked from China to Mexico. The visualization uses D3 v7 to load CSV data, scale linear and band scales, and render axes via `axisLeft` and `axisBottom`. SVG rectangles are appended and sized with `scaleLinear` and `scaleBand`, while margins and transforms position the chart within an SVG canvas.

Loading thumbnail…

morocco map

This choropleth map of Morocco displays its administrative regions, with hover effects that turn each region green. The visualization loads geographic data from a GeoJSON file containing regional boundaries and attributes. Using D3.js v5, the code applies a Mercator projection via `geoMercator` and draws the regions with `geoPath`. Region names are placed at each polygon's centroid. The map renders as SVG, with red fill colors for regions, black strokes, and interactive hover styling managed through CSS.

Loading thumbnail…

Fork of Fork of India Map

This visualization shows a choropleth map of India with each state filled by a distinct color from a categorical scale, plus state names overlaid at their geographic centroids. The map uses a Mercator projection positioned with specific translation and scale values, and the code loads India’s state boundaries as TopoJSON from a raw GitHub repository. Using d3.geoPath and d3.geoMercator, it renders the shapes as SVG paths, while d3.scaleOrdinal with schemeCategory10 assigns fill colors, and text elements are placed using pathGenerator.centroid. The topojson library converts the TopoJSON data into GeoJSON features.

Loading thumbnail…

CHART 2

This chart displays the ten most populous countries as horizontal bars. The population values are formatted in billions, while country names appear on the left for reference. The visualization is built using React and D3.js, with SVG shapes for the bars and axes. The data comes from the United Nations World Population Prospects 2019, processed with D3's `csv` loader. Axes are constructed using D3's `scaleBand` and `scaleLinear` methods, with interactivity provided through native SVG `<title>` tooltips.

Loading thumbnail…

Fork of Customizing Axes final (chart2)

This bar chart displays the population of the top 10 most populous countries in 2018, based on United Nations estimates. The visualization customizes D3 axes, using a linear scale for population and a band scale for country names, with formatted tick labels that convert values to billions. The chart includes a titled axis label, removes default axis domains and lines, and styles text, ticks, and rectangles via CSS. The code employs d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG.

Loading thumbnail…

Circles on a Map

This example uses a natural Earth projection to visualize population by country with scaled circles. The area of each circle corresponds to the country’s 2018 population, rendered as SVG paths and circles via `d3.geoPath` and `d3.geoNaturalEarth1`. Users can pan and zoom with `d3.zoom`, hover for country details, and read a square-root size legend built from `d3.scaleSqrt`. Data combines UN population CSV values with TopoJSON world geometry through `d3.csv` and `d3.json`.

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economy using a spectral ordinal scale, and includes an interactive color legend with circles and labels. The visualization renders world geography via a natural Earth projection and supports zooming and panning through d3.zoom. Data comes from the World Atlas TopoJSON and TSV files, processed with topojson.feature. The code imports individual D3 v5 modules including geoPath, geoNaturalEarth1, and scaleOrdinal, and builds the legend with a custom colorLegend function.

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. The D3.js v5 code uses `d3.tree()` and `d3.hierarchy()` to lay out the data, with `d3.linkHorizontal()` generating the curved connecting paths. Node labels appear as text elements with sizes that decrease with depth, while a `d3.zoom()` handler enables pan and zoom interactions on the SVG. The visualization is based on a static JSON dataset containing the country groupings.

Loading thumbnail…

World Countries Tree

This interactive visualization displays a hierarchical tree of world countries, organized by continent and subregion, with labels sized by depth. The hierarchical data comes from a JSON file, and the layout is computed using D3’s `tree` and `hierarchy` functions. Links are drawn as horizontal curves via `linkHorizontal`, while text nodes are placed according to the tree’s coordinates. The SVG rendering uses D3 v5, with styles defined in CSS.

Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a branching tree diagram. Using the D3.js library (v5), the code loads data from a JSON file and renders it as an interactive SVG graphic, with zoom functionality enabled via the `zoom` API. Hierarchical links are drawn using `linkHorizontal` path generators, and text labels display each country's name with font sizing adjusted by tree depth, creating a clear overview of global geographic relationships.

Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a branching tree diagram. Using the D3.js library (v5), the code loads data from a JSON file and renders it as an interactive SVG graphic, with zoom functionality enabled via the `zoom` API. Hierarchical links are drawn using `linkHorizontal` path generators, and text labels display each country's name with font sizing adjusted by tree depth, creating a clear overview of global geographic relationships.

Loading thumbnail…

Fork of Making a bar chart (customized axes)

This bar chart visualizes the population of the top 10 most populous countries using data from the 2018 United Nations World Population Prospects, with values scaled by a thousand. It demonstrates customizing D3 axes by removing default domain lines, using a custom tick formatter that converts numbers to billion units, and applying styled horizontal grid lines. The visualization is rendered as an SVG using D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with data loaded from a CSV file.

Loading thumbnail…

Making a bar chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with d3.axisBottom and d3.axisLeft for customized tick formatting and styling. The data is loaded from a CSV file using d3.csv, and the chart is rendered as SVG with bars colored steelblue, including a title and axis label.

Loading thumbnail…

Fork of Making a bar chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart orders countries vertically by name and encodes population as horizontal bar lengths, with a formatted x-axis labeled "Population" and a title at the top. Built with D3 v5, the code uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for axes, while rendering all elements as SVG. Data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures.

Loading thumbnail…

Fork of Fork of Circles on a Map

This visualization displays global population by country with proportional circles, where circle area corresponds to 2018 population data from a CSV file merged with TopoJSON world map geometry. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, with d3.zoom enabling pan and zoom interaction. Color and size legends built with custom d3 functions show population magnitudes, while hover tooltips reveal country names and exact values. The SVG rendering applies a natural earth projection with semi-transparent teal circles overlaying gray country boundaries.

Loading thumbnail…

Fork of World Countries Tree

This visualization shows the hierarchical organization of world countries, grouped first by continent and then by subregion, using a horizontal tree layout. The code employs D3 v5’s `tree()` and `hierarchy()` functions to compute node positions, then renders the connecting links with `linkHorizontal()` as SVG paths. The data is loaded asynchronously from a local JSON file via `d3.json`. The resulting chart displays countries as leaf nodes without labels, emphasizing the structural branching pattern of the geographic taxonomy.

Loading thumbnail…

Fork of World Countries Tree

This D3.js v5 visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a horizontal icicle layout. The chart shows the geographic grouping of nations from a JSON data source, with each node labeled by country name and positioned by depth. The code leverages D3's `tree`, `hierarchy`, and `linkHorizontal` functions to compute the layout and draw connecting paths. Interactive pan and zoom are enabled through D3's `zoom` event, while text styling uses the Playfair Display font.

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using a left-to-right dendrogram layout. The SVG rendering uses D3 v5’s `tree` and `hierarchy` functions to compute node positions, while `linkHorizontal` generates curved paths for parent-child connections. Country names appear as text labels with font sizes scaled inversely by depth. The data comes from a static `data.json` file, and the example is a fork that modifies layout and styling.

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries, organized by continent and subregion, with each country displayed as a text label. The tree layout from D3 v5 arranges nodes vertically, and a zoom behavior allows users to pan and scale the SVG view. The code uses `d3.hierarchy`, `tree().size()`, `linkHorizontal()`, and `d3.zoom()`, while the data comes from a local `data.json` file with a nested structure. Label font size decreases with depth, and curved links are drawn between parent and child nodes.

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, including two eyes, movable eyebrows, and an arc-based mouth. The face is centered within an 960×500 SVG canvas, with all elements grouped and positioned using D3’s `select`, `append`, and `attr` methods. The code uses D3’s `arc` generator to draw the mouth and manually sets coordinates for circles and rectangles to form the eyes and eyebrows. Static SVG rendering emphasizes programmatic shape creation rather than data binding or interaction.

Loading thumbnail…

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

A static smiley face rendered as SVG via D3.js uses a yellow circle for the head, two circles for eyes, rectangular eyebrows, and an arc-based path for the mouth. The drawing is centered using group transformations and absolute pixel coordinates from the viewport. The code directly manipulates the DOM with `select`, `append`, and `attr` calls from D3 v5, while the mouth’s shape is generated with the `arc` generator. No interactivity or animation is present, despite the title’s mention of moving eyebrows.

Loading thumbnail…

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

This fork of the “Let's make a face with D3.js!” tutorial demonstrates fundamental DOM manipulation by rendering a static yellow smiley face with eyes, eyebrows, and a curved mouth in an SVG canvas. The code uses D3 v5 selections, `append` and `attr`, along with the `arc` generator to shape the mouth path. All facial elements are positioned using translated coordinates and fixed numeric offsets. The example serves as a clear introduction to building SVG graphics programmatically with D3's declarative approach.

Loading thumbnail…

let's make a face with D3.js

A single gray circle is drawn in the center of an SVG canvas, positioned by appending a `circle` element with `d3.select` and setting its radius via `.attr('r', 200)`. The example demonstrates basic SVG shape creation using D3 v7, with the `index.html` loading the library from a CDN and applying a stylesheet that defines a black stroke and purple path styling. No data or interactivity is present; the visualization simply shows the minimal code needed to render a static geometric form.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes by selecting any two columns for the X and Y axes through drop-down menus. The scatter plot is built with D3 v5, using scaleLinear for axes and axisBottom/axisLeft for ticks. Circles are animated into place with a transition.delay effect. The dropdownMenu module creates the HTML select elements, and the chart updates its axes and labels when new mappings are selected.

Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population by country using proportional circles overlaid on a natural Earth projection map. Circle area corresponds to each country’s 2018 population, with missing data marked in red. Users can pan and zoom via d3.zoom, while hovering reveals country names and population counts. Built with D3 v5, it uses d3.geoPath, d3.geoCentroid, and d3.scaleSqrt to position and size circles, sourced from a CSV of UN population data and TopoJSON world boundaries.

Loading thumbnail…

Shapes ad Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS classes and inline attributes. It shows how fill colors, stroke widths, and stroke-linejoin properties affect rendering, with groups applying transforms like scaling and translation. The code uses raw SVG elements within an HTML page, alongside a linked stylesheet that sets stroke styling for grouped line elements. No external libraries are involved, and the rendering relies purely on native SVG support in the browser.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a blank SVG canvas paired with CSS styling for typography in monospace. The index.html includes an empty `<svg>` element, while styles.css sets the body font size and family, and defines a `.highlighted` class that colors text red. The visualization relies on raw SVG (via the native `svg` element) and CSS for styling, with no JavaScript libraries or data sources currently active. It showcases how simple shapes or markup could be added and styled through linked stylesheets, though no actual shapes are yet drawn in the provided code.

Loading thumbnail…

HTML cars report

This example presents a simple, static car inventory report titled “Cars report,” listing three used vehicles with their model year, make, and price. The page uses plain HTML with a heading and an unordered list, styled with inline font-size and a 24pt body font. No external libraries or JavaScript APIs are involved; the content is fully hardcoded in the markup. The data visualization is limited to text-based list presentation, with no charts, interactivity, or dynamic rendering.

Loading thumbnail…

Fork of HTML cars report

This example presents a basic HTML page titled "Fork of HTML cars report," which currently displays only a static "Hello" heading. The visualization itself is not implemented; the code contains no data, charts, or interactive elements. It relies solely on standard HTML structure without any JavaScript libraries, APIs, or rendering techniques such as D3, Canvas, or Three.js. The source of the data or any visual approach is absent, making this a placeholder for a future report rather than a functional data visualization.

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript module pipeline that fetches car data and displays a filtered text report. It shows a list of vehicles priced under $2,000, formatted with year, make, model, and price. The code uses `getCars()` with a `Promise` and simulated delay to return `JSON.parse` data, then applies `generateReport()` with `filter()` and `map()` to format entries via `formatCar`. Results appear in an HTML `<pre>` element, with `Loading...` shown initially until the asynchronous data arrives.

Loading thumbnail…

Shapes with SVG and CSS !!

This example demonstrates basic SVG shapes—circle, rectangle, line, and path—arranged in a 960-by-500 canvas with inline fill, stroke, and transform attributes. A CSS rule defines the `.lines` class for stroke styling, though the SVG elements rely on presentation attributes rather than those classes. The markup uses raw SVG elements (`<circle>`, `<rect>`, `<g>`, `<line>`, `<path>`) with explicit coordinates and colors, including a group translated along the y-axis and a path with a non-filled stroke. No external JavaScript or data source is involved; rendering occurs entirely through the browser’s SVG engine.

Loading thumbnail…

Fork of Shapes ad Colors with SVG and CSS 2

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a group and scaled up for display. It demonstrates how CSS classes control stroke properties while inline attributes set fill colors, including hex values and named colors. The SVG markup uses transform groups to translate and scale elements, and the CSS defines stroke styles for the line and path elements with rounded joins and caps. Rendering relies on native SVG within an HTML page, with no external JavaScript libraries.