@cdc/chart 4.22.11 → 4.23.2

package/examples/scatterplot-continuous.csv

@@ -0,0 +1,17 @@
+x,y1,y2,y3,y4
+1,8,37,72,82
+2,2,30,75,83
+3,15,42,51,95
+4,10,38,61,96
+5,1,38,66,86
+60,6,37,70,85
+10,19,47,59,91
+24,18,32,68,89
+3,7,38,74,89
+26,10,39,56,91
+42,16,38,55,76
+32,20,46,52,94
+11,9,41,57,86
+22,10,47,56,80
+73,1,36,71,94
+23,13,30,66,78

package/examples/{private/yaxis-test.json → scatterplot.json}

@@ -1,6 +1,6 @@
 {
   "type": "chart",
-  "title": "Combo Chart (With Right Axis)",
+  "title": "Scatter Plot",
   "theme": "theme-blue",
   "animate": false,
   "fontSize": "medium",
@@ -18,55 +18,55 @@
     "right": 5
   },
   "yAxis": {
+    "dataKey": "y",
     "hideAxis": false,
     "displayNumbersOnBar": false,
     "hideLabel": false,
     "hideTicks": false,
-    "gridLines": false,
+    "size": 50,
+    "gridLines": true,
     "min": "",
     "max": "",
-    "rightHideAxis": false,
-    "rightAxisSize": "88",
-    "rightLabelOffsetSize": "80",
-    "label": "Left Axis (Value)",
-    "rightSeries": "tot_tests_18_older",
-    "rightLabel": "Right Axis (Value)",
-    "rightHideLabel": false,
-    "rightHideTicks": false,
-    "rightNumTicks": "6",
-    "rightAxisLabelColor": "purple",
-    "rightAxisTickLabelColor": "purple",
-    "rightAxisTickColor": "purple",
-    "labelColor": "orange",
-    "tickLabelColor": "orange",
-    "tickColor": "orange"
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
+    "label": "Y Axis"
   },
+  "boxplot": [],
   "topAxis": {
-    "hasLine": true
+    "hasLine": false
   },
   "barThickness": 0.35,
   "barHeight": 25,
   "height": 300,
   "xAxis": {
-    "type": "date",
+    "type": "continuous",
     "hideAxis": false,
     "hideLabel": false,
     "hideTicks": false,
-    "size": "100",
-    "tickRotation": 30,
+    "size": 75,
+    "tickRotation": 0,
     "min": "",
     "max": "",
-    "label": "Date/Category Axis",
-    "dataKey": "week",
-    "dateParseFormat": "%m/%d/%Y",
-    "dateDisplayFormat": "%m/%d/%Y",
-    "labelColor": "blue",
-    "tickLabelColor": "blue",
-    "tickColor": "blue"
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
+    "dataKey": "x",
+    "label": "X Axis"
   },
   "table": {
     "label": "Data Table",
-    "expanded": false,
+    "expanded": true,
     "limitHeight": false,
     "height": "",
     "caption": "",
@@ -76,6 +76,7 @@
   "legend": {
     "behavior": "isolate",
     "position": "right",
+    "singleRow": false,
     "colorCode": "",
     "reverseLabelOrder": false,
     "description": "",
@@ -83,21 +84,20 @@
     "dynamicLegendDefaultText": "Show All",
     "dynamicLegendItemLimit": 5,
     "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
-    "dynamicLegendChartMessage": "Select Options from the Legend",
-    "hide": false
+    "dynamicLegendChartMessage": "Select Options from the Legend"
   },
   "exclusions": {
     "active": false,
     "keys": []
   },
-  "palette": "qualitative-bold",
+  "palette": "qualitative1",
   "isPaletteReversed": false,
   "labels": false,
   "dataFormat": {
     "commas": false,
     "prefix": "",
     "suffix": "",
-    "roundTo": "0"
+    "useFormat": false
   },
   "confidenceKeys": {},
   "visual": {
@@ -105,29 +105,32 @@
     "accent": true,
     "background": true
   },
-  "dataUrl": "/examples/private/yaxis.json",
-  "visualizationType": "Combo",
+  "dataUrl": "/examples/scatterplot-continuous.csv",
+  "visualizationType": "Scatter Plot",
+  "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false,
+    "singleRow": false,
+    "xKey": "Group_Category",
+    "valueKey": "Value"
+  },
   "series": [
     {
-      "dataKey": "tot_tests_0_12",
-      "type": "Bar",
-      "axis": "Left"
+      "dataKey": "y1",
+      "type": "Bar"
     },
     {
-      "dataKey": "tot_tests_13_17",
-      "type": "Bar",
-      "axis": "Left"
+      "dataKey": "y2",
+      "type": "Bar"
     },
     {
-      "dataKey": "tot_tests_18_older",
-      "type": "Line",
-      "axis": "Left"
+      "dataKey": "y3",
+      "type": "Bar"
     },
     {
-      "dataKey": "0_12_positivity_rate",
-      "type": "Line",
-      "axis": "Right"
+      "dataKey": "y4",
+      "type": "Bar"
     }
-  ],
-  "dataCutoff": "0.5"
-}
+  ]
+}

package/examples/sparkline-chart-nonnumeric.json

