Skip to main content
Log in
M

MohamedZaki

@MohamedZaki·29 public vizzes

Loading thumbnail…

Small multiples

Small multiples compare financial characteristics across four bank clusters using horizontal bar charts. Each cluster receives its own panel, with bars colored on a blue sequential scale encoding the proportion value, ranging from zero to 85 percent. The visualization loads tab-separated data via `d3.tsv`, nests the data by group using `d3.nest`, and renders each small multiple as an SVG element. A `d3.tip` tooltip reveals exact values on hover, while the y-axis is hidden to emphasize relative comparisons between clusters.

Jan 12, 2017
Loading thumbnail…

Parallel Coordinates Final

This interactive parallel coordinates chart displays bank data clustered by financial indicators such as total deposits, credit, and assets, with each cluster distinguished by color. The visualization uses D3 v3 with SVG paths for the background and foreground lines, and ordinal color scaling for cluster grouping. Users can drag axes to reorder dimensions or brush along a single axis to filter which data lines remain visible. The implementation relies on `d3.svg.axis`, `d3.behavior.drag`, and `d3.svg.brush` to manage the interactions.

Jan 11, 2017
Loading thumbnail…

Radar chart

A radar chart displays multivariate data as a polygonal series overlaid on concentric circular gridlines and radiating axes. Multiple data series appear as distinct filled polygons, with hover interactions that dim other areas to highlight the selected series. The visualization is built with D3 v3, rendering SVG elements like lines, polygons, and text. Axis labels and grid values are positioned using trigonometric calculations, while the data is sourced from the gist’s embedded dataset and animated transitions respond to mouse events.

Jan 11, 2017
Loading thumbnail…

Radar chart

This example shows a radar chart with multiple overlaid polygon series, each representing a set of values across several axes. Circular grid lines and labeled axes display the scale, with value markers at each level. The code uses D3 v3 to build the visualization in SVG, computing polygon coordinates from the data and drawing them with `d3.select` and appended elements. Hovering transitions fill opacity, and the `d3.format` API formats the axis labels.

Jan 10, 2017
Loading thumbnail…

Radar chart

This radar chart visualizes cluster data from a CSV file, comparing multiple financial metrics across five clusters. Each cluster is represented as a filled polygon overlaid on a web of axes, with angular rings showing value levels. The chart uses D3.js v3 with SVG rendering and hover interactions that highlight a selected cluster by reducing the opacity of others. Axes and labels are drawn from the dataset columns, and the polygons are built using D3’s data join and `transition` for smooth opacity changes.

Jan 10, 2017
Loading thumbnail…

correlation matrix Final

This scatterplot matrix uses the iris dataset to show correlations between four flower measurements. Each cell displays a scatterplot of one trait against another, with points colored by species, and the diagonal cells display trait names. Brushing a rectangular region across any plot highlights matching points across all other plots, while a gray "hidden" class dims non-selected circles. Built with D3 v3, it uses SVG axes, linear scales, and `d3.svg.brush` for interactive filtering, with data loaded from a CSV file.

Jan 9, 2017
Loading thumbnail…

Test

This example visualizes the classic Iris flower dataset, plotting sepal length and width measurements as colored circles on an SVG canvas. Each circle represents a single flower sample, with distinct colors corresponding to the three species: setosa, versicolor, and virginica. The visualization uses D3 v3 to load the CSV data with `d3.csv`, and it includes interactive mouseover events that change a circle’s fill color and display a temporary tooltip showing the species name. However, the primary chart axes and scales defined at the top are not actually connected to the plotted data, leaving the visualization as a raw, unlabeled scatterplot.

Jan 9, 2017
Loading thumbnail…

Test

A scatterplot maps the classic Iris flower dataset, plotting sepal length against sepal width for 150 samples. Each circle represents one flower, with color encoding the species: light green for setosa, light blue for versicolor, and yellow for virginica. A separately drawn green dot demonstrates interactive behavior. Built with D3 v3 and SVG, the visualization draws raw axes using simple lines and renders static circles. Hovering over any point temporarily turns it red and displays a tooltip labeling the species, using D3's `on` event handlers and SVG text elements.

Jan 8, 2017
Loading thumbnail…

PCA Projection plot

A PCA projection plot maps cereal brands onto two principal components, with each dot representing a cereal and its position determined by the eigenvalue projection. The visualization uses a custom x-scale ranging from 1 to -1 and a y-scale from -1 to 1, centered axes with gridlines, and an SVG container of 900 by 700 pixels. Built with D3 v3, the code defines linear scales and axes via `d3.scale.linear` and `d3.svg.axis`, though the cereal dataset is present but not dynamically loaded in the visible script.

Jan 8, 2017
Loading thumbnail…

PCA Projection

