Hadi Boukdir

@hadiBook·11 public vizzes

React Hooks Bowl of Fruit

Five apples rendered as red SVG circles sit in a row, with one selectable via click. React Hooks manage the fruit state and selected fruit ID, while d3 ordinal scales map fruit type to color and radius. The code uses React's `useState` hook, ReactDOM rendering, and d3's `scaleOrdinal` and `range` functions. The data is generated using `Math.random()` for fruit IDs, and clicking a circle triggers a stroke highlight, though no animation is implemented.

Jul 17, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from basic SVG shapes in D3 v5 demonstrates modular JavaScript composition. The code constructs circles, rectangles, and an arc-generated mouth using `d3.arc`, then positions them relative to a central group. Eyebrows animate downward and back via chained `transition().duration()` calls, simulating a blink-like motion. The face uses fixed dimensions from the SVG viewport, with all elements drawn programmatically from math constants rather than external data.

Jul 17, 2019

Loading thumbnail…

Cars Report

This example shows a text-based report of cars with prices under a given threshold, displayed as a formatted list in a web page. It demonstrates how JavaScript objects, arrays, and modules work together using ES6 imports and exports. The code parses an inline JSON data source, filters car entries by price, and formats each result like“2012 Nissan Leaf: £1800”. A Promise-based asynchronous function simulates a delayed data fetch, while the DOM is updated via `getElementById` and `textContent`, then the report is generated and rendered in a `<pre>` element.

Jul 17, 2019

Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature readings taken over a week in San Francisco, plotting time on the x-axis against temperature on the y-axis. The chart uses D3 v5 to render an SVG, with an area chart generated using `area` and `curveBasis` to create a smooth, filled contour beneath the line. The scales are defined with `scaleTime` and `scaleLinear`, and axes are added via `axisBottom` and `axisLeft`, with the data loaded from a CSV file using D3's `csv` function.

Jul 17, 2019

Loading thumbnail…

Temperature Line Chart

This line chart visualizes a week of temperature and time data in San Francisco, using an orange curve to highlight temperature fluctuations over time. The visualization is rendered with D3 v5 into an SVG canvas, leveraging d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for the smooth path, and d3.axisLeft/axisBottom for labeled ticks. Temperatures are loaded as CSV from a VizHub dataset, with timestamps parsed as dates and numeric temperature values, while styled axes, title, and gridlines come from custom CSS classes.

Jul 16, 2019

Loading thumbnail…

Temperature

A line chart tracks temperature over time for a week in San Francisco, with circular marks for each data point. The visualization uses D3.js v5 with time and linear scales, and renders grid lines via axis tick marks. Data is loaded from a CSV file from Vizhub’s dataset. SVG output is styled with custom CSS, including axis labels and a title.

Jul 16, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a dataset of cars, with each car represented as a semi-transparent orange circle. The visualization uses D3 v5 to load data from a CSV file and render SVG elements. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks with grid lines, and `extent` to set the domains. Axis labels and a title are added as SVG text elements with custom styling.

Jul 16, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays population figures for global regions, with each circle’s horizontal position encoding the population value and vertical position mapping to the region name. The chart uses D3 v5 APIs including `scaleLinear` for the x-axis, `scalePoint` for categorical y-axis placement, and `axisBottom`/`axisLeft` for grid lines. Data is loaded from a CSV file via `csv`, with population values multiplied by 1000. The visualization is rendered as SVG with light green circles, styled axes, and a title.

Jul 16, 2019

Loading thumbnail…

Cusomizing Axis

This example shows a horizontal bar chart of regional populations, with a customized axis that formats large numbers (e.g., converting billions to a compact "B" suffix) and removes default axis domain lines. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, along with the `format` API for tick labels. Data is loaded from a CSV via `d3.csv` and rendered as SVG rectangles. The chart also includes a titled label for the population axis and light-green bars.

Jul 16, 2019

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the goals scored by African football players, with player names on the y-axis and goal counts on the x-axis. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map data from `data.csv` to SVG rectangles, with `axisLeft` and `axisBottom` generating scales and tick marks. `<rect>` elements are bound to the data via a data join, while CSS styles the bars.

Jul 16, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to position and style basic SVG shapes—circles, rectangles, lines, and a path—using inline attributes and CSS classes. The code uses raw SVG elements within an HTML page, with a global stylesheet controlling the appearance of the line group and path, including stroke color and line join style. Shapes are grouped and transformed using SVG’s `translate` and `scale` attributes, showing how to compose complex scenes without external libraries. The example serves as a tutorial for manipulating SVG geometry and CSS styling directly.

Jul 15, 2019