H

hossaphul

@hossaphul·31 public vizzes

Loading thumbnail…

Social Network ICE 8

This example shows a small social network of eight named individuals organized into four groups, with weighted links connecting them. The visualization uses a force-directed layout to position nodes and links in an SVG. It is built with D3 v4, employing the `d3.layout.force` API to simulate physics, and renders circles and text labels for nodes, with lines for edges. The data comes from `data.json`, and the code explicitly sets gravity, charge, and distance parameters to control the layout. Link stroke widths and node fills are styled via CSS, though the stroke width does not actually reflect the link weight.

Loading thumbnail…

Family tree ICE 8

This example displays a hierarchical family tree of an employee’s contacts, departments, and locations using a node-link diagram. The visualization uses D3.js (v5) with the `tree` and `hierarchy` APIs to compute the layout, while custom SVG `path` elements draw curved links between nodes. Each node’s radius reflects its `value`, and stroke and fill colors correspond to the `type` and `level` fields from the embedded JSON data. The chart is rendered in an SVG canvas with `d3.select` and `d3.append`, and node labels are positioned dynamically based on depth.

Loading thumbnail…

country_map_usa_ice-8

This example displays a choropleth map of the United States, with each state filled with a distinct color from a categorical scale and a hover effect that turns the state white. It uses D3 v7’s `geoAlbersUsa` projection and `geoPath` to render the map from TopoJSON data loaded from the us-atlas CDN. State boundaries are drawn with black strokes, and tooltips showing state names appear via appended `title` elements. The color mapping and hover behavior are implemented with `scaleOrdinal` and CSS `:hover` rules.

Loading thumbnail…

ICE-8-World-Map

This visualization displays a world map with countries rendered as black landmasses with gold outlines, all set against a blue spherical background. It uses `d3.geoPath` with the `geoNaturalEarth1` projection to draw the map, while the `topojson.feature` method converts the World Atlas TopoJSON data from the countries-110m.json file into GeoJSON features. The map also includes a hover effect that highlights individual countries in white.

Loading thumbnail…

ICE-7-4 Area Chart1

This area chart displays the U.S. Monthly Consumer Price Index (CPI) over time, with the shaded region emphasizing the trend and magnitude of inflation. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, filled path. Axes are created with `axisBottom` and `axisLeft`, and data is loaded via `csv` from a provided URL. The SVG rendering includes labeled axes and a title, with the area fill styled in maroon.

Loading thumbnail…

reusable-d3-scatter-plot-ICE-7

This animated scatter plot visualizes the Iris dataset, mapping flower measurements to x- and y-axes while using distinct symbol shapes and colors to represent the three species (setosa, versicolor, virginica). Built with D3 v7, the reusable chart cycles its x-axis variable every 20 seconds among petal width, sepal width, petal length, and sepal length to reveal different feature relationships. It uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color and symbol mapping, and `d3.axisLeft` and `d3.axisBottom` for rendering scales.

Loading thumbnail…

ICE-7-3 Line Chart

This line chart visualizes the monthly Consumer Price Index (CPI) from the U.S. Bureau of Labor Statistics, showing percentage changes over time on a red line plotted against a time-scaled x-axis and linear y-axis. The code uses d3.csv to load the data, then applies d3.scaleTime, d3.scaleLinear, and d3.line to generate the SVG path. Gridlines are drawn via d3.axisBottom and d3.axisLeft, with tick sizing and labels configured. The chart displays a title and axis labels, rendered in an SVG canvas with dimensions defined in the HTML.

Loading thumbnail…

Pie Chart

This example displays a pie chart of the top 10 countries by CO2 emissions, showing each country's share of the total and its emission amount in million tons. The chart is rendered in SVG using the D3 library, with the `pie`, `arc`, and `scaleOrdinal` functions to construct and color the slices and legend. Data is loaded from a remote CSV file containing country and co2_amount fields, and the D3 `csv` function parses the data. The legend lists each country with its percentage and tonnage, providing a detailed breakdown alongside the visual representation.

Loading thumbnail…

ICE-6-Q2

This scatter plot from the d3.v5 library visualizes the relationship between flipper length and body mass for three penguin species, using a circle glyph per data point. The SVG chart distinctly encodes species (Adelie, Gentoo, Chinstrap) with a `d3.scaleOrdinal` color scale applied to steelblue, green, and brown fills. The code builds an axis-bottom and axis-left from `d3.scaleLinear`, with the data fetched from a CSV URL. Circle opacity is set in the stylesheet to 0.6, revealing overlapping points.

Loading thumbnail…

Practice-reusable-chart-1