@@ -0,0 +1,76 @@
+{
+  "type": "chart",
+  "title": "Example Spark Line",
+  "theme": "theme-blue",
+  "fontSize": "medium",
+  "height": "375",
+  "compact": true,
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "size": "75",
+    "gridLines": false,
+    "label": "Y-Axis Example Label",
+    "numTicks": "9"
+  },
+  "barThickness": 0.35,
+  "xAxis": {
+    "size": "77",
+    "tickRotation": "25",
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "type": "date",
+    "dateParseFormat": "%d/%m/%Y",
+    "dateDisplayFormat": "%d/%m/%Y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "download": true
+  },
+  "legend": {
+    "behavior": "isolate",
+    "position": "right",
+    "label": "Type of Data"
+  },
+  "palette": "qualitative-bold",
+  "labels": false,
+  "dataFormat": {},
+  "confidenceKeys": {},
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "44"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "25"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "NA"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "75"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "100"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "50"
+    }
+  ],
+  "visualizationType": "Spark Line",
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar"
+    }
+  ],
+  "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."
+}

package/examples/stacked-vertical-bar-example-negative.json

@@ -0,0 +1,154 @@
+{
+  "title": "Example Stacked Vertical",
+  "visualizationType": "Bar",
+  "visualizationSubType": "stacked",
+  "orientation": "vertical",
+  "animate": true,
+  "animateReplay": true,
+  "yAxis": {
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": false
+  },
+  "barThickness": 0.35,
+  "height": 300,
+  "xAxis": {
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "dataKey": "Date"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "show": true
+  },
+  "legend": {
+    "behavior": "isolate",
+    "position": "right",
+    "reverseLabelOrder": false
+  },
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar"
+    }
+  ],
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "90",
+      "Data 2": "NA",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "40",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "200",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "50",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250",
+      "Data 7": "80",
+      "Data 8": "350",
+      "Data 9": "300",
+      "Data 10": "150",
+      "Data 11": "130",
+      "Data 12": "100"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100",
+      "Data 7": "120",
+      "Data 8": "160",
+      "Data 9": "230",
+      "Data 10": "180",
+      "Data 11": "160",
+      "Data 12": "220"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "90",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "7/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220",
+      "Data 7": "80",
+      "Data 8": "350",
+      "Data 9": "300",
+      "Data 10": "150",
+      "Data 11": "130",
+      "Data 12": "100"
+    }
+    
+  ]
+}

package/examples/stacked-vertical-bar-example-nonnumerics.json

@@ -0,0 +1,154 @@
+{
+  "title": "Example Stacked Vertical",
+  "visualizationType": "Bar",
+  "visualizationSubType": "stacked",
+  "orientation": "vertical",
+  "animate": true,
+  "animateReplay": true,
+  "yAxis": {
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": false
+  },
+  "barThickness": 0.35,
+  "height": 300,
+  "xAxis": {
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "dataKey": "Date"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "show": true
+  },
+  "legend": {
+    "behavior": "isolate",
+    "position": "right",
+    "reverseLabelOrder": false
+  },
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar"
+    }
+  ],
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "90",
+      "Data 2": "NA",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "40",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "200",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "50",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250",
+      "Data 7": "80",
+      "Data 8": "350",
+      "Data 9": "300",
+      "Data 10": "150",
+      "Data 11": "130",
+      "Data 12": "100"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100",
+      "Data 7": "120",
+      "Data 8": "160",
+      "Data 9": "230",
+      "Data 10": "180",
+      "Data 11": "160",
+      "Data 12": "220"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "90",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "7/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220",
+      "Data 7": "80",
+      "Data 8": "350",
+      "Data 9": "300",
+      "Data 10": "150",
+      "Data 11": "130",
+      "Data 12": "100"
+    }
+    
+  ]
+}

package/{src/index.html → index.html}

@@ -28,40 +28,47 @@
       <option value="Hispanic or Latino">Test 2</option>
     </select> -->
 
-  <div class="react-container" data-config="/examples/private/yaxis-test.json"></div>
   <!-- <div class="react-container" data-config="/examples/dynamic-legends.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div>-->
-  <!-- <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div>-->
+  <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
-  <!--<div class="react-container" data-config="/examples/case-rate-example-config.json"></div>-->
+  <!-- <div class="react-container" data-config="/examples/case-rate-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/private/textelements.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/private/example-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div>  -->
   <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
 
+  <!-- NONNUMERIC TESTS -->
+  <!-- <div class="react-container" data-config="/examples/planet-pie-example-config-nonnumeric.json"></div> -->
+  <div class="react-container" data-config="/examples/example-combo-bar-nonnumeric.json"></div>
+  <!-- <div class="react-container" data-config="/examples/example-bar-chart-nonnumeric.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/line-chart-nonnumeric.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/sparkline-chart-nonnumeric.json"></div> -->
+
   <!-- HORIZONTAL BAR CHARTS -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
 
   <!-- VERTICAL BAR CHARTS -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
+  <!--  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/stacked-vertical-bar-example-nonnumerics.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-with-confidence.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/box-plot.json"></div> -->
 
-  <!-- LOLLIPOP CHARTS -->
-  <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
-
-  <!-- PAIRED BAR CHARTS -->
-  <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
+    <!-- Paired bar Chart  -->
+    <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 </body>
 
-</html>
+<script type="module" src="./src/index.jsx"></script>
+</body>
+
+</html>