A PCA projection scatter plot maps cereal data onto two principal component axes. The visualization uses D3 v3's `d3.svg.axis` for the coordinate system and `d3.scale.linear` to map the domain `[1, -1]` to the plot area. Points are positioned on a 900x700 SVG canvas with axes crossing at the center. The code includes data loading from `cereal.csv` and circle elements for each cereal, though the dot placement logic is commented out, leaving only the axis framework rendered.

Jan 8, 2017
Loading thumbnail…

PCA Projection

A PCA projection scatter plot maps cereal data onto two principal component axes. The visualization uses D3 v3's `d3.svg.axis` for the coordinate system and `d3.scale.linear` to map the domain `[1, -1]` to the plot area. Points are positioned on a 900x700 SVG canvas with axes crossing at the center. The code includes data loading from `cereal.csv` and circle elements for each cereal, though the dot placement logic is commented out, leaving only the axis framework rendered.

Jan 8, 2017
Loading thumbnail…

PCA Projection

A scatterplot of cereal brands projects each product as a point on a two-dimensional plane, effectively visualizing their distribution across a linear map where the axes range from -1 to 1. The visualization displays the dataset from a CSV file, with each dot representing a cereal entry. Using the D3.js v3 library, the code creates an SVG container and employs `d3.scale.linear` to map data values to screen coordinates. The axes are rendered with `d3.svg.axis`, featuring tick lines extended across the plot to create a grid, and the graph is framed with a fixed width and height.

Jan 8, 2017
Loading thumbnail…

Parallel Coordinates

This parallel coordinates plot visualizes the relationships among multiple numeric attributes of classic cars, using the cars.csv dataset. Each car is drawn as a polyline across seven vertical axes representing attributes like fuel economy, cylinders, and power. The visualization uses d3.v3 with SVG rendering, and users can drag axes to reorder dimensions or brush over axis ranges to filter which car polylines remain highlighted. The background lines are rendered in gray with a foreground layer in steelblue.

Jan 8, 2017
Loading thumbnail…

Dsnap - Charts

This example presents a horizontal bar chart comparing 12 financial metrics, including total deposits, equity, and various credit categories, with values expressed in millions of euros. The visualization renders as an SVG with animated bars that grow in width over one second, using a quantized color scale to differentiate each category. The grid and axes are built with d3.svg.axis and linear scales, while the bar animation leverages D3’s transition API to smoothly update rectangle widths. Data is hardcoded in the script, and the chart is generated entirely with D3 v3.

Jan 8, 2017
Loading thumbnail…

Simple Vertical Bar Chart

This example presents a simple vertical bar chart that displays six financial metrics, such as total deposits and credit ratios, as orange bars with hover effects that darken the bars. The data is loaded from a tab-separated values file (data.tsv) containing label–value pairs. The visualization uses D3.js v3 with an ordinal x-scale and a linear y-scale formatted as percentages, alongside the d3-tip library to show tooltips with each bar’s exact value on mouseover. Axes are rendered via d3.svg.axis.

Jan 8, 2017
Loading thumbnail…

Simple Vertical Bar Chart

A simple vertical bar chart displays six financial ratios from a tab-separated data file, with values encoded as bar heights and labeled along both axes. The SVG rendering uses d3.v3 with ordinal and linear scales, d3.svg.axis for ticks, and d3-tip for hover tooltips showing each metric’s exact value. Bars fill orange, darkening to orangered on mouseover. The y-axis labels are formatted as percentages via d3.format, while rotated vertical text and margin-based layout structure the presentation.

Jan 5, 2017
Loading thumbnail…

Radar chart

A radar chart displays multiple series of data as colored polygons overlaid on a circular grid of axes, with each axis representing a category. Values are scaled relative to the dataset’s maximum, and percentage labels mark the grid levels. The code uses D3 v3 to build the SVG, calculating polygon points from trigonometric functions and animating fill opacity on mouseover. Grid lines, axis labels, and legends are drawn with `d3.select` and `append`, while color is assigned via `d3.scale.category10()`.

Jan 5, 2017
Loading thumbnail…

Radar chart

A radar chart compares multiple quantitative variables on axes radiating from a common center. The code uses D3 v3 with SVG rendering and animation to plot one or more data series as filled polygons, with hover states that adjust fill opacity. Axis labels and percentage level markers are drawn using D3’s selection and append methods, while `d3.scale.category10` handles color encoding. The dataset is supplied inline, and the chart is rebuilt dynamically through a custom `RadarChart.draw` function.

Jan 2, 2017
Loading thumbnail…

correlation matrix

This example uses the classic Iris flower dataset to create a correlation matrix, plotting every pair of measurements (sepal length, sepal width, petal length, petal width) in a scatterplot grid. Each cell shows the relationship between two traits, with points colored by species, and a d3.svg.brush allows brushing on any cell to highlight matching points across the entire matrix. The visualization is built with d3.v3, using d3.scale.linear for axes, d3.svg.axis for ticks, and d3.scale.category10 for colors, all rendered as SVG circles and rectangles from data in a CSV file.

