M

Md Fahimul Kabir Chowdhury

@fahimulkabir·17 public vizzes

Loading thumbnail…

Network Graph

This network graph visualizes a conceptual set of Texas cities and the routes between them. Nodes are rendered as distinct shapes and colors, representing each city, while links show connections. The example uses the d3.forceSimulation API with forceLink and forceManyBody forces to position the nodes, and custom symbol types like circle, square, and star from the d3.symbol library. The SVG rendering is driven by a simulation tick event, and nodes include drag behavior via d3.drag.

Loading thumbnail…

Network Graph 2

This example visualizes a conceptual network of seven cities connected by seven routes. Node shapes and colors vary per city, with labels identifying each one. The graph is laid out using a force-directed simulation provided by `d3.forceSimulation`, combining link, many-body charge, and center forces. City nodes are drawn as SVG paths using D3 symbols like circle, square, and star, while links are simple lines. The simulation updates node positions on each tick, and nodes are draggable via the `d3.drag` interaction.

Loading thumbnail…

Tree Graph

This example shows the hierarchical structure of the Kader family as a tree diagram, with the root node at the top and descending branches and leaves. It uses D3.js v7’s `d3.tree()` and `d3.hierarchy()` to compute the layout, and renders the nodes as SVG shapes that vary by depth—circles, rectangles, rotated diamonds, and small circles—to visually distinguish family generations. Connecting links are drawn with `d3.linkHorizontal()`, and the tree is styled with a nature-inspired color palette. The input is a hardcoded JavaScript object representing the family tree.

Loading thumbnail…

Tree Graph 2

This example displays a hierarchical tree diagram illustrating the structure of a natural tree, from root to leaves. It uses the D3.js v7 library to render the visualization as an SVG. The layout is computed with `d3.tree()` and `d3.hierarchy()`, while links are drawn using `d3.linkHorizontal()`. Nodes are styled with different shapes and colors based on their depth in the hierarchy: the root is a brown circle, branches are green rectangles, sub-branches are light green diamonds, and leaves are small circles.

Loading thumbnail…

World Map

This choropleth map displays the global prevalence of hypertension among adults aged 30-79 years in 2019, with data sourced from the WHO Global Health Observatory. The map uses a blue sequential color scale to represent percentage values, ranging from approximately 15% to 35%, and includes an interactive legend with tick marks. A dropdown menu allows switching between "Both sexes," "Female," and "Male" to filter the displayed data. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country boundaries, and SVG paths for map elements. Hovering over a country highlights it and shows a tooltip with the country name and its exact prevalence value.

Loading thumbnail…

World Map 2

This interactive choropleth map visualizes the global prevalence of hypertension in 2019, filtered by sex. It uses a blue sequential color scale to encode prevalence values. Built with React and D3, the visualization employs `d3.geoPath` to render an SVG map, with country interactivity for tooltips and highlighting. The legend is generated using `d3.scaleSequential` and `d3.interpolateBlues`. Data originates from the WHO Global Health Observatory, loaded via `d3.csv` and `d3.json`.

Loading thumbnail…

Map

This interactive map visualizes United States home price performance across states and major cities, using a blue choropleth for state-level data and orange circles scaled by population for city-level metrics. Built with D3 v7, it combines TopoJSON geographic data, `d3.geoAlbersUsa` projection, and `d3.geoPath` to render state boundaries, while animated transitions and hover tooltips reveal detailed housing indicators like median home prices, rents, and job growth rates. The visualization draws from seasonally adjusted price indices in `data.csv` and city housing market data in `data1.csv`.

Loading thumbnail…

Map 2

This interactive map visualizes U.S. home price performance by state, with states colored according to their seasonally adjusted one-year price change, and overlays circles for cities sized by population. Hovering reveals detailed metrics for both states and cities. Built with D3.js v7 and TopoJSON, it uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries, while a sequential color scale applies a blue interpolator to encode performance data from the CSV files.

Loading thumbnail…

Map

This interactive map visualizes seasonally adjusted home price performance across U.S. states, using color intensity to show one-year price changes, while city-level circles sized by population reveal housing metrics like median prices and rents. Users hover over states and cities to access detailed data. The visualization uses D3 v7 with a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON state boundaries, alongside `d3.scaleSequential` for color coding and `d3.scaleSqrt` for circle sizing.

Loading thumbnail…

Map

This interactive map visualizes U.S. home price performance by state, using color to encode the seasonally adjusted 1-year metric, alongside major cities sized by population. The D3.js v7 code loads TopoJSON from us-atlas and GeoJSON data, projecting paths with d3.geoPath and a geoAlbersUsa projection. Animated hover effects reveal detailed state metrics and city statistics (median home price, rent, income) via a custom tooltip, while distinguishing state choropleth shading from proportional city circles in a single SVG rendering.

Loading thumbnail…

Map

This interactive map visualizes home price performance across U.S. states and cities. States are colored by their one-year seasonally adjusted price change, while cities appear as circles sized by population. The visualization uses D3 v7 with `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries from TopoJSON, and `d3.csv` to load both state and city datasets. Hovering over states or cities reveals detailed tooltips, and the map includes a legend and informational panel.

Loading thumbnail…

Map

A choropleth map of the United States visualizes home price performance by state, with states colored according to their seasonally adjusted one-year price change. Overlaid orange circles represent major cities, sized by population, providing additional housing market context. The visualization uses D3.js v7 with `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON state boundaries from the us-atlas package, while a custom SVG tooltip displays detailed state and city metrics on hover. State data comes from a CSV file ranking performance across multiple time periods.

Loading thumbnail…

area plot

This area chart shows the total world population from 1970 to 2022, summing population values across all countries for each year. The x-axis displays years, while the y-axis represents people, formatted with SI prefixes. Built with D3 v7, it loads CSV data, filters year-specific columns, and uses `d3.area` with a monotone curve to render the filled path. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the SVG output includes labeled axes.

Loading thumbnail…

line chart

This line chart visualizes global population trends from 1970 to 2022 by summing yearly population figures across all countries in the world_population.csv dataset. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` and `d3.autoType` for data loading, `d3.scaleLinear` for both axes, and `d3.line` with `curveMonotoneX` for the smoothed line path. Orange circles mark individual data points, with tooltips showing exact year and population values via appended `<title>` elements.

Loading thumbnail…

Fork of pie chart

A pie chart displays the 2022 world population share by continent, aggregated from a CSV file with `d3.csv`. Each slice uses a Tableau10 color from a `d3.scaleOrdinal` and shows the percentage, while a side legend lists continent names with total population and percentage. The chart is rendered as SVG using `d3.pie` and `d3.arc`, with text labels positioned via `outerArc.centroid`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot compares the area and population density of world countries, with each point colored by continent and labeled with a tooltip showing population, area, and density. The visualization is built as a reusable D3 function, using `d3.csv` to load `world_population.csv`, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and `d3.symbol` for point shapes. The chart includes axis caps, a legend, and hover tooltips, rendered as SVG with smooth transitions.

Loading thumbnail…

ICE-5

This example presents a summary of a CSV dataset, displaying file size, row and column counts, and a preview of the first five records in an HTML table. It also includes a static SVG graphic with basic shapes and text. The code uses D3.js version 7 to fetch and parse the CSV data via `d3.csv` and the browser’s `fetch` API for file size, populating the summary and table dynamically. The rendering relies on SVG elements defined in the markup and styled with CSS.