This visualization is a scatter plot of the Iris dataset, displaying the relationship between petal width and sepal length, with points colored by species. It uses a reusable D3 module (scatterPlot) that applies linear scales, an ordinal color scale, and SVG symbols to render the data. The chart fetches the dataset from a Gist URL, parses numeric fields, and draws axes with d3’s axisLeft and axisBottom, while the symbol size is set to 100. The code demonstrates a configurable chart function with settable properties like width, height, and margins.

Loading thumbnail…

Introduction to D3

This example demonstrates a minimal introduction to D3, showing how to create an SVG canvas that fills the entire browser window. The code uses the `select` and `append` functions from the D3 library to dynamically add an SVG element to the HTML body, then sets its width and height attributes based on the window’s dimensions. The visualization renders nothing beyond an empty, resizable SVG container, serving as a starting point for more complex D3 projects. The page is built from a barebones `index.html` file with no pre-existing content, relying on JavaScript to construct the visual output at runtime.

Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG shapes—a circle, a yellow-filled circle, and a thick black line—arranged on a 960 by 500 canvas. It shows how basic geometric primitives are positioned using `cx`, `cy`, `r`, `x1`, `y1`, `x2`, and `y2` attributes. The rendering relies entirely on the SVG API embedded directly in the HTML, with shapes styled via `fill` and `stroke` properties. No external libraries or data sources are used; the visualization is a static, hand-coded illustration of core vector graphics syntax.

Loading thumbnail…

ICE-6-Q1

A horizontal bar chart displays the top 10 customers by credit amount from a German credit dataset, with steel-blue bars and customer IDs on the y-axis. The visualization uses D3 v5's `scaleLinear` and `scaleBand` to map the data, while `axisLeft` and `axisBottom` generate the axes. Credit amounts are formatted using D3's `format` function, and the chart is rendered as an SVG with a title and axis labels. Data is loaded asynchronously via `csv` and truncated to the first ten records.

Loading thumbnail…

Penguins dataset

This scatter plot visualizes the Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, with each species distinguished by color. The visualization also encodes bill dimensions through the rx and ry attributes of the circles, adding additional data dimensions to the scatter plot. The code uses D3 v5 to load and parse the CSV data, then applies scaleLinear functions for the x and y axes. It renders the plot as SVG circles with axisLeft and axisBottom generating the labeled axes.

Loading thumbnail…

practice

This bar chart displays the credit amount for the first 20 customers from a German credit dataset. The chart uses a horizontal layout where each customer is represented by a rectangular bar on the y-axis, with bar length corresponding to credit amount on the x-axis. The visualization is rendered as SVG using D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and the `axisLeft` and `axisBottom` APIs to generate the axes. Data is loaded from a CSV file using the `csv` function.

Loading thumbnail…

practice3 on state pop

This bar chart shows the estimated 2019 population for the top ten most populous U.S. states, ordered by state name on the vertical axis and population magnitude on the horizontal axis. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the population axis, `scaleBand` for the state categories, and `axisBottom` with tick formatting to display abbreviations like “B” for billions. Data comes from a CSV file containing state population estimates and geographic coordinates.

Loading thumbnail…

Practice4 car scatter plot

This scatter plot displays the relationship between horsepower and weight for 392 cars from the 1970s, with each red, semi-transparent circle representing a vehicle. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `csv` loads the data from a local CSV file containing attributes like mpg, cylinders, and origin. SVG circles are positioned using the computed scales, with gridlines and axis labels rendered through the D3 axis API.

Loading thumbnail…

Practice3 scatter plot

A scatter plot displays the top 10 most populous countries, with population on the x-axis and country names on the y-axis, using circles to represent each nation. The visualization uses D3 v5's `scaleLinear` and `scalePoint` to map data from `data.csv` to pixel coordinates, with `axisLeft` and `axisBottom` rendering grid lines and tick labels. Population values are multiplied by 1000 and formatted with the `d3.format` `.3s` shorthand, replacing 'G' with 'B'. The SVG rendering applies CSS styling for circle fill, tick fonts, and axis labels.

Loading thumbnail…

practice2-Customizing Axes

This example visualizes the ten most populous countries using a horizontal bar chart, with population values scaled in thousands and displayed in billions via a custom tick format. The chart reads from a CSV file and renders SVG bars with a steelblue fill, while customizing axes: the y-axis removes its domain and tick lines, and the x-axis includes a labeled "Population" axis with gridlines. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format, with title and axis labels styled via CSS.

Loading thumbnail…

practice1

This bar chart visualizes population data for ten countries, comparing values from China to Mexico using horizontal bars. The chart renders as an SVG graphic, with the countries listed along the y-axis and population counts on the x-axis. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map the data, while `axisLeft` and `axisBottom` generate the axes. The `csv` function loads the data from `data.csv`, and steelblue rectangles represent each country’s population.

Loading thumbnail…

Practice