Dec 29, 2016
Loading thumbnail…

ScatterPlot Forked

This scatterplot visualizes the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer. Built with D3.js v3, it renders the chart as an SVG with axis labels, a legend, and interactive tooltips that display the cereal name and coordinates on hover. The code uses D3 scales, axes, and transitions, reading data from a local CSV file to map the quantitative variables.

Dec 29, 2016
Loading thumbnail…

ScatterPlot

This scatterplot visualizes the relationship between calories and protein content for 77 breakfast cereals from the `cereal.csv` dataset. Each dot represents a cereal, positioned by its calorie and protein values, with its name and exact coordinates shown in an interactive tooltip on mouseover. Built with d3.v4, the visualization uses `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles for the data points. The tooltip is implemented with a D3 transition that fades the element in and out.

Dec 27, 2016
Loading thumbnail…

Grippe en France 2014

This visualization shows the spread of influenza across French regions for the year 2014, using a choropleth map where each region's color intensity corresponds to the weekly reported case count. A slider at the top allows the user to step through each week of the year, updating the map’s fill colors and displaying the specific week’s date. The map is rendered using D3.js (v3) with a conic conformal projection, and the color scale is defined by `d3.scale.quantize()`. The code loads geographic and CSV data asynchronously via the `queue()` and `defer` methods.

Dec 9, 2016
Loading thumbnail…

Fr-GRP

A choropleth map of France shows the cumulative number of influenza cases per region for the 2014 season, with color intensity encoding the total annual count from the CSV dataset. The visualization uses d3.geo.conicConformal projection with d3.geo.path to render regional boundaries from a GeoJSON file, while a d3.scale.quantize color scale maps the summed values to a sequential yellow-to-red palette. The code loads both the region geometries and the CSV data, though the mapping between them appears incomplete.

Dec 7, 2016
Loading thumbnail…

Grippe en France With Slider modified

A choropleth map of French regions visualizes the total reported influenza cases across five weeks in late 2014 (November 2–30). A range slider updates the map, and hovering over a region triggers a tooltip showing the region’s name and its summed case value. The visualization uses the d3.v3 library with the `d3.geo` path projection and a quantize color scale to encode the values. Data comes from the provided `grippe.csv` and region geometries from `regions.json`.

Dec 7, 2016
Loading thumbnail…

Grippe en France With Slider

A choropleth map of French regions shows the evolution of flu-like illness cases over time, with a slider to select a week. The map uses a red color scale to indicate case counts, and hovering over a region displays its name and value in a tooltip. The visualization is built with D3 v3, using `d3.geo.conicConformal()` for projection, `d3.geo.path()` for rendering, and `d3.scale.quantize()` for color mapping, with data loaded from a CSV file.

Dec 1, 2016
Loading thumbnail…

Slider grippe en France Modified

A choropleth map of French regions visualizes weekly influenza case counts from a CSV file, with region colors encoded via a quantized color scale. A slider control updates the displayed week, while hovering reveals the region name and aggregated case value in a tooltip. The visualization uses d3.v3 for map projection, SVG path rendering, and data binding, with JSON geographic data providing region boundaries. The code also calculates global minimum and maximum values from the dataset to define the color domain.

Dec 1, 2016
Loading thumbnail…

Grippe en France

This map of mainland France displays weekly regional influenza case counts for 2014, with each region’s color encoding the five-week total centered on late November. Users hover over a region to see its name and aggregated value in a tooltip. The visualization uses D3 v3 with a conicConformal projection and `d3.geo.path` to draw the GeoJSON regions, while a quantize scale maps the summed data from the `grippe.csv` file to a sequential color ramp. Missing regions render in gray.

Nov 30, 2016
Loading thumbnail…

Gist 84ef6eb7d19cde664dfb4f461ddce3d3

A choropleth map of French regions colors each region by the sum of influenza case counts across five dates in late 2014, sourced from the `grippe.csv` file. The map uses `d3.geo.conicConformal` projection and `d3.geo.path` to render the GeoJSON regions, while `d3.scale.quantize` assigns a green color scale. Data values are injected into the GeoJSON features by matching region names, then applied as fill colors.

Nov 24, 2016
Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart that plots monthly values from a JSON dataset, with circular markers at each data point along the path. The chart uses an ordinal x-scale and a linear y-scale to position the points, while a monospace font labels each month below the axis. Hovering over a circle triggers a mouseover event that turns the point red, draws a dashed vertical guide line, and reveals the numeric value as a green tooltip; moving the mouse away removes these temporary elements. The visualization is built with D3 v3, rendering SVG elements like paths, circles, and text, and loads its data from a local `dataset.json` file.

Nov 17, 2016