Adds Grouping data (with hexbin, histogram) in Charts (#560)

* add Grouping data section with hexbin, histogram

* adds Grouping data page to sidebar in Charts

* minor fixes and update hexbin chart to use dot mark

* Apply suggestions from code review

Co-authored-by: Philippe Rivière <[email protected]>

---------

Co-authored-by: Allison Horst <[email protected]>
Co-authored-by: Philippe Rivière <[email protected]>

Author: 3 people

docs/charts/grouping-data.md

@@ -0,0 +1,29 @@
+# Grouping data
+
+[Observable Plot](https://observablehq.com/plot/) provides a number of [transforms](https://observablehq.com/plot/transforms/) that help you perform common data transformations. The [group](https://observablehq.com/plot/transforms/group) and [bin](https://observablehq.com/plot/transforms/bin) transforms (for categorical and quantitative dimensions, respectively) group data into discrete bins. A reducer (_e.g._ sum, count, or mean) can then be applied to visualize summary values by bin. 
+
+## Hexbin chart 
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a hexbin chart using the [dot mark](https://observablehq.com/plot/marks/dot) and the [hexbin transform](https://observablehq.com/plot/transforms/hexbin). 
+
+```js echo
+Plot.plot({
+  color: {scheme: "ylgnbu"},
+  marks: [
+    Plot.dot(olympians, Plot.hexbin({fill: "sum"}, {x: "weight", y: "height"}))
+  ]
+})
+```
+
+## Histogram
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a histogram using the [rect mark](https://observablehq.com/plot/marks/rect) and the [bin transform](https://observablehq.com/plot/transforms/bin). 
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
+    Plot.ruleY([0])
+  ]
+})
+```

docs/charts/hexbin.md

@@ -43,9 +43,9 @@ export default {
         {name: "Cell", path: "/charts/cell"},
         {name: "Dot", path: "/charts/dot"},
         {name: "Facets", path: "/charts/facets"},
-        {name: "Hexbin", path: "/charts/hexbin"},
         {name: "Line", path: "/charts/line"},
         {name: "Tick", path: "/charts/tick"},
+        {name: "Grouping data", path: "/charts/grouping-data"}
       ]
     },
     {