Bhanu Siva Kumar Kommana

Fork of Dynamic Bar Graph - Average Salary Landscape for Data Professionals

Fork of Crop_Yield Data

Color Plot

This stacked bar chart visualizes vitamin deficiency levels across different fruits, with each colored segment representing a nutrient subgroup from a CSV dataset loaded via d3.csv. The chart uses d3.stack to compute stacked series, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.schemeSet2 for ordinal color encoding. Hovering over any rectangle highlights all bars for that nutrient subgroup by adjusting opacity via d3.selectAll, while non-selected bars fade to create focus. The SVG rendering uses d3.v4 with axis generators for labeled scales.

Basic Line Plot

This basic line plot displays the number of online orders received over time, with dates on the x-axis and order values on the y-axis. The visualization uses D3.js v4 to load CSV data from a GitHub repository, parse dates with `d3.timeParse`, and render the chart as an SVG. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while the line itself is drawn using `d3.line` with a red stroke. The chart is sized with explicit margins and scales using `d3.scaleTime` and `d3.scaleLinear`.

Color Plot

This stacked bar chart visualizes vitamin deficiency levels across different fruits, with each colored segment representing a nutrient subgroup from a CSV dataset loaded via d3.csv. The chart uses d3.stack to compute stacked series, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.schemeSet2 for ordinal color encoding. Hovering over any rectangle highlights all bars for that nutrient subgroup by adjusting opacity via d3.selectAll, while non-selected bars fade to create focus. The SVG rendering uses d3.v4 with axis generators for labeled scales.

Basic Line Plot

This basic line plot displays the number of online orders received over time, with dates on the x-axis and order values on the y-axis. The visualization uses D3.js v4 to load CSV data from a GitHub repository, parse dates with `d3.timeParse`, and render the chart as an SVG. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while the line itself is drawn using `d3.line` with a red stroke. The chart is sized with explicit margins and scales using `d3.scaleTime` and `d3.scaleLinear`.

Scatter Plot with Color

A scatter plot of the Iris Dataset displays sepal length against petal length, with points colored by species. A color legend identifies setosa, versicolor, and virginica. Built with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and modular functions for axes and legend rendering. Data is loaded from a CSV file and parsed with `csvParse`.

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing sepal length against petal length, with each point colored according to iris species. The visualization includes labeled axes and a color legend identifying the three species categories. Built with D3 v7, the code uses `scaleLinear` and `scaleOrdinal` for scaling, `schemeCategory10` for the color palette, and modular functions like `axes` and `colorLegend` to compose the chart. Data is loaded from a CSV file and parsed with `csvParse`.

Fork of Making a Bar Chart

This example shows a simple bar chart comparing quantities of five fruits, with each bar filled in orange against a blank background. The visualization renders in SVG, using D3 version 5’s core selection and data-binding methods to load values from an external CSV file. The code creates a fixed 960 by 500 pixel canvas and uses D3’s `scaleBand` and `scaleLinear` to position and size the rectangles based on the parsed data, while the stylesheet sets the fill color.