Amr Eldemerdash

@aeldemerdash·7 public vizzes

Temperatue in San Francisco Line Chart

This visualization displays hourly temperature readings for San Francisco over a week, with a smooth line chart tracking the fluctuations across time. The SVG rendering uses D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for the smoothed path. Data is loaded from a CSV file via `csv`, with timestamps parsed as dates and temperatures converted to numbers before plotting.

Aug 15, 2020

Loading thumbnail…

Untitled

This example shows a small multiple chart with one line chart per data group, where each group represents a category from a CSV file and displays its numeric trend over time. The visualization is built with D3.js v4 and renders SVG graphics. The code uses `d3.nest()` to group data by category, `d3.line()` to draw each line, and `d3.axisBottom` and `d3.axisLeft` for axes. Colors are assigned via `d3.scaleOrdinal`, and each small chart is labeled with its group name.

Aug 14, 2020

Loading thumbnail…

Temperatue in San Francisco Scatter Plot

This scatter plot displays temperature readings from San Francisco over a week in March 2015, with time on the x-axis and temperature in degrees on the y-axis. The visualization uses D3 v5's `scaleTime` and `scaleLinear` for the axes, and renders data points as semi-transparent steelblue circles onto an SVG canvas. The code employs `axisBottom` and `axisLeft` to generate the axes, with labels and a title styled via CSS, and reads the data from a local CSV file.

Aug 14, 2020

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for over 100 car models, with each circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data from a CSV file onto an SVG canvas. Semi-transparent steelblue circles reveal density patterns, while labeled axes and a title clarify the comparison. The code parses numeric fields and renders the chart within a React starter template.

Aug 13, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, with each circle representing a nation’s population on a linear scale against country names on a categorical axis. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data, `axisBottom` and `axisLeft` for ticks and gridlines, and SVG circles for marks. Population values from data.csv are converted from strings to numbers and scaled to represent millions, with a formatted tick label replacing G with B for billions.

Aug 13, 2020

Loading thumbnail…

Making a Bar Chart

A horizontally oriented bar chart displays population figures for the ten most populated countries, using data loaded from a CSV file. The chart is rendered as SVG within a React application, employing D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. A custom tick format converts large numbers into abbreviated billions, while grid lines and axis labels enhance readability. The bars are populated via D3’s selection and data-binding methods.

Aug 10, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow face with black-outlined eyes, animated eyebrows, and a static arc-shaped mouth is rendered in an SVG. Using D3.js v5 and React, the code selects the SVG, calculates its dimensions, and appends a centered group for positioning. It draws circles for eyes and rectangles for eyebrows, then applies chained `transition().duration()` methods to animate the eyebrows up and down. The mouth is generated with D3’s `arc()` generator, while coordinates are computed via template literals.

Aug 9, 2020