Skip to main content
Log in
H

Haris Abdullah

@Harismehmoodulhaq·14 public vizzes

Loading thumbnail…

Week_Temperature_SF with Line

A line chart displays weekly temperature readings for San Francisco, plotting temperature against time. The visualization uses a smooth curved path generated with the `curveNatural` interpolation from D3's `line` function. The chart includes labeled axes for time and temperature, with data loaded from a CSV file using D3's `csv` utility. React components structure the SVG rendering, while D3 scales (`scaleLinear`) map the timestamp and temperature values to pixel coordinates, and custom axis components generate the tick marks.

Oct 4, 2021
Loading thumbnail…

Week_Temperature_SF with Line & doots

This visualization displays a week of temperature measurements in San Francisco as a smooth curve with individual data points, using a line chart with circular dots atop a natural curve interpolation. Temperature values are plotted against timestamps on the y- and x-axes, respectively, with axis labels and tick marks generated by custom React components. The code leverages d3.v5 utilities such as `scaleLinear`, `line`, `curveNatural`, `extent`, and `timeFormat` to compute scales and shapes. React renders SVG elements, while CSV data is loaded asynchronously via `useEffect` and d3’s `csv` parser. Tick marks, circles, and the path are styled with CSS, and native SVG `<title>` elements provide hover tooltips.

Oct 4, 2021
Loading thumbnail…

Working on Time

This interactive scatterplot visualizes San Francisco temperature readings over a week, with time on the horizontal axis and temperature on the vertical axis. React renders SVG circles positioned using d3.scaleLinear scales, while custom AxisBottom and AxisLeft components generate tick marks and labels with d3 time formatting. Data loads asynchronously via d3.csv from a GitHub gist, and hovering over a circle reveals its timestamp through an SVG title tooltip.

Oct 4, 2021
Loading thumbnail…

Sepal Length & Petal Width

This interactive scatter plot visualizes the relationship between sepal length and petal width in the Iris dataset. Each circle represents a flower sample, with its x-position mapped to sepal length and y-position mapped to petal width, using D3's `scaleLinear()` for axis scaling and `format()` for tick labels. The visualization, rendered as an SVG via React, includes axes with custom tick marks and a tooltip on each point, all styled with the Poppins font and a teal color scheme.

Oct 4, 2021
Loading thumbnail…

Petal Length & Width

A scatterplot of iris flower petal dimensions, plotting petal length on the horizontal axis and petal width on the vertical axis for each sample in the Iris dataset. The visualization uses React with D3 v5 utilities, including `scaleLinear` for both axes and `extent` to set domains from the CSV data loaded via `csv`. SVG circles render the points, with native `<title>` elements for hover tooltips. Axis components draw tick marks and labels, while styled text annotations label the axes. The chart is framed by margins, with a loading state shown until data arrives.

Oct 4, 2021
Loading thumbnail…

Sepal Length and Width

This visualization shows the relationship between sepal length and sepal width in the Iris flower dataset. It uses a simple scatter plot with circles representing individual data points, where each circle includes a native SVG `<title>` element for tooltips. The code imports CSS color data from a GitHub gist and renders the visualization using React with SVG, using D3 v5 utilities such as `scaleLinear`, `extent`, and `csv`. Axes are custom-built React components that map data values to pixel coordinates.

Oct 4, 2021
Loading thumbnail…

Petal Length & Sepal Width

This scatterplot visualizes the relationship between petal length and sepal width in the Iris dataset, with each circle representing a flower sample. The React-based visualization uses D3 utilities to load CSV data, compute linear scales, and generate SVG axes and marks. Circles are rendered with native SVG elements, and tooltips display formatted values via the `title` attribute. The chart applies `.nice()` to the x-scale, custom tick formatting, and labeled axes to clarify the data dimensions.

Oct 4, 2021
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays population estimates for 80 countries in 2020, ordered along a vertical band scale with horizontal bar lengths proportional to values. The visualization uses React components for rendering SVG marks and axes, with D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` for data loading. Each bar includes a native tooltip showing the country name and population formatted in billions. The clean design features a teal bar color, gray axis ticks, and the Poppins font, with population data sourced from a UN dataset hosted as a CSV.

Oct 4, 2021
Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of population data for 80 countries, rendered as SVG rectangles with axes, using React components for the marks and scales. The data is loaded as CSV via D3’s `csv` utility, with the x-axis scaled linearly by population and the y-axis as a band scale for country names. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` handle tick labels and bars, while `scaleBand` and `scaleLinear` from d3.v5 position the elements. The chart updates asynchronously once the dataset is fetched.

Oct 3, 2021
Loading thumbnail…

Axes width React & D3

This example displays a horizontal bar chart of the top 80 countries by 2020 population, drawn as SVG elements. It uses React hooks (`useState`, `useEffect`) to load and manage data from a CSV file via D3’s `csv`, while D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel coordinates. Axis ticks are rendered manually with D3’s tick generation, and each bar is a `<rect>` positioned by those scales. The layout includes explicit margins and uses D3’s `max` for domain calculation.

Sep 30, 2021
Loading thumbnail…

The Margin Convention

This example shows country populations from the United Nations 2019 dataset as a horizontal bar chart, displaying the top 80 entries. The rendering uses React with SVG elements, where each country’s bar length is scaled linearly by population. The code employs D3 utilities like `csv` for data loading, `scaleBand` for country positioning, and `scaleLinear` for population values, while respecting a standard margin convention to offset the chart within the SVG canvas.

Sep 28, 2021
Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays United Nations population estimates for 2020 as a horizontal bar chart, with each bar representing a country’s population. The chart is built using React for component rendering and D3 utilities for data loading and scaling, specifically `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear`. The code fetches CSV data from a GitHub gist URL, parses the population column, and renders SVG rectangles whose widths correspond to population values. The visualization updates reactively as data loads, showing a loading message until the dataset arrives.

Sep 28, 2021
Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a primitive bar chart with no axes or labels, using horizontal rectangles whose widths encode each country’s 2020 population. The chart focuses solely on raw bar lengths, omitting scales or ticks for a deliberately minimal aesthetic. Built with React (using `useState` and `useEffect`) and D3 v5, it loads CSV data from a GitHub Gist via `d3.csv`, transforms the population column to a number, and slices the first 10 rows. D3’s `scaleBand` positions the bars vertically, while `scaleLinear` maps population values to pixel widths, and React renders each bar as an SVG `<rect>`.

Sep 28, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow circle face with two white-and-black eye pairs, rendered as a static SVG. The SVG uses nested circles to create a stylized, incomplete smiley face, with the outer face and eye whites drawn in yellow and white, and the pupils in black. The code writes these shapes directly into the HTML document using inline SVG elements, with no libraries or data sources. The rendering is entirely declarative, relying on SVG circle coordinates and radii for placement.

Sep 18, 2021