skmriyaz0786@gmail.com

Fork of ICE-8 Family_TREES

This D3.js v7 example visualizes a multi-generation family tree as a compact, vertical dendrogram. Nodes are colored by generation (depth) using `d3.scaleOrdinal`, with curved links drawn via `d3.linkVertical`. The hierarchy is built from a CSV file loaded through `d3.csv` and `d3.autoType`, then processed with `d3.stratify`. Hovering over a node reveals the person’s name and parent through a custom tooltip. The layout uses `d3.tree` with custom separation, rendered as an SVG within a 900x600 viewBox.

Nov 2, 2025

Fork of ICE-8 WORLD MAP

This choropleth map displays 2023 population figures for major countries, using a yellow-to-red color ramp to encode population in millions. It renders a Natural Earth world atlas with a natural Earth projection, drawing graticule lines and country polygons as SVG paths via `d3.geoPath` and `d3.geoNaturalEarth1`. Country data comes from a CSV of global metrics, joined to map features by name. Interactive tooltips are implemented with `d3.select` and DOM elements, while a linear color scale (`d3.scaleLinear`) maps population values to the sequential color scheme.

Nov 2, 2025

Fork of Area Chart (ICE-7)

This example visualizes BMW car sales by year using an area chart with a blue filled region, a yellow line, and orange circular points. The chart aggregates annual sales data from a CSV file via `d3.csv`, then rolls up values with `d3.rollup`. It uses `d3.area` with `curveMonotoneX` to generate the filled shape and `d3.line` for the stroke. SVG rendering includes grid lines, axes, and a hover tooltip that updates through mouse events. The animation capability stems from D3 transitions applied to the tooltip’s opacity.

Fork of Line Chart (ICE 7)

This visualization shows BMW car sales volumes aggregated by year from an external CSV dataset, displaying a line chart with circular data points. The code uses D3 v7 with an SVG rendering approach, applying `d3.csv` for data loading, `d3.rollup` for aggregation, and `d3.line` to generate the orange line path. Interactive tooltips appear on mouseover using DOM events and a styled div, while grid lines and axes are created with `d3.axisLeft` and `d3.axisBottom`. The implementation includes linear scales for positioning and an animation showcase via transitions on tooltips.

Fork of pie chart ICE-7

This chart shows the distribution of BMW car sales by model using a pie chart accompanied by a custom legend and percentage labels. The visualization uses D3.js v7 to load a CSV file from a GitHub gist, aggregate the data by model with `d3.rollup`, and generate the pie slices with `d3.pie` and `d3.arc`. Interactive tooltips reveal exact sales figures when hovering over each slice. The chart is rendered as SVG within a styled HTML container, and the color scheme is applied via `d3.scaleOrdinal` with the Tableau 10 palette.

Fork of Reusable Scatter Plot (ICE-7)

This animated scatter plot explores BMW car sales data by cycling through four quantitative variables—engine size, mileage, price, and sales volume—on the x-axis every three seconds. Using D3.js v6 modules such as `scaleLinear`, `scaleOrdinal`, and `axisBottom`, each vehicle is rendered as a symbol based on fuel type, colored via `schemeCategory10`. The code constructs a reusable `scatterPlot` component with getter-setter methods, and the animation is driven by `setInterval` calling the SVG selection’s `.call()` method.

Fork of Reusable D3 Scatter Plot_curr

This animated scatter plot visualizes the Iris flower dataset, cycling through four measurement columns as the x-axis every two seconds. Using D3 v6, it renders SVG circles and axes via a reusable scatterPlot function, scaling with the window dimensions. The visualization updates x-axis mappings via `setInterval`, calling the plot with new data accessors, while axes are redrawn using `axisBottom` and `axisLeft`.

Fork of ICE-7 Common Visualization Idioms

This example demonstrates a reusable scatter plot that visualizes the relationship between CO₂ emissions and GDP for six countries using data from a local CSV file. It employs D3 v7 with SVG rendering, implementing a `scatterPlot` function that accepts container, data, and variable parameters for reusability. The visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to create proportional scales and axes, with circles positioned via `attr` bindings. The code also clears previous SVG elements before re-rendering, ensuring clean updates without duplication.

Fork of ICE-6 (Multi series chart)

