r79162810@gmail.com

@raviteja002·7 public vizzes

Scatter Plot

This reusable scatter plot visualizes the relationship between calorie content and price for menu items, with each circle colored by category. The visualization uses D3.js v6 with an SVG rendering approach, loading data from a CSV file hosted on GitHub Gist. The code implements linear scales for both axes, an ordinal color scale using `d3.schemeCategory10`, and renders circles positioned by the x and y scales. Axis construction uses `d3.axisBottom` and `d3.axisLeft`, while the data loading relies on `d3.csv` with promise handling. The chart displays points with a radius of 5 pixels, colored according to categorical values.

Mar 28, 2024

Loading thumbnail…

Scatter Plot

This reusable scatter plot displays the relationship between calorie content and price for inventory items, with each circle positioned along the x- and y-axes according to those numeric values. Built with D3 v6, the visualization loads a CSV file and maps its fields to linear scales, using `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` to generate tick marks and labels. The SVG output renders circles with a fixed radius and steel-blue fill, while axis titles clarify the measured variables.

Mar 28, 2024

Loading thumbnail…

Scatter Plot

This reusable scatter plot visualizes the relationship between calorie content and price for various beverages, with each circle representing a beverage. The chart uses D3.js v6 to load a CSV dataset, scale the axes linearly, and render circles positioned by calorie content on the x-axis and price on the y-axis. Axes are generated using d3.axisBottom and d3.axisLeft, while circles are appended as SVG elements with a steelblue fill. The static, responsive layout centers the plot on a white background, with styled text and axes for readability.

Mar 28, 2024

Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot, built with D3 v7, visualizes employee data from a CSV file using a pie chart, with slice sizes proportional to the number of projects each employee worked on. The code uses `d3.csv` to load data and transform it into name-value pairs, `d3.pie()` to compute arc angles, and `d3.arc()` to generate SVG path geometries. A categorical color scale from `d3.scaleOrdinal` with `d3.schemeCategory10` fills the slices, and text labels appear at arc centroids, while an SVG legend maps colors to employee names and project counts.

Mar 28, 2024

Loading thumbnail…

Line chart

This line chart visualizes yearly sales data using a time-series line graph. The SVG rendering uses D3.js v7 with `d3.csv` for data loading, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes, and `d3.line` to generate the path. Data comes from a remote CSV file accessed via a gist URL.

Mar 28, 2024

Loading thumbnail…

area chart

This area chart displays yearly sales data loaded from an external CSV file, with the x-axis representing years and the y-axis representing sales figures. Using D3 v7, the visualization generates an SVG area path filled in steel blue, with axes and labels for both dimensions. The code employs `d3.area()` to create the filled region, `d3.scaleLinear()` for both scales, and `d3.axisBottom` and `d3.axisLeft` to render the axes, all appended to a single SVG element sized at 800 by 400 pixels.

Mar 28, 2024

Loading thumbnail…

area chart

This area chart visualizes yearly data from a CSV file, showing how values change over time. It loads the dataset via `d3.csv` from a GitHub Gist, parses the year and value columns, and renders a filled steelblue area using the `d3.area` generator. The chart uses linear scales for both axes, with an x-axis formatted to show integer years and labeled "Year," while the y-axis is labeled "Value." Axes are drawn using `d3.axisBottom` and `d3.axisLeft` within an SVG container, demonstrating basic data loading, scaling, and shape generation in D3 v7.

Mar 28, 2024