diff --git a/packages/vx-demo/pages/arcs.js b/packages/vx-demo/pages/arcs.js
index 80f9100a4..664e78030 100644
--- a/packages/vx-demo/pages/arcs.js
+++ b/packages/vx-demo/pages/arcs.js
@@ -16,196 +16,87 @@ export default () => {
       title="Arcs"
     >
       {`import React from 'react';
-import { AreaClosed, Line, Bar } from '@vx/shape';
-import { appleStock } from '@vx/mock-data';
-import { curveMonotoneX } from '@vx/curve';
-import { LinearGradient } from '@vx/gradient';
-import { GridRows, GridColumns } from '@vx/grid';
-import { scaleTime, scaleLinear } from '@vx/scale';
-import { withTooltip, Tooltip } from '@vx/tooltip';
-import { localPoint } from '@vx/event';
-import { extent, max, bisector } from 'd3-array';
-import { timeFormat } from 'd3-time-format';
+import { Arc } from '@vx/shape';
+import { Group } from '@vx/group';
+import { GradientPinkBlue } from '@vx/gradient';
+import { letterFrequency, browserUsage } from '@vx/mock-data';
 
-const stock = appleStock.slice(800);
-const formatDate = timeFormat("%b %d, '%y");
+const letters = letterFrequency.slice(0, 4);
+const browsers = Object.keys(browserUsage[0])
+  .filter(k => k !== "date")
+  .map(k => ({ label: k, usage: browserUsage[0][k] }));
 
-// accessors
-const xStock = d => new Date(d.date);
-const yStock = d => d.close;
-const bisectDate = bisector(d => new Date(d.date)).left;
-
-class Area extends React.Component {
-  render() {
-    const {
-      width,
-      height,
-      margin,
-      showTooltip,
-      hideTooltip,
-      tooltipData,
-      tooltipTop,
-      tooltipLeft,
-      events,
-    } = this.props;
-    if (width < 10) return null;
-
-    // bounds
-    const xMax = width - margin.left - margin.right;
-    const yMax = height - margin.top - margin.bottom;
-
-    // scales
-    const xScale = scaleTime({
-      range: [0, xMax],
-      domain: extent(stock, xStock),
-    });
-    const yScale = scaleLinear({
-      range: [yMax, 0],
-      domain: [0, max(stock, yStock) + yMax / 3],
-      nice: true,
-    });
-
-    return (
-      <div>
-        <svg ref={s => (this.svg = s)} width={width} height={height}>
-          <rect
-            x={0}
-            y={0}
-            width={width}
-            height={height}
-            fill="#32deaa"
-            rx={14}
-          />
-          <defs>
-            <linearGradient
-              id="gradient"
-              x1="0%"
-              y1="0%"
-              x2="0%"
-              y2="100%"
-            >
-              <stop offset="0%" stopColor="#FFFFFF" stopOpacity={1} />
-              <stop
-                offset="100%"
-                stopColor="#FFFFFF"
-                stopOpacity={0.2}
-              />
-            </linearGradient>
-          </defs>
-          <GridRows
-            lineStyle={{ pointerEvents: 'none' }}
-            scale={yScale}
-            width={xMax}
-            strokeDasharray="2,2"
-            stroke="rgba(255,255,255,0.3)"
-          />
-          <GridColumns
-            lineStyle={{ pointerEvents: 'none' }}
-            scale={xScale}
-            height={yMax}
-            strokeDasharray="2,2"
-            stroke="rgba(255,255,255,0.3)"
-          />
-          <AreaClosed
-            data={stock}
-            xScale={xScale}
-            yScale={yScale}
-            x={xStock}
-            y={yStock}
-            strokeWidth={1}
-            stroke={'url(#gradient)'}
-            fill={'url(#gradient)'}
-            curve={curveMonotoneX}
-          />
-          <Bar
-            x={0}
-            y={0}
-            width={width}
-            height={height}
-            fill="transparent"
-            rx={14}
-            data={stock}
-            onMouseLeave={data => event => hideTooltip()}
-            onMouseMove={data => event => {
-              const { x } = localPoint(this.svg, event);
-              const x0 = xScale.invert(x);
-              const index = bisectDate(data, x0, 1);
-              const d0 = data[index - 1];
-              const d1 = data[index];
-              let d = d0;
-              if (d1 && d1.date) {
-                d =
-                  x0 - xStock(d0.date) > xStock(d1.date) - x0
-                    ? d1
-                    : d0;
-              }
-              showTooltip({
-                tooltipData: d,
-                tooltipLeft: x,
-                tooltipTop: yScale(d.close),
-              });
-            }}
-          />
-          {tooltipData &&
-            <g>
-              <Line
-                from={{ x: tooltipLeft, y: 0 }}
-                to={{ x: tooltipLeft, y: yMax }}
-                stroke="rgba(92, 119, 235, 1.000)"
-                strokeWidth={2}
-                style={{ pointerEvents: 'none' }}
-                strokeDasharray="2,2"
-              />
-              <circle
-                cx={tooltipLeft}
-                cy={tooltipTop + 1}
-                r={4}
-                fill="black"
-                fillOpacity={0.1}
-                stroke="black"
-                strokeOpacity={0.1}
-                strokeWidth={2}
-                style={{ pointerEvents: 'none' }}
-              />
-              <circle
-                cx={tooltipLeft}
-                cy={tooltipTop}
-                r={4}
-                fill="rgba(92, 119, 235, 1.000)"
-                stroke="white"
-                strokeWidth={2}
-                style={{ pointerEvents: 'none' }}
-              />
-            </g>}
-        </svg>
-        {tooltipData &&
-          <div>
-            <Tooltip
-              top={tooltipTop - 12}
-              left={tooltipLeft + 12}
-              style={{
-                backgroundColor: 'rgba(92, 119, 235, 1.000)',
-                color: 'white',
-              }}
-            >
-              {\`\$\${yStock(tooltipData)}\`}
-            </Tooltip>
-            <Tooltip
-              top={yMax - 14}
-              left={tooltipLeft}
-              style={{
-                transform: 'translateX(-50%)',
-              }}
-            >
-              {formatDate(xStock(tooltipData))}
-            </Tooltip>
-          </div>}
-      </div>
-    );
-  }
+function Label({ x, y, children }) {
+  return (
+    <text
+      fill="white"
+      textAnchor="middle"
+      x={x}
+      y={y}
+      dy=".33em"
+      fontSize={9}
+    >
+      {children}
+    </text>
+  );
 }
 
-export default withTooltip(Area);`}
+export default ({
+  width,
+  height,
+  events = false,
+  margin = {
+    top: 30,
+    left: 20,
+    right: 20,
+    bottom: 110,
+  }
+}) => {
+  if (width < 10) return null;
+  const radius = Math.min(width, height) / 2;
+  return (
+    <svg width={width} height={height}>
+      <GradientPinkBlue id="gradients" />
+      <rect
+        x={0}
+        y={0}
+        rx={14}
+        width={width}
+        height={height}
+        fill="url('#gradients')"
+      />
+      <Group top={height / 2 - margin.top} left={width / 2}>
+        <Arc
+          data={browsers}
+          pieValue={d => d.usage}
+          outerRadius={radius - 80}
+          innerRadius={radius - 120}
+          fill="white"
+          fillOpacity={d => 1 / (d.index + 2) }
+          cornerRadius={3}
+          padAngle={0}
+          centroid={(centroid, arc) => {
+            const [x, y] = centroid;
+            const { startAngle, endAngle } = arc;
+            if (endAngle - startAngle < .1) return null;
+            return <Label x={x} y={y}>{arc.data.label}</Label>;
+          }}
+        />
+        <Arc
+          data={letters}
+          pieValue={d => d.frequency}
+          outerRadius={radius - 135}
+          fill="black"
+          fillOpacity={d => 1 / (d.index + 2) }
+          centroid={(centroid, arc) => {
+            const [x, y] = centroid;
+            return <Label x={x} y={y}>{arc.data.letter}</Label>;
+          }}
+        />
+      </Group>
+    </svg>
+  );
+}`}
     </Show>
   );
 };
diff --git a/packages/vx-demo/pages/areas.js b/packages/vx-demo/pages/areas.js
index 77b2aadf8..51c58a38a 100644
--- a/packages/vx-demo/pages/areas.js
+++ b/packages/vx-demo/pages/areas.js
@@ -4,89 +4,207 @@ import Areas from '../components/tiles/area';
 
 export default () => {
   return (
-    <Show component={Areas} title="Areas" margin={{
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    }}>
-{`import React from 'react';
-import { AreaClosed } from '@vx/shape';
-import { Rows, Columns } from '@vx/grid';
-import { curveMonotoneX } from '@vx/curve';
+    <Show
+      component={Areas}
+      title="Areas"
+      margin={{
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}
+    >
+      {`import React from 'react';
+import { AreaClosed, Line, Bar } from '@vx/shape';
 import { appleStock } from '@vx/mock-data';
+import { curveMonotoneX } from '@vx/curve';
 import { LinearGradient } from '@vx/gradient';
+import { GridRows, GridColumns } from '@vx/grid';
 import { scaleTime, scaleLinear } from '@vx/scale';
-import { extent, max } from 'd3-array';
+import { withTooltip, Tooltip } from '@vx/tooltip';
+import { localPoint } from '@vx/event';
+import { extent, max, bisector } from 'd3-array';
+import { timeFormat } from 'd3-time-format';
 
 const stock = appleStock.slice(800);
+const formatDate = timeFormat("%b %d, '%y");
 
 // accessors
 const xStock = d => new Date(d.date);
 const yStock = d => d.close;
+const bisectDate = bisector(d => new Date(d.date)).left;
 
-export default ({
-  width,
-  height,
-  margin,
-}) => {
+class Area extends React.Component {
+  render() {
+    const {
+      width,
+      height,
+      margin,
+      showTooltip,
+      hideTooltip,
+      tooltipData,
+      tooltipTop,
+      tooltipLeft,
+      events,
+    } = this.props;
+    if (width < 10) return null;
 
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
+    // bounds
+    const xMax = width - margin.left - margin.right;
+    const yMax = height - margin.top - margin.bottom;
 
-  // scales
-  const xScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(stock, xStock),
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-    domain: [0, max(stock, yStock) + yMax / 3],
-    nice: true,
-  });
+    // scales
+    const xScale = scaleTime({
+      range: [0, xMax],
+      domain: extent(stock, xStock),
+    });
+    const yScale = scaleLinear({
+      range: [yMax, 0],
+      domain: [0, max(stock, yStock) + yMax / 3],
+      nice: true,
+    });
 
-  return (
-    <svg width={width} height={height}>
-      <rect
-        x={0}
-        y={0}
-        width={width}
-        height={height}
-        fill="#32deaa"
-        rx={14}
-      />
-      <LinearGradient
-        id={'gradient'}
-        from='#ffffff'
-        to='rgba(255,255,255,0.2)'
-      />
-      <Rows
-        scale={yScale}
-        width={xMax}
-        strokeDasharray='2,2'
-        stroke='rgba(255,255,255,0.3)'
-      />
-      <Columns
-        scale={xScale}
-        height={yMax}
-        strokeDasharray='2,2'
-        stroke='rgba(255,255,255,0.3)'
-      />
-      <AreaClosed
-        data={stock}
-        xScale={xScale}
-        yScale={yScale}
-        x={xStock}
-        y={yStock}
-        strokeWidth={1}
-        stroke={'url(#gradient)'}
-        fill={'url(#gradient)'}
-        curve={curveMonotoneX}
-      />
-    </svg>
-  );
-}`}
+    return (
+      <div>
+        <svg ref={s => (this.svg = s)} width={width} height={height}>
+          <rect
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fill="#32deaa"
+            rx={14}
+          />
+          <defs>
+            <linearGradient
+              id="gradient"
+              x1="0%"
+              y1="0%"
+              x2="0%"
+              y2="100%"
+            >
+              <stop offset="0%" stopColor="#FFFFFF" stopOpacity={1} />
+              <stop
+                offset="100%"
+                stopColor="#FFFFFF"
+                stopOpacity={0.2}
+              />
+            </linearGradient>
+          </defs>
+          <GridRows
+            lineStyle={{ pointerEvents: 'none' }}
+            scale={yScale}
+            width={xMax}
+            strokeDasharray="2,2"
+            stroke="rgba(255,255,255,0.3)"
+          />
+          <GridColumns
+            lineStyle={{ pointerEvents: 'none' }}
+            scale={xScale}
+            height={yMax}
+            strokeDasharray="2,2"
+            stroke="rgba(255,255,255,0.3)"
+          />
+          <AreaClosed
+            data={stock}
+            xScale={xScale}
+            yScale={yScale}
+            x={xStock}
+            y={yStock}
+            strokeWidth={1}
+            stroke={'url(#gradient)'}
+            fill={'url(#gradient)'}
+            curve={curveMonotoneX}
+          />
+          <Bar
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fill="transparent"
+            rx={14}
+            data={stock}
+            onMouseLeave={data => event => hideTooltip()}
+            onMouseMove={data => event => {
+              const { x } = localPoint(this.svg, event);
+              const x0 = xScale.invert(x);
+              const index = bisectDate(data, x0, 1);
+              const d0 = data[index - 1];
+              const d1 = data[index];
+              let d = d0;
+              if (d1 && d1.date) {
+                d =
+                  x0 - xStock(d0.date) > xStock(d1.date) - x0
+                    ? d1
+                    : d0;
+              }
+              showTooltip({
+                tooltipData: d,
+                tooltipLeft: x,
+                tooltipTop: yScale(d.close),
+              });
+            }}
+          />
+          {tooltipData &&
+            <g>
+              <Line
+                from={{ x: tooltipLeft, y: 0 }}
+                to={{ x: tooltipLeft, y: yMax }}
+                stroke="rgba(92, 119, 235, 1.000)"
+                strokeWidth={2}
+                style={{ pointerEvents: 'none' }}
+                strokeDasharray="2,2"
+              />
+              <circle
+                cx={tooltipLeft}
+                cy={tooltipTop + 1}
+                r={4}
+                fill="black"
+                fillOpacity={0.1}
+                stroke="black"
+                strokeOpacity={0.1}
+                strokeWidth={2}
+                style={{ pointerEvents: 'none' }}
+              />
+              <circle
+                cx={tooltipLeft}
+                cy={tooltipTop}
+                r={4}
+                fill="rgba(92, 119, 235, 1.000)"
+                stroke="white"
+                strokeWidth={2}
+                style={{ pointerEvents: 'none' }}
+              />
+            </g>}
+        </svg>
+        {tooltipData &&
+          <div>
+            <Tooltip
+              top={tooltipTop - 12}
+              left={tooltipLeft + 12}
+              style={{
+                backgroundColor: 'rgba(92, 119, 235, 1.000)',
+                color: 'white',
+              }}
+            >
+              {\`\$\${yStock(tooltipData)}\`}
+            </Tooltip>
+            <Tooltip
+              top={yMax - 14}
+              left={tooltipLeft}
+              style={{
+                transform: 'translateX(-50%)',
+              }}
+            >
+              {formatDate(xStock(tooltipData))}
+            </Tooltip>
+          </div>}
+      </div>
+    );
+  }
+}
+
+export default withTooltip(Area);`}
     </Show>
   );
-}
+};