sreeramyamini@gmail.com

Area chart for electronic sales

This area chart displays total sales across product categories, using a steel-blue filled region beneath a line to emphasize the magnitude of sales for each category. The visualization is built with D3.js v7 and rendered as an SVG. It loads CSV data via `d3.csv`, converts the sales strings to numbers, and uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The area and line paths are drawn with `d3.area` and `d3.line`, respectively, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`.

Reusable D3 Scatter Plot

This reusable scatter plot visualizes cereal data, mapping sugar and calorie values to x- and y-axes with animated transitions that cycle through nutritional columns. Built with D3 v7, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, while `setInterval` triggers periodic updates of the x-value accessor to animate between attributes. The chart is constructed via a configurable `scatterPlot()` factory function, with SVG circles and axes rendered from the Iris Dataset.

Line Chart for sales

This line chart visualizes total sales across product categories, with the y-axis representing sales figures and the x-axis categorizing products. The chart uses D3.js v7, loading CSV data from a GitHub gist. The code converts string sales values to numbers, defines an SVG canvas, and constructs scales with `d3.scaleBand` and `d3.scaleLinear`. It renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the line using D3's `d3.line` generator, styled with a steelblue stroke. The SVG output includes labels for both axes.

Fork of Pie Chart for Electronic sales

This D3.js (v7) visualization displays a pie chart of electronic product sales, with each slice representing a product category’s total revenue. The chart uses a custom legend showing category names, percentage of total sales, and sales values in thousands. The code fetches CSV data via `d3.csv`, computes pie segments with `d3.pie`, and renders them as SVG paths using `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and the legend and percentages are formatted using `d3.format`.

Line chart for electronic sales

This line chart visualizes total sales across product categories, using a filled area beneath a steel-blue line to emphasize the trend. Built with D3 v7 and rendered as an SVG, the chart loads CSV data from a GitHub gist and converts sales values from currency strings to numbers. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` and `d3.area` to generate the paths.

ICE-6 Scatterplot-Calories vs Sugars

This scatterplot visualizes the relationship between calorie and sugar content across a set of cereals. Each black dot represents a single cereal, with its position determined by its caloric value on the x-axis and sugar content on the y-axis. The visualization uses D3.js v7 to load the external CSV dataset, scale the axes linearly, and render the points as SVG circles. The chart includes labeled axes for both variables, with the axis tick marks and labels generated using D3’s axis functions.

ICE-6 Bar Chart Cereals and their calories

This bar chart displays the calorie content of 77 cereals, using green vertical bars sorted by cereal name along the x-axis and calorie values on the y-axis. The visualization loads CSV data from a GitHub gist via d3.csv, then uses React hooks (useState, useEffect) to manage asynchronous data loading and rendering. The chart employs d3.scaleBand for categorical x-axis positioning, d3.scaleLinear for the continuous y-axis, and d3.max to compute the domain. SVG rendering occurs through React components, with rotated x-axis labels for readability and horizontal gridlines generated from y-axis ticks.

Fork of cereals D3 Scatter Plot

This example visualizes the distribution of calories across different cereal brands using a vertical bar chart. The chart displays each cereal name on the x-axis with calorie values mapped to the y-axis, making it easy to compare relative calorie counts. The visualization is built with D3 v7 and renders as SVG, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file via `d3.csv`, with each bar's height proportional to the cereal's calorie value.

ICE-6 Bar chart SDV

This bar chart displays the distribution of calories across different cereal brands, with each bar representing a specific cereal’s calorie count. The visualization uses D3.js v7 to load CSV data from a GitHub gist, parse the numeric calorie values, and render the chart as SVG. The code employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes formatted via `d3.axisBottom` and `d3.axisLeft`. Cereal names on the x-axis are rotated for readability, while bar heights encode the calorie values directly. The chart’s layout and margins are defined programmatically, and error handling logs any data-loading issues.

Fork for Amazon series data

This example visualizes metadata about Amazon series data loaded from a CSV file, displaying summary statistics such as data length, row count, and column count. It renders a simple cartoon face as a decorative SVG element alongside the text summary. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading via D3’s `csv` function, and formats the output using `csvFormat`. The SVG face is built with basic shapes like circles, polygons, and rectangles, styled with inline objects. The data source is a remote GitHub-hosted CSV, and the visualization is presented as a static, non-interactive layout.

Mar 7, 2024