maheshpolisetty22@gmail.com

Fork of Blank Slate with Hot Reloading

Fork of Rahul

This scatterplot visualizes the relationship between carbohydrate and ash content in food items, with points colored by category (blue for cheese, red for cherries, orange for others). The code uses D3 v6 to load CSV data, scales the x and y axes linearly using `scaleLinear`, and renders circles with SVG. Axis labels are added via `axisBottom` and `axisLeft`, with explicit font styling. The visualization employs a simple color-mapping function to distinguish categories, while the chart fills the browser window with margins for axis placement.

Fork of Simple Scatter Plot

This example shows a scatter plot of the Penguins dataset, visualizing bill length against flipper length. Each circle represents a penguin, with its opacity and radius set to fixed values. The visualization uses D3’s `scaleLinear`, `extent`, `axisLeft`, and the `@curran/axis-labels` library to render axes and labels. The rendering uses D3’s `select` and `join` operations to update SVG elements efficiently. The data is loaded from `@curran/penguins`, and the plot area is styled with a light gray background.

Fork of Rahul

This example shows a bar chart of average salaries by job title, with tooltips displaying each job title and its corresponding salary on hover. The chart is implemented as a React application using D3.js v6, rendering SVG bars that change from steel blue to orange when the user mouses over them. The visualization loads data from a CSV file containing job titles and salaries, then uses `d3.scaleBand` and `d3.scaleLinear` to map the data to bar positions and heights. It also includes rotated axis labels, a chart title, and axis labels for salary and job title.