F

Farhaan Qazi

@farhaanqazi·18 public vizzes

Loading thumbnail…

Fork of D3 Scatter Plot Matrix multiple colors

This fork of a D3 scatter plot matrix compares all numeric fields of the classic Iris dataset, using color to distinguish the three iris species. A 4×4 grid of small SVG plots shows every pairwise combination of sepal and petal measurements, with diagonal cells displaying the feature name. The code uses the d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, and d3.axisBottom APIs to load data, map values to positions and colors, and render axes. Data is loaded from a remote Gist, and each circle is drawn with a fill color from the d3.schemeSet1 palette at 0.7 opacity.

Loading thumbnail…

COVID DATA

This visualization presents COVID-19 data from the Our World in Data GitHub repository, showing total cases and deaths aggregated by country. The code uses d3.csv to load the dataset, d3.rollup to group and sum values by location, and d3.line with d3.scaleTime and d3.scaleLinear to plot a line chart. Although a chart-rendering function is defined, the visualization does not display the chart in the browser, as the SVG element is never appended to the page.

Loading thumbnail…

Fork of Fork of Coursework 1.js!

A static bar chart displays COVID-19 case counts for eleven countries, using green bars to encode the `covid_cases` value against a categorical country axis. The visualization is built with D3 v5, employing `scaleLinear` for the value axis and `scaleBand` for the categorical axis, with `axisLeft` and `axisBottom` to render the chart's axes. The data is loaded from a CSV file via `d3.csv`, and the bars are drawn as SVG `<rect>` elements. The chart's source code attempts to fetch a different remote dataset, but the final render uses the local `dataset.csv` file.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to traverse and render a hierarchical tree structure using D3.js’s `d3.hierarchy` API. It visualizes nested data objects as a series of stacked, blue-bordered `div` elements, where each level of nesting corresponds to a deeper layer of the tree. The code builds the hierarchy from a static raw JavaScript object, then uses `d3.select` and `.append()` to create the DOM nodes, with each element’s text set to the node’s name. The console logs the depth and name of each visited node, illustrating the traversal order.

Loading thumbnail…

Coursework 1.js!

This example displays a horizontal bar chart of COVID-19 case counts by country, using D3.js v5 to generate SVG rectangles. The code loads data from `dataset.csv`, scales case values linearly to bar widths with `d3.scaleLinear`, and maps country names to vertical positions using `d3.scaleBand`. The `select` and `csv` APIs from D3 handle DOM and CSV parsing. The visualization shows only rectangles without axes or labels, representing the ranking of cases from Afghanistan to Botswana.

Loading thumbnail…

hist

This visualization displays a horizontal histogram of COVID-19 case counts over time. Each bar’s length represents the cumulative number of cases for a given date, with bars arranged by value along the y-axis. The code uses d3.csv to load data, d3.scaleLinear for the x-axis width mapping, and d3.scaleBand for the y-axis categories. Rectangles are appended to an SVG and sized using the scales, with the data sourced from the provided CSV file. The chart is built with D3 v7.

Loading thumbnail…

hist

This histogram visualizes the distribution of daily COVID-19 case counts over time, with values ranging from 5 to over 50,000. The X-axis is fixed to a domain of 0–1000, showing only the lower range of the data. The visualization uses d3.histogram to bin the dates based on their associated value, then renders bars with SVG rectangles. The bars are colored teal and scaled using d3.scaleLinear for both axes, with data loaded from a CSV file via d3.csv. The code defines its margins, width, and height explicitly before building the chart.

Loading thumbnail…

HTML Starter

This example shows a pie chart of COVID-19 data loaded from the Our World in Data CSV file, with the total cases aggregated per location. It uses D3 v7’s `d3.csv` to fetch the data, `d3.pie` and `d3.arc` to generate the chart geometry, and SVG paths with mouseover tooltips for interactivity. The page also includes a large CSS-styled message, and while the chart logic references variables like `covid_data` and `data` that are not fully defined in the visible code, the rendering approach relies on standard D3 selections and transitions.

Loading thumbnail…

Document

