Hirsh Gupta

@hgupta94·11 public vizzes

Making a Multiline Chart

Eight weeks of simulated playoff power rankings are shown as eight colored, semi-transparent lines, one per team, across the x-axis (week) and y-axis (power rank). Hovering over a line thickens it and increases its opacity. Built with D3 v5, it uses `d3.line()`, `d3.nest()`, `d3.scaleOrdinal()`, and a custom legend from `d3.axisLeft()` calls, reading the `data.csv` file. Lines are drawn as SVG paths, and hover effects use D3's `.transition()` for animation.

Jun 19, 2025

Loading thumbnail…

Making a Multiline Chart 2

A multiline chart displays weekly power scores for eight teams across eight weeks, with a clickable legend highlighting team names and interactive hover effects that thicken lines. The visualization is built with D3 v5, using SVG rendering, `d3.nest()` to group data by team, `d3.line()` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. It includes axis labels, a dashed baseline, and a filterable legend with custom click handlers.

Sep 2, 2021

Loading thumbnail…

Fork of Team Efficiency Scatter Plot

This scatter plot displays team efficiency by comparing optimal hours per week against the difference between actual and optimal hours. Each circle represents a team, colored by team name, with axes labeled "Optimal per Week" and "Difference per Week." The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.nest` to group data, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Data comes from a CSV file loaded via `d3.csv`, with a title overlaid on the plot.

Jul 14, 2021

Loading thumbnail…

Team Efficiency Scatter Plot

This scatter plot shows the relationship between team efficiency and optimal weekly output, with one circle per team positioned by efficiency on the x-axis and optimal hours per week on the y-axis. The code uses D3 v5 APIs including `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.nest` to group the data by team name. Each circle is colored using a categorical color scale based on the team’s position. Axes include gridlines and labels, while the data comes from a CSV file parsed with `d3.csv`.

Jul 14, 2021

Loading thumbnail…

Fork of Team Efficiency Scatter Plot

This fork of a team efficiency scatter plot uses D3 v5 to visualize the relationship between actual and optimal performance metrics for different team positions. The SVG visualization displays circular data points positioned by their x and y coordinates, with varying radii and colors representing different team members. The chart includes axis labels and tick marks styled with CSS, though the code reveals it is currently using placeholder data and D3's older linear scale API rather than the actual CSV data provided.

Jul 13, 2021

Loading thumbnail…

Fork of Bowl of Fruit

A minimal line chart displays temperature readings from the `data.csv` file, showing a time series of temperature fluctuations across several days. The visualization uses a linear scale to map the data values to pixel positions along the x-axis, with an axis generated by `d3.axisBottom`. The SVG is created and appended using D3's selection methods, and the chart is rendered without any additional styling or tooltips.

Mar 16, 2021

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes fantasy football team efficiencies by comparing actual versus optimal weekly performance across different positions. A dropdown menu lets users filter data by team or position, with each team represented as a colored circle. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleLinear for axes and d3.csv to load the dataset. Hover interaction is not implemented, but the menu-driven filtering updates the scatter plot dynamically.

Mar 16, 2021

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart uses SVG rectangles to display final power scores for ten teams, with team names on the y-axis and score values on the x-axis. The chart, built with d3.scaleBand and d3.scaleLinear, includes axis labels, gridlines, and a title. Underlying data is loaded from a CSV file via d3.csv, with numerical fields coerced to numbers. Formatting is applied through CSS, and axes are customized using d3.axisLeft and d3.axisBottom with tick lines removed and manually appended labels.

Mar 4, 2021

Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows five apples animated with D3 transitions, responding to mouseover by highlighting the selected fruit with a black outline. Over time, apples are consumed and one transforms into a lemon, changing both color and radius via d3.ordinal scales. The visualization uses d3 v5 with SVG rendering, binding data by unique ID to handle enter, update, and exit selections smoothly. Temperature timestamps from a CSV file drive the timing of these fruit transformations.

Mar 3, 2021

Loading thumbnail…

Line Chart

This example shows a week of temperature readings in San Francisco using a line chart. The chart displays temperature on the y-axis and time on the x-axis, with a smooth, filled area beneath the line to emphasize the temperature variation over the period. The data is loaded from a CSV file using `d3.csv`, and the visualization is rendered as SVG with D3 v5. The code uses `d3.scaleTime` and `d3.scaleLinear` to map the data, `d3.axisBottom` and `d3.axisLeft` for the axes, and `d3.area` with a `curveBasis` to generate the smoothed area path.

Mar 3, 2021

Loading thumbnail…

Making a Scatter Plot

A scatter plot displays final power scores for ten teams, with each team’s score plotted along the x-axis and team names along the y-axis. The chart uses a linear scale for scores and a point scale for categorical team labels, with grid lines extending from both axes. D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` methods render the SVG, while styled circles, a title, and an axis label clarify the data.

Mar 3, 2021