PercentilesTrends: Basic Usage

PercentilesTrends visualizes data trends over time or categories, using areas and lines to represent percentile ranges and specific percentile trends.

It requires `items` data (an array of objects with keys and percentile values), a `config` object to define which percentile ranges (areas) and trends (lines) to display, and an `areaLowKeyToColor` function to assign colors to each area.

Usage

<PercentilesTrends
  {areaLowKeyToColor}
  {geometry}
  config={{areas: percentileAreas, trends: ['avg']}}
  items={percentilesTrendsItems}
/>

Props

areaLowKeyToColor

    ▶ ƒ scale(d)
    • length: 1
    • name: "scale"
    • prototype: { constructor: ƒ }
    • [[Function]]: function scale(d) { let i = index.get(d); if (i === undefined) { if (unknown !== implicit) return unknown; index.set(d, i = domain.push(d) - 1); } return range[i % range.length]; }
    • [[Prototype]]: ƒ ()

config

    ▶ { areas: Array(8) ,trends: Array(1) }
    • areas: (8) [ Array(2) ,Array(2) ,Array(2) ,Array(2) ,Array(2) , … ]
    • trends: (1) [ "avg" ]

geometry

    ▶ { safetyBottom: 50 ,safetyLeft: 50 ,safetyRight: 50 ,safetyTop: 50 }
    • safetyBottom: 50
    • safetyLeft: 50
    • safetyRight: 50
    • safetyTop: 50

items

    ▶ (14) [ {…} ,{…} ,{…} ,{…} ,{…} , … ]
    • 0: { key: "2010-01" ,values: {…} }
    • 1: { key: "2011-01" ,values: {…} }
    • 2: { key: "2012-01" ,values: {…} }
    • 3: { key: "2013-01" ,values: {…} }
    • 4: { key: "2014-01" ,values: {…} }
    • 5: { key: "2015-01" ,values: {…} }
    • 6: { key: "2016-01" ,values: {…} }
    • 7: { key: "2017-01" ,values: {…} }
    • 8: { key: "2018-01" ,values: {…} }
    • 9: { key: "2019-01" ,values: {…} }
    • 10: { key: "2020-01" ,values: {…} }
    • 11: { key: "2021-01" ,values: {…} }
    • 12: { key: "2022-01" ,values: {…} }
    • 13: { key: "2023-01" ,values: {…} }
    • length: 14