Ariful Hasan

@ariful-limon·13 public vizzes

Assignment - 8 - 2.3

A conceptual network graph visualizes six Texas cities as colored nodes and their routes as links. Using the D3.js library, the visualization employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the elements, while a `d3.scaleOrdinal` color scale distinguishes three city groups. Nodes are draggable via `d3.drag()`, and all elements—circles for nodes, lines for links, and text labels—are rendered as SVG. The graph runs a physics simulation to spread cities, with labels offset below each node, and the data is defined inline in `index.js`.

Apr 12, 2026

Loading thumbnail…

Assignment - 8 - 2.2

This family tree visualization displays a four-generation hierarchy using distinct colors and shapes for each layer: squares for the root, circles for grandparents, triangles for parents, and diamonds for children. Built with D3 v7, the example uses the `d3.hierarchy` and `d3.tree` APIs to compute the layout, `d3.linkVertical` for the connecting links, and `d3.symbol` with specific shape types and color functions per depth. Node positions are translated via SVG groups, with labels placed beneath each shape. The static data is embedded directly in the JavaScript code.

Apr 12, 2026

Loading thumbnail…

Assignment - 8 - 2.1

This family tree visualization displays three generations of a family using a hierarchical tree layout. The D3.js visualization uses the `d3.hierarchy` and `d3.tree` APIs to position nodes and `d3.linkVertical` to draw connecting links as SVG paths. Each node is a colored circle, with distinct colors differentiating grandparents, parents, and children, including a node for "Me" and cousins. The SVG is fixed at 900x500 pixels, and the data is hard-coded as a JavaScript object within the script.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of Assignment - 8 - 2.1

This visualization displays global population data as a choropleth map, using a light-to-dark blue sequential color scale to represent population values ranging up to 1.5 billion per country. It loads world country boundaries from TopoJSON and joins them with population figures from a CSV file. The map uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering, and `d3.scaleSequential` with `d3.interpolateBlues` to color each country. This is built with D3 v7.

Apr 12, 2026

Loading thumbnail…

Fork of Assignment - 8 - 1.2

This example displays a choropleth map of world population by country. Countries are filled with a light-to-dark blue sequential scale from a dataset of population values, while territories without data appear gray. The visualization uses D3.js v7 with a Natural Earth projection and `d3.geoPath` to render the map, loading country boundaries from a TopoJSON file and joining them to population data from a CSV. The SVG map is drawn with white strokes between countries.

Apr 12, 2026

Loading thumbnail…

Assignment - 8

A world map visualization displays countries as green or blue polygons with white borders, using data from the world-atlas TopoJSON dataset. The map uses a Natural Earth projection. The D3 code creates an SVG container, applies `d3.geoNaturalEarth1` for projection, and generates geographic paths with `d3.geoPath`. TopoJSON is converted to GeoJSON via `topojson.feature`. Countries receive randomized colors to visually distinguish landmasses.

Apr 12, 2026

Loading thumbnail…

Assignment 7-Part 4- Area chart

This area chart visualizes the relationship between hours of study and average math scores, showing a clear positive trend. The D3.js visualization uses `d3.csv` to load the student_scores.csv dataset, then employs `d3.rollup` to group the data by study hours and calculate the mean math score using `d3.mean`. The chart is rendered as an SVG using `d3.area` to create the filled region, with blue fill and stroke, orange circles marking individual data points, and axes created via `d3.axisBottom` and `d3.axisLeft`. The visualization includes labeled axes and a title, with scales defined by `d3.scaleLinear` and domain adjustments using `d3.extent` and `d3.max`.

Mar 29, 2026

Loading thumbnail…

Assignment 7-Part 3- Line chart

A line chart visualizes how average math scores change with hours of study, using a dataset of student scores from a CSV file. The x-axis represents hours of study, while the y-axis shows the average math score for each hour group, with data points marked by orange circles and connected by a blue line. Built with D3.js v7, the visualization loads `student_scores.csv`, aggregates scores using `d3.rollup` and `d3.mean`, and renders the chart as SVG with `d3.csv`, `d3.scaleLinear`, `d3.line`, and axis functions.

Mar 29, 2026

Loading thumbnail…

Assignment 7 part 2

This pie chart displays the distribution of students across two groups, with each slice sized by student count and labeled with numeric totals. The visualization uses D3.js v7 to load student_scores.csv, process the data with d3.rollups and d3.pie, and render SVG paths via the d3.arc generator. A categorical color scale distinguishes the groups, while a legend identifies slice colors, and labels are positioned using arc.centroid. The result provides an immediate comparison of group sizes from the dataset.

Mar 29, 2026

Loading thumbnail…

Assignment 7

This reusable D3.js scatter plot visualizes the relationship between math and physics scores for 40 students, with points colored by group membership. The chart uses `d3.csv` to load the dataset and custom scales via `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for the categorical color encoding. The reusable function accepts parameters for data, axis value accessors, labels, dimensions, and title, rendering the chart as SVG with axes, labels, a legend, and semi-transparent circles. This design allows the same function to be applied to different datasets and attributes without modification.

Mar 29, 2026

Loading thumbnail…

Fork of D3 Starter

This example shows a multi-series line chart comparing Sales, Profit, and Expenses across a 150-sample dataset, with each metric drawn as a distinct colored path (steelblue, green, and orange) over a light gray grid. It is built using React and D3 v7, using `d3.csv` to load the data and `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` for scales, axes, and path generation. The SVG chart includes labels, a legend, and is rendered with a fixed width and height.

Mar 9, 2026

Loading thumbnail…

Fork of ICE6

This multi-series line chart displays Sales, Profit, and Expenses across 150 samples, with each metric distinguished by color. Built using React and D3 v7, it renders as SVG, using `d3.scaleLinear` for axes and `d3.line` to generate the three paths. Gridlines, axis labels, and a legend are added via D3’s `append` and `call` methods. The code loads data from a remote CSV using `d3.csv`.

Mar 9, 2026

Loading thumbnail…

Smartphone Sales Data Visualization

This example summarizes a smartphone sales dataset by displaying key statistics from a CSV file, including file size, row count, and column count, alongside a table of the first ten records. The visualization also includes static SVG shapes—a red circle and a blue rectangle—to demonstrate basic SVG rendering. Built with D3 v7, the code fetches the dataset via `fetch`, parses it with `d3.csvParse`, and dynamically populates the summary and table elements using D3 selections. The layout is styled with CSS, and the rendering uses SVG for the shapes.

Mar 2, 2026