sriram.official9@gmail.com

ICE_8 network graph

tree

reusable scatter

This example demonstrates a reusable scatter plot that visualizes Titanic passenger data, comparing age against fare and coloring points by gender. The visualization alternates between two halves of the dataset every five seconds, using a custom `scatterPlot` function built with D3 v6. The chart employs `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisLeft`/`axisBottom` for tick marks. Data is loaded via `d3.csv` from a remote source, and the animation uses `setInterval` to switch plots, removing and redrawing SVG circles.

Fork of ICE-7

This visualization presents a dynamic scatter plot of the Iris dataset, split into two subsets that alternate every five seconds. Each plot maps Age against Fare, with points colored by the Sex attribute using D3’s categorical color scheme. The reusable chart module, based on the Towards Reusable Charts pattern, handles SVG rendering, axes, and labels, while a setInterval toggle switches between the two data halves, creating a time-based comparison of the same variables.

Fork of reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes inventory data, plotting Quantity on the x-axis and Price on the y-axis. It alternates between two halves of the dataset every five seconds, switching the displayed points and updating the axes and circles accordingly. The code uses D3 v6 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeCategory10` for coloring. The data is loaded from a CSV file, and the visualization renders in an SVG container with margins, axis labels, and animated transitions via `setInterval`.

area chart

This area chart visualizes the relationship between passenger age and fare from a Titanic dataset, using a subset of eight data points. The chart employs D3.js v7 to create an SVG-based area graph, with age on the x-axis and fare on the y-axis. The area is filled in steelblue beneath a path generated by `d3.area()`, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. Data is loaded asynchronously via `fetch` and parsed with `d3.csvParse` from a remote CSV source.

Line chart.js!

This example builds a line chart from Titanic passenger data, plotting the relationship between Age and Fare for a subset of passengers. It uses D3.js v7 to load data from a CSV file via `d3.csv`, then slices the data to focus on a specific range of rows. The chart includes linear scales, axes with labels, and a line generator (`d3.line`), all rendered as SVG elements within an HTML page. The visualization illustrates how D3 can handle data ingestion, scaling, and basic chart construction in a straightforward workflow.

Line chart

This example displays a line chart of total sales per year, with a single steelblue path plotted against a time-scaled x-axis and a linear y-axis. The chart is a static SVG rendered in D3 v7. The code loads a CSV from a GitHub gist (titanic.csv), aggregates sales data by summing each year’s column, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the visualization. The SVG is sized at 800x400 pixels with margins, and axis labels are added as text elements.

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, showing how different flower species cluster based on their measurements. Built with D3 v7 and rendered as SVG, the visualization demonstrates a modular chart structure where axes, scales, and data encoding are parameterized for easy reuse. The example loads CSV data directly from a GitHub gist and uses d3.select, d3.csv, and d3.scaleOrdinal to map species to colors. The chart's layout applies a configurable margin system and dynamic radius calculation, making it adaptable to different datasets and display sizes.

Area chart

This area chart shows the total annual iPhone sales over time, with a single steelblue filled path representing the sales trend. The visualization loads data from a remote CSV file, aggregates the quarterly figures per year, and uses D3 v7’s `d3.area()` generator to create the shape. Axes are added with `d3.axisBottom` and `d3.axisLeft`, while time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) map years and sales values. The SVG rendering includes labeled axes for clarity.

ICE-6 Scatter plot

This example shows an interactive scatter plot of age versus income for individuals, with each point labeled by name. It first loads and parses a CSV dataset from a remote URL, then uses Plotly.js to render the visualization. The code fetches the data, extracts the age, income, and name columns, and maps them to x/y coordinates and hover text. The plot is created with a simple layout specifying axis titles and a title, while markers are sized at 12 pixels. The implementation relies on the Fetch API for data retrieval and Plotly’s `newPlot` method to draw the chart.

ICE-6 Bar Graph

This bar chart visualizes iPhone sales figures across countries for the year 2020, with each bar’s height encoding the sales value. The chart uses D3 v7 to load a CSV dataset from GitHub Gist, then creates an SVG with a band scale for the x-axis and a linear scale for the y-axis. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while bars are appended as `rect` elements with a steel blue fill. The code includes hover effects defined in CSS, though no interaction is implemented in the JavaScript itself.

Barchart

This visualization displays iPhone sales data as a set of grouped bar charts, with each chart representing a different year and bars showing sales figures across countries. The code uses D3 v7 to fetch data from a CSV file, then creates separate SVG charts per year, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while hover effects change bar fill color to orange via CSS. The rendering approach is SVG, with a clean layout featuring dashed gridlines and clearly labeled axes.

Fork of HTML Starter

This example shows a static SVG car graphic alongside a text-based dataset summary. The visualization displays a blue car with white windows and black wheels, while the adjacent summary reports the CSV file’s size, row count, and column count. The code uses D3.js v7’s `csvParse` method and the Fetch API to load and parse the external CSV dataset. Rendering is done via inline SVG elements like `rect` and `circle`, with styling handled through CSS.

flower_vase.js!

This example shows a simple house built from basic SVG shapes by directly manipulating the DOM with D3.js. It uses `d3.select` to target the SVG canvas and appends rectangles, a polygon, and circles to construct the house, roof, windows, door, and doorknob. The code relies on D3's chained `.attr` methods to set coordinates, dimensions, and fill colors on each shape, while the accompanying stylesheet provides a light gray background for the SVG. The scene is static, with no interaction or animation.