Fahad Bin Emran

@ayonfahad·12 public vizzes

Bowl of Fruit - General update pattern

Five pieces of fruit sit in a bowl, with apples being eaten and replaced by lemons over time. Using D3.js v5, the example demonstrates the general update pattern: `data` joins, `enter`, `merge`, and `exit` selections manage DOM elements as the fruit array changes. `scaleOrdinal` maps fruit types to circle radii and colors, while SVG `g` groups and `rect` shapes render the bowl and fruits.

May 9, 2023

Loading thumbnail…

World Population Area Chart

This area chart displays world population from 1960 to 2015, using a smooth curve to show growth over time. The visualization uses D3 v7’s `area`, `curveBasis`, `scaleTime`, and `scaleLinear` to generate the chart’s filled path and axes, with tick labels formatted to abbreviate large numbers. The SVG is rendered at 960 by 500 pixels, and the data comes from a CSV file loaded via `d3.csv`. Grid lines and axis labels provide context, while the chart’s title and maroon fill emphasize the population trend.

May 4, 2023

Loading thumbnail…

Fork of Fork of Temperature in San Fransisco area

This visualization charts temperature over time for a week in San Francisco, using an area graph filled in maroon against a plain coordinate grid. The chart displays time on the x-axis and temperature on the y-axis, with labeled axes and a title. Built with D3 v7, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render the smooth area. The data is loaded from a remote CSV file featuring temperature and timestamp columns.

May 4, 2023

Loading thumbnail…

Fork of Temperature in San Fransisco Linechart

This chart shows a week of temperature readings in San Francisco over time, with a smooth curved line connecting the data points. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for the axes and `line` with `curveBasis` for the smooth path. Data is loaded as CSV from a remote source, and the chart includes labeled axes and a title. The code uses `axisBottom` and `axisLeft` for ticks, and custom styling is applied via CSS.

May 4, 2023

Loading thumbnail…

Temperature in San Fransisco scattarplot

This scatterplot displays a week of temperature readings in San Francisco, with time on the horizontal axis and temperature on the vertical axis. Each circle represents an individual observation, colored steelblue. The visualization uses D3 v7 to parse CSV data, scale time and linear scales, and render axes with grid lines via SVG. Axis labels and a title are added manually. The data is loaded from a remote CSV file hosted on VizHub.

May 4, 2023

Loading thumbnail…

Cars Scatterplot

This scatterplot shows the relationship between horsepower and weight for a collection of cars, with a title and labeled axes. The visualization encodes each car as a semi-transparent red circle using SVG, with scales derived from the data’s extent. The code uses D3 v7 APIs including `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data from a remote CSV, map values to pixel coordinates, and render grid lines and axis labels.

May 4, 2023

Loading thumbnail…

Scatter plot

This scatter plot displays the populations of the top 10 most populous countries, with each circle positioned along a linear x-scale for population and a point y-scale for country names. The visualization uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render an SVG chart with gridlines and formatted tick labels (e.g., "1.42B"). Data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures.

May 3, 2023

Loading thumbnail…

Customizing Axes

This example visualizes the ten most populous countries using a horizontal bar chart, ordered by population. The chart customizes both axes: the y-axis displays country names, while the x-axis formats population values in billions using `d3.format` and a custom tick function. The visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes, with grid lines and styled tick marks.

May 3, 2023

Loading thumbnail…

Fork of Making A Bar Chart

This example displays a horizontal bar chart of population figures for the ten most populous countries, with each bar’s length proportional to its population value. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map the data, and renders the chart as SVG elements created with `selectAll` and `enter()`. Population values are loaded from a CSV file and multiplied by 1000, with axes generated using `axisLeft` and `axisBottom`.

May 2, 2023

Loading thumbnail…

Fork of Making A Bar Chart

This example shows a minimal bar chart of country populations, with the data loaded from a CSV file and rendered as SVG rectangles styled in steelblue. The visualization is built using D3 v7, where the code selects the SVG element, extracts its width and height attributes, and uses the `csv` function to load the data. The chart currently only logs the loaded data to the console; the bars themselves are not yet drawn, as the script stops after the data is fetched. The page includes an ES6 module example in `myMessage.js`.

Apr 27, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates DOM manipulation with D3.js by rendering a smiley face in an SVG canvas on a red background. The code uses D3 v5’s `d3.select` to target the SVG element and apply styling, while the eyebrows move via animated transitions triggered through the bundled JavaScript. Although the index.js file only applies a background color, the associated README and video show the full interactive face, which updates facial features using D3’s data-binding and attribute methods. Rendering is entirely SVG-based, with no external data sources beyond the D3 library loaded from unpkg.

Apr 27, 2023

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based report of used cars by filtering a dataset and formatting each entry. The page displays a single car make, "Chevrolet," extracted from a local JavaScript array of car objects. The code uses `JSON.parse` to load the car data, `Array.prototype.filter` to select cars under a price threshold, and a custom `formatCar` function to produce readable strings. The results are rendered into an HTML `<pre>` element with a large font size, while styling is handled through plain CSS.

Apr 26, 2023