Satish Chandra Gupta

@satishchandra538·3 public vizzes

环境性能数据随时间变化线性图

This visualization shows how three system performance metrics—I/O, network, and CPU—vary over a sequence of 46 timestamps. Three smooth curved lines, generated with the D3 `line()` generator and a monotone X curve, represent each metric across the timeline, with colored dots marking individual data points. The chart uses `d3.scaleLinear` for both axes and renders to SVG. The code computes the line paths and point positions from a CSV file and includes hover tooltips that display the exact timestamp and percentage value for each point.

May 31, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for different global regions, with multiple lines plotted on a time-series chart. The legend and color scale indicate which line corresponds to which region. The code uses d3.csv to load UN population data, d3.nest to group by region, d3.line with curveBasis for smooth paths, and d3.scaleTime and d3.scaleLinear for axes. A custom colorLegend module renders the interactive legend using SVG circles and text.

May 19, 2020

Loading thumbnail…

Total Disbursements Per Year by School

A dropdown menu lets viewers select a Columbia University school from the Food Pantry dataset, displaying monthly disbursement counts from May 2016 through April 2020 as colored lines per year. The d3.v5 line chart uses `scaleTime`, `scaleLinear`, `nest()` to group data by year, and `transition` to animate path updates, with a `d3.scaleOrdinal` color legend and SVG rendering.

May 19, 2020