This fork of ICE-6 displays BMW car sales data as a multi-series chart combining bar and line representations. The teal bars show average car price per year (rotated labels display values), while a red line with dots shows average mileage per year on a secondary right axis. The code loads CSV data from a GitHub gist, processes it in React state, then renders SVG using D3 v6 scales, axes, line generator, and selection APIs, with React managing the rendering lifecycle.

Fork of ICE -6 (Scatter Plot)

This scatter plot visualizes BMW car sales by comparing car models against fuel types, with each point colored by sales classification (blue for low, orange for high). The visualization uses React with hooks to load CSV data via `d3.csv`, then renders an SVG with D3 scales including `scaleBand` for both axes. Axis labels are rotated for model names, and hover tooltips display detailed model, fuel type, and sales information for each data point.

Fork of ICE -6 (Bar Chart)

This horizontal bar chart shows the top 15 BMW car models ranked by sales volume, with each bar colored using a pastel ordinal scale from d3.scaleOrdinal. The data is loaded from a CSV file and sorted in descending order before display. Built with React and D3 v5, the visualization uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and SVG elements for rendering bars with hover effects and tooltips.

Fork of ICE-6_fork

This horizontal bar chart shows the top five BMW car models ranked by sales volume, with each bar color-coded and labeled with its sales figure. The chart loads CSV data from a GitHub Gist using d3.csv, then sorts and slices the dataset to display only the leading models. React manages the interactive tooltip that appears on hover, while D3’s scaleBand and scaleLinear handle the axis mappings. SVG rendering, combined with custom gridlines and value annotations, highlights the highest-selling model.

RiFa_ICE 5

This example demonstrates a searchable, sortable data table that loads BMW sales data from a CSV file fetched via `d3.csv`. It displays a summary of the loaded dataset’s size, row and column counts, then renders the first ten rows in an interactive table. Users can filter rows by typing in a search box, which uses `Array.filter` and `String.includes` to match any column, and click column headers to sort data with `d3.ascending` or `d3.descending`. The table features sticky headers, zebra striping, and hover effects, with all elements built dynamically using D3 v7 selections.

Oct 3, 2025

Fork of Rooms

This visualization displays a bar chart of animal homes and their associated populations, sourced from a CSV file and rendered as SVG. The bars represent counts for various structures like fields, chicken coops, and stables. The code uses d3.csv to load the data, then applies d3.scaleLinear and d3.scaleBand for positioning, with d3.axisLeft and d3.axisBottom for the axes. Bars are currently styled with a static steelblue fill, while the loaded data is logged to the console for inspection.

Fork of Fork of HTML Starter

This example demonstrates the complete removal of all data and code from a visualization. The page displays only a confirmation message, with all chart elements, SVG content, and text cleared during initialization. Using D3.js methods such as `select` and `csv`, the program removes references to data files, empties DOM elements, and strips SVG dimensions. The code references `data.csv` and `data1.csv` as the original data sources, though they are no longer loaded or processed.

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

This example shows a crying emoji face with animated eyebrows, wide eyes, a sad mouth, and tear droplets, positioned beside a simple stick-figure person on a blank canvas. D3.js constructs the SVG elements, using `select` to target the `<svg>` and `append` to build the face components with specific attributes. The eyebrows move up and down through a chained `transition` with a 2000-millisecond duration, while `arc()` generates the mouth path. Static tear circles are placed below the eyes to convey the crying emotion.

Fork of Simple World Map

This fork of a simple world map colors each country by its continent, distinguishing seven landmasses with a distinct palette while graticule lines and a bold outline frame the projection. It renders geographic features as SVG paths using D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` APIs. The map fetches TopoJSON from the visionscarto-world-atlas package, converts it with `topojson-client`, and maps country identifiers to continent colors via a static lookup table.

Fork of Fork of Derive India map - Open street

This interactive map shows crime rates for Indian states and union territories, with a yellow-to-red gradient indicating rate severity per 100,000 people. Hovering over a region reveals the state name, crime rate, and capital city in an information panel and tooltip. The visualization combines Leaflet.js for map rendering with OpenStreetMap tiles, while D3.js (v6) uses a `geoTransform` projection to overlay state boundaries from a GeoJSON file onto the map. Crime data is loaded from a CSV file and mapped to a sequential color scale using `d3.scaleSequential`.