A smiling face built from D3.js SVG shapes demonstrates sequential animation with transition chains. The yellow circle, eyes, and arc-based mouth are drawn using D3 selections and the `d3.arc` helper, while two rectangular eyebrows animate upward and back down over four seconds. The movement uses chained `transition().duration()` calls on the eyebrow group's transform attribute, illustrating basic DOM manipulation and timed updates.

Loading thumbnail…

Practice on Making Bar Chart

This example shows a bar chart of population figures for ten countries, using data loaded from a CSV file. The chart is rendered as SVG in a fixed 960-by-500 viewport, with country names and population values mapped to bars. The implementation uses D3 v5’s `csv` method to load the data and `select` to target the chart’s SVG element.

Loading thumbnail…

practice

This example displays a simple bar chart of population data for ten countries, using a static HTML page with no visible visualization logic. The chart is generated entirely client-side, but the provided `index.html` contains only an empty body element, meaning the page renders without any graphical output. The code references no external JavaScript libraries or APIs, and the data is supplied as a CSV file with country and population columns. The visualization remains unimplemented, leaving the page blank rather than producing a chart.

Loading thumbnail…

ICE-6-Part2-Sarkar

This interactive scatter plot visualizes penguin body mass against flipper length, with each circle colored by species: yellow for Adelie, green for Gentoo, and brown for Chinstrap. The data comes from a CSV loaded via `d3.csv`. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while circles are appended to an SVG using `selectAll` and `join`. Point radii are fixed, but the `rx` and `ry` attributes are set to the penguin’s bill length and depth, though these do not affect circle shape. A title is added via an SVG `<text>` element.

Loading thumbnail…

ICE-6-Sarkar

This interactive bar chart displays the basic monthly cost of Netflix subscriptions across 15 countries, with countries listed on the y-axis and costs plotted along the x-axis using a linear scale. Built with React and D3 v5, the visualization loads CSV data from a GitHub gist and renders SVG rectangles whose widths encode each country’s price. The code uses D3’s `scaleBand` and `scaleLinear` for axes, `csv` for data parsing, and manual tick generation for gridlines and labels.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the basic cost of Netflix subscriptions across different countries using a choropleth map. The visualization renders geographic regions and applies color channels to represent pricing tiers, with a title displayed above the map. The code combines React for component structure and D3 v5’s `d3.geoPath` and projection APIs to draw the map, while D3’s scale functions map data values to color ranges. It also uses `d3.forceSimulation` for any layout adjustments, loading data from a JSON source and rendering the result within a React root element.

Loading thumbnail…

ICE-6-Sarkar

This example uses D3 v5 to render a full-window SVG visualization. The code sets the SVG dimensions to match the browser viewport and appends a rounded rectangle covering the entire canvas. The visualization relies on the `d3.select` and `d3.append` APIs to build the scene, with styling handled through an external CSS file. The rendering approach is purely SVG-based, with event handling and interaction logic omitted from the visible source. The data source is not defined in the provided files, as the visualization appears to be a blank canvas placeholder awaiting further data-binding or drawing operations.

Loading thumbnail…

Fork of Blank Canvas

This example creates a full-screen, rounded rectangle that fills the browser viewport. It uses the d3-selection module via `select` to target the SVG element, then dynamically sets the SVG’s width and height attributes based on the document’s client dimensions. A single `<rect>` is appended with a 40-pixel corner radius (`rx`), demonstrating a minimal D3 v5 setup with SVG rendering and no data binding. The styling uses fixed positioning to prevent page scrolling.

Loading thumbnail…

Welcome to ICE-5

This example presents a landing page that summarizes the metadata of a German credit risk dataset. The page displays the dataset's size in kilobytes, row count, and column count, which are dynamically computed after fetching the CSV. It uses D3.js version 7.3.0, specifically the `d3.csv` and `d3.csvFormat` functions, to load the data and calculate the byte length. A CSS background image provides a credit risk-themed visual behind the centered HTML headings and the display of the computed statistics.

Loading thumbnail…

Akbar Sarkar

Akbar Sarkar is a smiling face made from gold SVG shapes, including a mouth, nose, ears, pupils, and teeth, all drawn with D3.js primitives. The visualization demonstrates DOM manipulation by constructing each facial feature through D3 selections and appending circles, rectangles, and paths. The code uses the `d3.select` and `.append` API to build the SVG hierarchy, and the `d3.arc` generator to define the mouth and nose paths, while static eyebrows and eyes are placed via absolute coordinates.

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js v5. The SVG face is built from circles, rectangles, and an arc-generated mouth, centered by translating a group element. D3’s `transition().duration()` shifts the eyebrow group upward and back down in a two-second loop. The code imports `select` and `arc` from the D3 module, using method chaining to append and style each shape.