Mohamed Nehad Shalabi

@mohamednehad450·6 public vizzes

Netherlands weather graph

This visualization displays temperature trends in the Netherlands over a week, with two overlaid line charts showing actual and perceived temperatures across time. The line paths use smooth curve interpolation through d3’s `line` with `curveNatural`, while the axes employ custom React components. The chart is rendered as an SVG using React, with scales set by `d3.scaleTime` for the x-axis and `d3.scaleLinear` for temperature ranges. Data is preprocessed from hourly weather records, extracting time, actual Celsius temperature, and feels-like values for each point.

Apr 22, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This chart visualizes temperature fluctuations over a week in San Francisco, combining a stylized line graph with a translucent shaded area beneath the curve for emphasis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, while `area()` and `line()` from D3, paired with `curveNatural`, create the smooth path. The SVG rendering is populated from CSV data fetched via `csv` from a Gist.

Apr 9, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This line chart shows hourly temperature readings from the Data Canvas Sense Your City dataset, visualized as a smooth, stylized curve with a teal stroke. The React-based visualization renders SVG elements using D3 v5 scales, including scaleTime and scaleLinear, while the line path is generated with d3.line and curveNatural. Axes are drawn via custom AxisBottom and AxisLeft React components, with tick lines colored gray and gridlines reinforced through CSS. The chart displays temperature over time, using d3.extent to set the domain and d3.csv for data loading.

Apr 9, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as a stylized bar chart. The chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the population values, rendered as SVG rectangles with tooltips. The React-based code leverages the `useData` hook to load and transform CSV data, while custom axis components format the y-axis labels using `d3.format` to abbreviate billions. The visualization applies a custom CSS style with vertical text labels and a teal color scheme for the bars.

Mar 21, 2021

Loading thumbnail…

Trying Vega-Lite-API

This visualization is a bar chart that displays task scheduling data, showing each task's start and end times along the y-axis. The bars are colored by tag category, with a tooltip providing the task name. It is built using the vega-lite-api library, which programmatically constructs Vega-Lite specifications, and renders the chart with Vega and D3. The data originates from a custom dataset of todo items, processed in `getData.js` to calculate durations and completion status. The chart is displayed full-screen with a custom dark color scheme.

Mar 13, 2021

Loading thumbnail…

Smiley Face III Assignment

This example renders a large smiley face as an SVG using React components for the face, eyes, and pupils, with D3’s `arc` generator defining the cheek curves. The face is centered within a 960×500 canvas, featuring a green-tinted head, red and green pupils, and two rows of white rectangular teeth created with `rect` elements. All visual properties—such as eye radius, tooth dimensions, and stroke widths—are set as constants, and the layout relies on explicit `translate` transformations to position each part relative to the center. The code combines React’s declarative JSX with D3’s utility functions for shape generation.

Mar 8, 2021