Ahmed Mamdouh

@ahmed-com·3 public vizzes

Fork of Multiple Views with Brushing

This visualization combines a world bubble map with a date histogram, both rendered as SVGs in React. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to plot migrant deaths and disappearances, with circle sizes scaled by `d3.scaleSqrt`. The histogram bins reported dates into months using `d3.histogram` and `d3.timeMonths`, summing totals per bin. A `d3.brushX` on the histogram filters the map’s data through a shared brush extent, enabling interactive cross-filtering between views. Data comes from the Missing Migrants Project CSV.

Jun 22, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This line chart displays temperature over time for a week in San Francisco, using data from the Data Canvas Sense Your City dataset. The React component builds an SVG visualization with d3 scales and axes, rendering a smooth curve via d3.line with curveNatural. Axis components generate ticks and gridlines, while the marks path uses the d3 line generator to connect data points. The chart includes rotated y-axis and x-axis labels, with all styling applied through CSS classes.

Jun 22, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement versus horsepower, with a line mark summarizing the relationship. Tooltips display the vehicle name on hover. Built with the Vega-Lite API, it loads data from a CSV file using `d3.csv` and renders through Vega’s SVG backend. The visualization configures axis styles and disables the domain line for a cleaner look, while the chart size is set explicitly with `width`, `height`, and `autosize`. The code registers Vega-Lite with a Vega tooltip handler for interactive inspection.

Jun 21, 2021