Skip to main content
Log in
S

Syed Araib Karim

@AraibKarim·13 public vizzes

Loading thumbnail…

Social Network Graph

This example shows a force-directed social network of countries, with nodes representing individual nations and links (weighted by connection strength) drawn between them. The visualization uses the D3.js library, loading node and link data from a local JSON file into a force layout. Nodes are rendered as green circles with blue country labels, and users can drag and drop nodes to rearrange the network. The SVG output is produced using D3’s v4 and the older `d3.layout.force` API, with link widths scaled to the square root of each connection’s weight.

Apr 4, 2022
Loading thumbnail…

Head Family ICE-8

A hierarchical tree diagram shows the "Head Family" dataset, with nodes sized by their `value` and colored by `type` and `level` attributes. The visualization uses D3 v5's `d3.hierarchy` and `d3.tree` layouts to position nodes, while SVG paths draw curved links between parent and child nodes. Node circles are filled and stroked based on data attributes, and text labels use conditional positioning for internal versus leaf nodes.

Apr 4, 2022
Loading thumbnail…

Family Tree ICE-8

A static family tree visualization built with D3.js, rendered as SVG, displays hierarchical relationships among family members as colored nodes and curved links. The tree layout uses `d3.tree` and `d3.hierarchy` to position nodes, with node size and color encoding values and types from the embedded data. Styled circles and labels distinguish parent and child nodes, while the data is defined inline in the code.

Apr 4, 2022
Loading thumbnail…

ICE8 USA Map

This example shows a choropleth-style map of the United States, with each state rendered as a red path that turns blue on hover and includes a tooltip with the state name. The map is drawn using D3’s `geoAlbersUsa` projection and `geoPath` generator, fed by TopoJSON state boundaries from the `us-atlas` dataset. The code uses `d3.json` to load the data, `topojson.feature` to extract geometries, and appends SVG paths with CSS-based hover styling.

Apr 4, 2022
Loading thumbnail…

ICE 8 Araib

This example displays a world map using the Natural Earth projection, coloring each country with a purple fill on a blue background. It loads geographic data from the `world-atlas` TopoJSON file, converts it to GeoJSON using `topojson.feature`, and renders the paths with `d3.geoPath` projected through `d3.geoNaturalEarth1`. The SVG also includes a sphere outline, and countries change color on hover via CSS. D3 v5 and v7 code coexist, with React dependencies declared but unused.

Apr 4, 2022
Loading thumbnail…

ICE 8 Araib

This visualization displays a world map using a natural Earth projection, with countries rendered as pink paths on a blue sphere against a dark navy background. It uses D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and TopoJSON’s `feature` method to load and convert world-atlas country data. Hovering over a country changes its fill to dark blue, highlighting the interactive selection. The SVG is rendered at 960 by 500 pixels, with styling defined in an external CSS file.

Apr 3, 2022
Loading thumbnail…

Topojson World Map

This visualization displays a world map using a Natural Earth projection, rendering continents and countries as filled SVG paths with a blue ocean backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map applies `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate the country outlines, with each country filled in green and stroked with a subtle black border.

Apr 3, 2022
Loading thumbnail…

Topojson World Map

This example renders a world map using a natural Earth projection, displaying countries as filled polygons on a light blue sphere. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. It draws the map with SVG paths generated by `d3.geoPath` and `d3.geoNaturalEarth1`, styling the sphere and countries via CSS classes for a clear, colorful presentation.

Apr 3, 2022
Loading thumbnail…

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

This visualization shows the top 10 products sold in a store as a horizontal bar chart. React manages the component state and rendering, while D3 provides the data loading, scales, and axis utilities. The chart uses `d3.csv` to fetch sales data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. React renders SVG rectangles, gridlines, and text labels directly, with the data limited to the first 10 records.

Mar 7, 2022
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against petal width for individual flowers, with points colored by species (brown for setosa, orange for versicolor, red for virginica). The visualization uses D3.js v6, employing `scaleLinear` and `extent` to map data ranges to screen coordinates, and renders circles as SVG marks via `selectAll` and `join`. Axes are generated with `axisLeft` and `axisBottom`, while the data is loaded asynchronously from a CSV URL using D3’s `csv` function.

Mar 7, 2022
Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a CSV dataset using D3.js, displaying the file size, row count, and column count in a styled HTML page. The page uses `d3.csv` to fetch the remote IRISS.csv file and `d3.csvFormat` to calculate its size, then updates a `<pre>` element with the results. Below, an embedded SVG graphic is included, and the overall layout applies CSS styling to headings and message areas. The code relies on D3 version 7.3.0 and React, with the SVG rendered in a separate script.

Feb 28, 2022
Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders an emoji-style face with D3 and React, showing a blue circle head, two black eyes, and an arc-shaped mouth on an SVG canvas. The code uses the D3 `arc` generator to create the mouth path with specified inner and outer radii and start/end angles, while React handles the component structure and JSX elements. It positions the facial features using SVG group transforms and coordinates relative to the canvas center, with CSS styling removing page margins for a clean, full-window display.

Feb 21, 2022
Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a yellow emoji-style face with two eyes and a curved mouth, centered on an SVG canvas. Built with React and D3, the visualization uses a D3 arc generator for the mouth shape and SVG circles for the facial features, all positioned within a transformed group. The face is drawn with a yellow fill, black stroke, and a fixed stroke width, demonstrating how to combine React’s JSX markup with D3’s geometry utilities. The code relies on D3 v7 and React 17, loaded via UMD bundles.

Feb 21, 2022