zakaria badri

@Zakariabadri·10 public vizzes

Lesson 1

A grid of 24 cartoon faces rendered as SVG, each with randomized facial features, demonstrates a modular React component approach. The code combines D3's `arc` generator to build mouth paths and `range` for the repeating layout, while React component composition handles circles for the head, eyes, and mouth. The faces are generated with varying eye offset, eye radius, mouth width, and mouth radius, producing a playful, varied pattern within a fixed 116x116 pixel viewport.

Jun 10, 2021

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a zoomable world map with country outlines and hover highlighting, rendered as SVG. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to draw country shapes from the world-atlas TopoJSON dataset, with a sphere background. Interactive zoom is implemented via D3's `zoom` module, which applies a transform to the map group on zoom events. Country names are joined from TSV data, and hovering over a country fills it red via CSS `.country:hover`. The visualization is built with React and D3 v5.

Jul 9, 2020

Loading thumbnail…

Making World Map

This visualization displays a world map using a natural Earth projection, with countries rendered as light green polygons and the globe’s background as a light blue sphere. It loads GeoJSON from the VisionsCarto World Atlas, converts it into feature geometries with the `topojson` library, and projects each using `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output, built with React, appends paths for the sphere and each country, styling them via CSS classes.

Jun 16, 2020

Loading thumbnail…

Bowl of Fruit

This example animates a bowl of fruit as apples are eaten and one apple transforms into a lemon, with each fruit rendered as a colored circle and text label. Using React and D3 v5, it binds an array of fruit objects to SVG circles and texts, animating enter, update, and exit transitions with `transition().duration()`. The `scaleOrdinal` maps fruit types to colors and radii, while `setTimeout` schedules state changes that trigger re-renders through the `fruitBowl` function.

May 16, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Area chart

This example visualizes temperature readings in San Francisco over time using an area chart, with a purple filled curve and orange circles marking individual data points. The chart is rendered as an SVG using D3.js v5, parsing CSV data into timestamp and temperature values. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the smooth filled path, and `d3.axisLeft` and `d3.axisBottom` for grid lines and tick labels. The data is loaded from an external CSV file via `d3.csv`.

May 12, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays temperature readings over time in San Francisco, with each orange point representing a measurement and a purple basis curve connecting them. The visualization uses D3 v5's `scaleTime` and `scaleLinear` for the axes, while `axisBottom` and `axisLeft` render gridlines and tick labels. Data is loaded as CSV and rendered as SVG, with circles and a smoothed path drawn using `line` and `curveBasis`.

May 12, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and acceleration using the auto-mpg dataset, with each car represented as a red, semi-transparent circle. The chart uses a linear scale for both axes and includes labeled axes with formatted tick marks. Built with D3 v5, the code applies scaleLinear, axisBottom, and axisLeft functions within an SVG canvas, and loads data from a CSV file hosted on vizhub.com.

May 8, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the ten most populous countries, with countries on the y-axis and population on the x-axis. Using D3 v5, it employs `scaleLinear` and `scalePoint` to map the data, `axisBottom` and `axisLeft` for labeled axes, and SVG circles for points. The code loads data from a CSV file and formats x-axis tick labels from millions to billions using the `format` function.

May 7, 2020

Loading thumbnail…

Making chart

This example displays a horizontal bar chart ranking the top 10 most populous countries using data from a CSV file. It renders SVG bars with a linear population scale and a banded country scale, formatted with tick labels abbreviating billions. The code uses D3 v5 functions like `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, while removing default axis lines and adding custom text labels for the chart title and population axis.

May 7, 2020

Loading thumbnail…

HTML Starter

A yellow circle face with two eyes, eyebrows, and an arc-shaped mouth is drawn in SVG. The code uses D3 v5 selection and shape methods, including `select`, `append`, and the `arc` generator, to position elements relative to the SVG dimensions. Rendering happens in a React framework, with a static, centered composition.

Apr 24, 2020