An animated bar chart replays a sequence of keyframes, updating the top bar's value to set the domain for each frame. Components for bars, axes, labels, and a ticker are updated in sync. The visualization uses D3.js v7 to create an SVG, define a viewing box, and manage transitions, coordinating updates for each component within a loop. The animation runs linearly, and an invalidation mechanism can interrupt the current transition.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

This chart displays cumulative COVID-19 deaths over time for each country, using a log-scale y-axis to compare trends across widely varying magnitudes. Each country’s timeseries renders as a distinct colored path via SVG. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLog`, and `d3.line` to generate the paths, with axes styled using `axisBottom` and `axisLeft`. Data comes from the Johns Hopkins Coronavirus Dataset, filtered to countries without provincial breakdowns.

Loading thumbnail…

Fork of Fork by Yizhan Niu

This visualization explores U.S. state unemployment rates from October 2019 to September 2022. Users select a state from a dropdown menu to view its unemployment trend in an animated bar chart, while a geographic map displays the latest rates via blue dots sized with `d3.scaleLinear`. The bar chart updates smoothly using `d3.transition`, and hovering reveals tooltips. The map uses `d3.geoPath` with a topojson map and `d3.forceSimulation` for circle placement. Data is loaded via `d3.csv` from a gist.

Loading thumbnail…

Fork of Daily new cases of Covid in Italy - Scatter Plot

This scatter plot visualizes the daily new COVID-19 cases in Italy over time, with each point’s radius scaled by the number of intensive care patients. A toggle button in the top-left corner switches the connecting path on and off. The visualization uses D3 v6 APIs including `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `scaleSqrt` for point radius. It fetches data from a GitHub-hosted CSV file and renders as an SVG, employing the `csv` parsing function and margins for layout.

Loading thumbnail…

Fork of Coursework 1.js!

This example visualizes COVID-19 case counts for Afghanistan using a horizontal bar chart rendered in SVG. The chart displays daily cumulative case numbers along the x-axis against the country name on the y-axis, with green bars representing case values. The implementation uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to load data from `dataset.csv`, scale the values, and generate the interactive axes and rectangles that comprise the visualization.

Loading thumbnail…

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

A yellow smiley face built with SVG and D3.js v5 demonstrates basic DOM manipulation and animation. The face consists of circles for eyes, rectangles for eyebrows, and a path for the mouth, all positioned using D3's selection and attribute methods. The eyebrows animate upward and back down over two seconds using chained `transition` calls with `duration(2000)`. The code imports `select` and `arc` from D3, uses an SVG canvas of 960x500 pixels, and centers the face with a translated group element.

Loading thumbnail…

COURSEWORK 1

This example demonstrates a basic bar chart visualization using D3 version 7. The chart renders a set of bars in an SVG container, styled with a navy fill color, and is generated from a simple data array. The visualization initializes on page load via a main function, using D3’s selection and data-binding methods to create the SVG elements dynamically. The code specifically relies on d3.select and the D3 v7 library to append rectangles and manage the chart’s layout within a 600-by-400 pixel viewport.

Loading thumbnail…

D3.js v7+ Example

This dashboard visualizes COVID-19 data across multiple countries using linked SVG charts, including a world choropleth map with zoom and tooltips, bar charts for latest case counts, a ranked list of the top six infected nations, and a multi-line time-series graph with a brushable context view. Built with D3 v7, it employs d3.geoPath, d3.geoMercator, d3.scaleThreshold, d3.brushX, and d3.zoom for interactive exploration. Data is loaded from local TSV/CSV files, with animations and transitions updating the visualizations dynamically.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to initialize a D3 visualization by rendering the text “Hello D3 version 7” directly into the page’s body. It uses the `select` function from the `d3` module to target the body element and the `.text` method to set its content. The code loads D3 v7.6.1 from a CDN and separates the main logic into a bundled JavaScript file, showing a minimal starting point for building D3-based charts and interactivity.

Loading thumbnail…

D3 SELECTION PRACTICE

This visualization demonstrates basic D3 selection and transition techniques on an SVG canvas. The code uses d3.select to append a heading that transitions from blue to green text over one second, while d3.selectAll and data joins create fifteen circles from a range array. Each circle renders with a radius of 100 pixels at a fixed x-coordinate, using the d3.v7 library within a React framework context.