diff --git a/packages/vx-demo/components/gallery.js b/packages/vx-demo/components/gallery.js
index b91fb09dd..a72c49662 100644
--- a/packages/vx-demo/components/gallery.js
+++ b/packages/vx-demo/components/gallery.js
@@ -676,7 +676,8 @@ export default class Gallery extends React.Component {
                 >
                   <div className="title">Radar</div>
                   <div className="description">
-                    <pre>{`<Radar />`}</pre>
+                    <pre
+                    >{`<Shape.Line /> + <Shape.LineRadial />`}</pre>
                   </div>
                 </div>
               </div>
@@ -692,7 +693,10 @@ export default class Gallery extends React.Component {
                 }}
               >
                 <div className="image">
-                  <BarStackHorizontal width={t24[0]} height={t24[1]} />
+                  <BarStackHorizontal
+                    width={t24[0]}
+                    height={t24[1]}
+                  />
                 </div>
                 <div
                   className="details"
@@ -705,9 +709,8 @@ export default class Gallery extends React.Component {
                 </div>
               </div>
             </Link>
-          </Tilt>          
-          {<div className="gallery-item placeholder" />}
-          {<div className="gallery-item placeholder" />}
+          </Tilt>
+          <div className="gallery-item placeholder" />
         </div>
 
         <div>
diff --git a/packages/vx-demo/components/tiles/barstackhorizontal.js b/packages/vx-demo/components/tiles/barstackhorizontal.js
index b97a94ba8..d53ad42e7 100644
--- a/packages/vx-demo/components/tiles/barstackhorizontal.js
+++ b/packages/vx-demo/components/tiles/barstackhorizontal.js
@@ -9,6 +9,21 @@ import { withTooltip, Tooltip } from '@vx/tooltip';
 import { LegendOrdinal } from '@vx/legend';
 import { extent, max } from 'd3-array';
 
+const data = cityTemperature.slice(0, 12);
+const keys = Object.keys(data[0]).filter(d => d !== 'date');
+const parseDate = timeParse('%Y%m%d');
+const format = timeFormat('%b %d');
+const formatDate = date => format(parseDate(date));
+
+const totals = data.reduce((ret, cur) => {
+  const t = keys.reduce((dailyTotal, k) => {
+    dailyTotal += +cur[k];
+    return dailyTotal;
+  }, 0);
+  ret.push(t);
+  return ret;
+}, []);
+
 export default withTooltip(
   ({
     width,
@@ -16,55 +31,42 @@ export default withTooltip(
     events = false,
     margin = {
       top: 40,
-      left: 0,
+      left: 50,
+      right: 40,
+      bottom: 100,
     },
     tooltipOpen,
     tooltipLeft,
     tooltipTop,
     tooltipData,
     hideTooltip,
-    showTooltip
+    showTooltip,
   }) => {
     if (width < 10) return null;
 
-    const data = cityTemperature.slice(0, 12);
-    const keys = Object.keys(data[0]).filter(d => d !== 'date');
-    const parseDate = timeParse('%Y%m%d');
-    const format = timeFormat('%b %d');
-    const formatDate = date => format(parseDate(date));
-    
     // accessors
     const y = d => d.date;
     const x = d => d.value;
-    
-    const totals = data.reduce((ret, cur) => {
-      const t = keys.reduce((dailyTotal, k) => {
-        dailyTotal += +cur[k];
-        return dailyTotal;
-      }, 0);
-      ret.push(t);
-      return ret;
-    }, []);
 
     // bounds
-    const xMax = width;
-    const yMax = height - margin.top - 100;
+    const xMax = width - margin.left - margin.right;
+    const yMax = height - margin.top - margin.bottom;
 
     // // scales
     const xScale = scaleLinear({
       rangeRound: [0, xMax],
-      domain: [0, max(totals)],      
-      nice: true,      
+      domain: [0, max(totals)],
+      nice: true,
     });
     const yScale = scaleBand({
       rangeRound: [yMax, 0],
-      domain: data.map(y),      
+      domain: data.map(y),
       padding: 0.2,
-      tickFormat: () => val => formatDate(val)
+      tickFormat: () => val => formatDate(val),
     });
     const zScale = scaleOrdinal({
       domain: keys,
-      range: ['#6c5efb', '#c998ff', '#a44afe']
+      range: ['#6c5efb', '#c998ff', '#a44afe'],
     });
 
     let tooltipTimeout;
@@ -77,63 +79,61 @@ export default withTooltip(
             y={0}
             width={width}
             height={height}
-            fill='#eaedff'
+            fill="#eaedff"
             rx={14}
           />
-          <BarStackHorizontal
-            top={margin.top}
-            left={50 + margin.left}
-            data={data}
-            keys={keys}
-            height={yMax}
-            y={y}
-            xScale={xScale}
-            yScale={yScale}
-            zScale={zScale}
-            onClick={data => event => {
-              if (!events) return;
-              alert(`clicked: ${JSON.stringify(data)}`);
-            }}
-            onMouseLeave={data => event => {
-              tooltipTimeout = setTimeout(() => {
-                hideTooltip();
-              }, 300);
-            }}
-            onMouseMove={data => event => {
-              if (tooltipTimeout) clearTimeout(tooltipTimeout);
-              showTooltip({
-                tooltipData: data,
-                tooltipTop: margin.top + yScale(y(data.data)),
-                tooltipLeft: margin.left + data.width + 75,
-              });
-            }}
-          />
-          <AxisLeft
-            hideAxisLine={true}
-            hideTicks={true}
-            scale={yScale}
-            top={margin.top}
-            left={margin.left + 30}
-            stroke="#a44afe"
-            tickStroke="#a44afe"
-            tickLabelProps={(value, index) => ({
-              fill: '#a44afe',
-              fontSize: 11,
-              textAnchor: 'middle',
-            })}
-          />
-          <AxisBottom
-            scale={xScale}
-            top={yMax + margin.top}
-            left={50 + margin.left}
-            stroke="#a44afe"
-            tickStroke="#a44afe"
-            tickLabelProps={(value, index) => ({
-              fill: '#a44afe',
-              fontSize: 11,
-              textAnchor: 'middle',
-            })}
-          />
+          <Group top={margin.top} left={margin.left}>
+            <BarStackHorizontal
+              data={data}
+              keys={keys}
+              height={yMax}
+              y={y}
+              xScale={xScale}
+              yScale={yScale}
+              zScale={zScale}
+              onClick={data => event => {
+                if (!events) return;
+                alert(`clicked: ${JSON.stringify(data)}`);
+              }}
+              onMouseLeave={data => event => {
+                tooltipTimeout = setTimeout(() => {
+                  hideTooltip();
+                }, 300);
+              }}
+              onMouseMove={data => event => {
+                if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                showTooltip({
+                  tooltipData: data,
+                  tooltipTop: margin.top + yScale(y(data.data)),
+                  tooltipLeft: margin.left + data.width + 75,
+                });
+              }}
+            />
+            <AxisLeft
+              hideAxisLine={true}
+              hideTicks={true}
+              scale={yScale}
+              stroke="#a44afe"
+              tickStroke="#a44afe"
+              tickLabelProps={(value, index) => ({
+                fill: '#a44afe',
+                fontSize: 11,
+                textAnchor: 'end',
+                dy: '0.33em',
+              })}
+            />
+            <AxisBottom
+              scale={xScale}
+              top={yMax}
+              stroke="#a44afe"
+              tickStroke="#a44afe"
+              tickLabelProps={(value, index) => ({
+                fill: '#a44afe',
+                fontSize: 11,
+                textAnchor: 'middle',
+              })}
+            />
+          </Group>
         </svg>
         <div
           style={{
@@ -142,7 +142,7 @@ export default withTooltip(
             width: '100%',
             display: 'flex',
             justifyContent: 'center',
-            fontSize: '14px'
+            fontSize: '14px',
           }}
         >
           <LegendOrdinal
@@ -151,31 +151,26 @@ export default withTooltip(
             labelMargin="0 15px 0 0"
           />
         </div>
-        {tooltipOpen &&
+        {tooltipOpen && (
           <Tooltip
             top={tooltipTop}
             left={tooltipLeft}
             style={{
               minWidth: 60,
               backgroundColor: 'rgba(0,0,0,0.9)',
-              color: 'white'
+              color: 'white',
             }}
           >
             <div style={{ color: zScale(tooltipData.key) }}>
-              <strong>
-                {tooltipData.key}
-              </strong>
-            </div>
-            <div>
-              {tooltipData.data[tooltipData.key]}℉
+              <strong>{tooltipData.key}</strong>
             </div>
+            <div>{tooltipData.data[tooltipData.key]}℉</div>
             <div>
-              <small>
-                {tooltipData.xFormatted}
-              </small>
+              <small>{tooltipData.xFormatted}</small>
             </div>
-          </Tooltip>}
+          </Tooltip>
+        )}
       </div>
     );
-  }
-);
\ No newline at end of file
+  },
+);
diff --git a/packages/vx-demo/components/tiles/radar.js b/packages/vx-demo/components/tiles/radar.js
index 5222d5083..b5873fb79 100644
--- a/packages/vx-demo/components/tiles/radar.js
+++ b/packages/vx-demo/components/tiles/radar.js
@@ -6,38 +6,39 @@ import { Point } from '@vx/point';
 import { Line, LineRadial } from '@vx/shape';
 import { max, min } from 'd3-array';
 
-
 const ANG = 360;
 
-const _data = letterFrequency.slice(2, 12);
-const calcAxis = (length) => {
+const data = letterFrequency.slice(2, 12);
+const calcAxis = length => {
   if (!length) return [];
-  else return new Array(length + 1)
-    .fill(0).map((v, i) => ({ angle: i * (ANG / length)}));
-}
+  else
+    return new Array(length + 1)
+      .fill(0)
+      .map((v, i) => ({ angle: i * (ANG / length) }));
+};
 
-function calcPoints (length, radius) {
+function calcPoints(length, radius) {
   const step = Math.PI * 2 / length;
-  return new Array(length)
-    .fill(0).map((v, i) => {
-      return {
-        x: radius * Math.sin(i * step),
-        y: radius * Math.cos(i * step),
-      }
-    });
+  return new Array(length).fill(0).map((v, i) => {
+    return {
+      x: radius * Math.sin(i * step),
+      y: radius * Math.cos(i * step),
+    };
+  });
 }
 
-function calcCoordinates (data, scale, access) {
+function calcCoordinates(data, scale, access) {
   const step = Math.PI * 2 / data.length;
   const points = new Array(data.length).fill({});
   const pointStr = new Array(data.length + 1)
-        .fill('').reduce((res, v, i) => {
-          if (i > data.length) return res;
-          const x = scale(access(data[i - 1])) * Math.sin(i * step);
-          const y = scale(access(data[i - 1])) * Math.cos(i * step);
-          points[i - 1] = { x, y };
-          return res += `${x},${y} `;
-        });
+    .fill('')
+    .reduce((res, v, i) => {
+      if (i > data.length) return res;
+      const x = scale(access(data[i - 1])) * Math.sin(i * step);
+      const y = scale(access(data[i - 1])) * Math.cos(i * step);
+      points[i - 1] = { x, y };
+      return (res += `${x},${y} `);
+    });
 
   points.str = pointStr;
   return points;
@@ -47,14 +48,17 @@ export default ({
   width,
   height,
   events = false,
-  margin = { top: 80, left: 80, right: 80, bottom: 80 },
+  margin = { top: 40, left: 80, right: 80, bottom: 80 },
   levels = 5,
 }) => {
   if (width < 10) return null;
 
-  const webs = calcAxis(_data.length);
-  const radius = min([width, height]) / 2 - max(Object.values(margin));
-  const points = calcPoints(_data.length, radius);
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+
+  const webs = calcAxis(data.length);
+  const radius = min([xMax, yMax]) / 2;
+  const points = calcPoints(data.length, radius);
   const labelMargin = max(Object.values(margin)) - 20;
 
   const x = d => d.letter;
@@ -67,38 +71,36 @@ export default ({
 
   const yScale = scaleLinear({
     range: [0, radius],
-    domain: [0, max(_data, y)],
+    domain: [0, max(data, y)],
   });
 
-  const polyPoints = calcCoordinates(_data, yScale, y);
+  const polyPoints = calcCoordinates(data, yScale, y);
 
   return (
     <svg width={width} height={height}>
-      <Group top={height / 2} left={width / 2}>
-      {[...new Array(levels)].map((v, i) => (
-        <LineRadial
-          data={webs}
-          key={i}
-          angle={d => rScale(d.angle)}
-          radius={(i + 1) * radius / levels}
-          fill="none"
-          stroke="#d9d9d9"
-          strokeWidth={2}
-          strokeOpacity={0.8}
-          strokeLinecap="round"
-        />
-      ))}
-      </Group>
-      <Group top={height / 2} left={width / 2}>
-      {[...new Array(_data.length)].map((v, i) => (
-        <Line key={i}
-          from={new Point({x:0, y:0})}
-          to={new Point({x:points[i].x, y:points[i].y})}
-          stroke="#d9d9d9"
-        />
-      ))}
-      </Group>
-      <Group top={height / 2} left={width / 2}>
+      <rect fill="#FAF7E9" width={width} height={height} rx={14} />
+      <Group top={height / 2 - margin.top} left={width / 2}>
+        {[...new Array(levels)].map((v, i) => (
+          <LineRadial
+            key={`web-${i}`}
+            data={webs}
+            angle={d => rScale(d.angle)}
+            radius={(i + 1) * radius / levels}
+            fill="none"
+            stroke="#d9d9d9"
+            strokeWidth={2}
+            strokeOpacity={0.8}
+            strokeLinecap="round"
+          />
+        ))}
+        {[...new Array(data.length)].map((v, i) => (
+          <Line
+            key={`line-${i}`}
+            from={new Point({ x: 0, y: 0 })}
+            to={new Point({ x: points[i].x, y: points[i].y })}
+            stroke="#d9d9d9"
+          />
+        ))}
         <polygon
           points={polyPoints.str}
           fill="#ff9933"
@@ -106,18 +108,16 @@ export default ({
           stroke="#ff9933"
           strokeWidth={1}
         />
-      </Group>
-      <Group top={height / 2} left={width / 2}>
-      {polyPoints.map((v, i) => (
-        <circle
-          key={i}
-          cx={v.x}
-          cy={v.y}
-          r={4}
-          fill="#f5810c"
-          className="dots"
-        />
-      ))}
+        {polyPoints.map((v, i) => (
+          <circle
+            key={`point-${i}`}
+            cx={v.x}
+            cy={v.y}
+            r={4}
+            fill="#f5810c"
+            className="dots"
+          />
+        ))}
       </Group>
     </svg>
   );
diff --git a/packages/vx-demo/components/tiles/treemap.js b/packages/vx-demo/components/tiles/treemap.js
index e80d56db2..2a5d64337 100644
--- a/packages/vx-demo/components/tiles/treemap.js
+++ b/packages/vx-demo/components/tiles/treemap.js
@@ -68,25 +68,6 @@ export default ({
                         stroke={'#3436b8'}
                       />
                     )}
-
-                    <clipPath id={`clip-${i}`}>
-                      <use xlinkHref={`#rect-${i}`} />
-                    </clipPath>
-
-                    {node.depth === 1 && (
-                      <text
-                        x={(node.x1 - node.x0) / 2}
-                        y={(node.y1 - node.y0) / 2}
-                        dx={-30}
-                        fill={'white'}
-                        clipPath={`url(#clip-${i})`}
-                        style={{
-                          font: '18px sans-serif',
-                        }}
-                      >
-                        {node.data.id}
-                      </text>
-                    )}
                   </Group>
                 ))}
             </Group>
diff --git a/packages/vx-demo/pages/barstackhorizontal.js b/packages/vx-demo/pages/barstackhorizontal.js
index 17ccca445..bebefd1d2 100644
--- a/packages/vx-demo/pages/barstackhorizontal.js
+++ b/packages/vx-demo/pages/barstackhorizontal.js
@@ -4,7 +4,17 @@ import BarStackHorizontal from '../components/tiles/barstackhorizontal';
 
 export default () => {
   return (
-    <Show events margin={{ top: 80, left: 0 }} component={BarStackHorizontal} title="Bar Stack Horizontal">
+    <Show
+      events
+      margin={{
+        top: 80,
+        left: 80,
+        right: 40,
+        bottom: 100,
+      }}
+      component={BarStackHorizontal}
+      title="Bar Stack Horizontal"
+    >
       {`import React from 'react';
 import { BarStackHorizontal } from '@vx/shape';
 import { Group } from '@vx/group';
@@ -16,6 +26,21 @@ import { withTooltip, Tooltip } from '@vx/tooltip';
 import { LegendOrdinal } from '@vx/legend';
 import { extent, max } from 'd3-array';
 
+const data = cityTemperature.slice(0, 12);
+const keys = Object.keys(data[0]).filter(d => d !== 'date');
+const parseDate = timeParse('%Y%m%d');
+const format = timeFormat('%b %d');
+const formatDate = date => format(parseDate(date));
+
+const totals = data.reduce((ret, cur) => {
+  const t = keys.reduce((dailyTotal, k) => {
+    dailyTotal += +cur[k];
+    return dailyTotal;
+  }, 0);
+  ret.push(t);
+  return ret;
+}, []);
+
 export default withTooltip(
   ({
     width,
@@ -23,55 +48,42 @@ export default withTooltip(
     events = false,
     margin = {
       top: 40,
-      left: 0,
+      left: 50,
+      right: 40,
+      bottom: 100,
     },
     tooltipOpen,
     tooltipLeft,
     tooltipTop,
     tooltipData,
     hideTooltip,
-    showTooltip
+    showTooltip,
   }) => {
     if (width < 10) return null;
 
-    const data = cityTemperature.slice(0, 12);
-    const keys = Object.keys(data[0]).filter(d => d !== 'date');
-    const parseDate = timeParse('%Y%m%d');
-    const format = timeFormat('%b %d');
-    const formatDate = date => format(parseDate(date));
-    
     // accessors
     const y = d => d.date;
     const x = d => d.value;
-    
-    const totals = data.reduce((ret, cur) => {
-      const t = keys.reduce((dailyTotal, k) => {
-        dailyTotal += +cur[k];
-        return dailyTotal;
-      }, 0);
-      ret.push(t);
-      return ret;
-    }, []);
 
     // bounds
-    const xMax = width;
-    const yMax = height - margin.top - 100;
+    const xMax = width - margin.left - margin.right;
+    const yMax = height - margin.top - margin.bottom;
 
     // // scales
     const xScale = scaleLinear({
       rangeRound: [0, xMax],
-      domain: [0, max(totals)],      
-      nice: true,      
+      domain: [0, max(totals)],
+      nice: true,
     });
     const yScale = scaleBand({
       rangeRound: [yMax, 0],
-      domain: data.map(y),      
+      domain: data.map(y),
       padding: 0.2,
-      tickFormat: () => val => formatDate(val)
+      tickFormat: () => val => formatDate(val),
     });
     const zScale = scaleOrdinal({
       domain: keys,
-      range: ['#6c5efb', '#c998ff', '#a44afe']
+      range: ['#6c5efb', '#c998ff', '#a44afe'],
     });
 
     let tooltipTimeout;
@@ -84,63 +96,61 @@ export default withTooltip(
             y={0}
             width={width}
             height={height}
-            fill='#eaedff'
+            fill="#eaedff"
             rx={14}
           />
-          <BarStackHorizontal
-            top={margin.top}
-            left={50 + margin.left}
-            data={data}
-            keys={keys}
-            height={yMax}
-            y={y}
-            xScale={xScale}
-            yScale={yScale}
-            zScale={zScale}
-            onClick={data => event => {
-              if (!events) return;
-              alert(\`clicked: \${JSON.stringify(data)}\`);
-            }}
-            onMouseLeave={data => event => {
-              tooltipTimeout = setTimeout(() => {
-                hideTooltip();
-              }, 300);
-            }}
-            onMouseMove={data => event => {
-              if (tooltipTimeout) clearTimeout(tooltipTimeout);
-              showTooltip({
-                tooltipData: data,
-                tooltipTop: margin.top + yScale(y(data.data)),
-                tooltipLeft: margin.left + data.width + 75,
-              });
-            }}
-          />
-          <AxisLeft
-            hideAxisLine={true}
-            hideTicks={true}
-            scale={yScale}
-            top={margin.top}
-            left={margin.left + 30}
-            stroke="#a44afe"
-            tickStroke="#a44afe"
-            tickLabelProps={(value, index) => ({
-              fill: '#a44afe',
-              fontSize: 11,
-              textAnchor: 'middle',
-            })}
-          />
-          <AxisBottom
-            scale={xScale}
-            top={yMax + margin.top}
-            left={50 + margin.left}
-            stroke="#a44afe"
-            tickStroke="#a44afe"
-            tickLabelProps={(value, index) => ({
-              fill: '#a44afe',
-              fontSize: 11,
-              textAnchor: 'middle',
-            })}
-          />
+          <Group top={margin.top} left={margin.left}>
+            <BarStackHorizontal
+              data={data}
+              keys={keys}
+              height={yMax}
+              y={y}
+              xScale={xScale}
+              yScale={yScale}
+              zScale={zScale}
+              onClick={data => event => {
+                if (!events) return;
+                alert(\`clicked: \${JSON.stringify(data)}\`);
+              }}
+              onMouseLeave={data => event => {
+                tooltipTimeout = setTimeout(() => {
+                  hideTooltip();
+                }, 300);
+              }}
+              onMouseMove={data => event => {
+                if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                showTooltip({
+                  tooltipData: data,
+                  tooltipTop: margin.top + yScale(y(data.data)),
+                  tooltipLeft: margin.left + data.width + 75,
+                });
+              }}
+            />
+            <AxisLeft
+              hideAxisLine={true}
+              hideTicks={true}
+              scale={yScale}
+              stroke="#a44afe"
+              tickStroke="#a44afe"
+              tickLabelProps={(value, index) => ({
+                fill: '#a44afe',
+                fontSize: 11,
+                textAnchor: 'end',
+                dy: '0.33em',
+              })}
+            />
+            <AxisBottom
+              scale={xScale}
+              top={yMax}
+              stroke="#a44afe"
+              tickStroke="#a44afe"
+              tickLabelProps={(value, index) => ({
+                fill: '#a44afe',
+                fontSize: 11,
+                textAnchor: 'middle',
+              })}
+            />
+          </Group>
         </svg>
         <div
           style={{
@@ -149,7 +159,7 @@ export default withTooltip(
             width: '100%',
             display: 'flex',
             justifyContent: 'center',
-            fontSize: '14px'
+            fontSize: '14px',
           }}
         >
           <LegendOrdinal
@@ -158,35 +168,29 @@ export default withTooltip(
             labelMargin="0 15px 0 0"
           />
         </div>
-        {tooltipOpen &&
+        {tooltipOpen && (
           <Tooltip
             top={tooltipTop}
             left={tooltipLeft}
             style={{
               minWidth: 60,
               backgroundColor: 'rgba(0,0,0,0.9)',
-              color: 'white'
+              color: 'white',
             }}
           >
             <div style={{ color: zScale(tooltipData.key) }}>
-              <strong>
-                {tooltipData.key}
-              </strong>
-            </div>
-            <div>
-              {tooltipData.data[tooltipData.key]}℉
+              <strong>{tooltipData.key}</strong>
             </div>
+            <div>{tooltipData.data[tooltipData.key]}℉</div>
             <div>
-              <small>
-                {tooltipData.xFormatted}
-              </small>
+              <small>{tooltipData.xFormatted}</small>
             </div>
-          </Tooltip>}
+          </Tooltip>
+        )}
       </div>
     );
-  }
-);
-`}
+  },
+);`}
     </Show>
   );
 };
diff --git a/packages/vx-demo/pages/radar.js b/packages/vx-demo/pages/radar.js
index ba7edb15e..c9ff087d0 100644
--- a/packages/vx-demo/pages/radar.js
+++ b/packages/vx-demo/pages/radar.js
@@ -13,38 +13,39 @@ import { Point } from '@vx/point';
 import { Line, LineRadial } from '@vx/shape';
 import { max, min } from 'd3-array';
 
-
 const ANG = 360;
 
-const _data = letterFrequency.slice(2, 12);
-const calcAxis = (length) => {
+const data = letterFrequency.slice(2, 12);
+
+const calcAxis = length => {
   if (!length) return [];
-  else return new Array(length + 1)
-    .fill(0).map((v, i) => ({ angle: i * (ANG / length)}));
-}
+  return new Array(length + 1)
+    .fill(0)
+    .map((v, i) => ({ angle: i * (ANG / length) }));
+};
 
-function calcPoints (length, radius) {
+function calcPoints(length, radius) {
   const step = Math.PI * 2 / length;
-  return new Array(length)
-    .fill(0).map((v, i) => {
-      return {
-        x: radius * Math.sin(i * step),
-        y: radius * Math.cos(i * step),
-      }
-    });
+  return new Array(length).fill(0).map((v, i) => {
+    return {
+      x: radius * Math.sin(i * step),
+      y: radius * Math.cos(i * step),
+    };
+  });
 }
 
-function calcCoordinates (data, scale, access) {
+function calcCoordinates(data, scale, access) {
   const step = Math.PI * 2 / data.length;
   const points = new Array(data.length).fill({});
   const pointStr = new Array(data.length + 1)
-        .fill('').reduce((res, v, i) => {
-          if (i > data.length) return res;
-          const x = scale(access(data[i - 1])) * Math.sin(i * step);
-          const y = scale(access(data[i - 1])) * Math.cos(i * step);
-          points[i - 1] = { x, y };
-          return res += \`$\{x\},$\{y\} \`;
-        });
+    .fill('')
+    .reduce((res, v, i) => {
+      if (i > data.length) return res;
+      const x = scale(access(data[i - 1])) * Math.sin(i * step);
+      const y = scale(access(data[i - 1])) * Math.cos(i * step);
+      points[i - 1] = { x, y };
+      return (res += \`\${x},\${y} \`);
+    });
 
   points.str = pointStr;
   return points;
@@ -54,14 +55,17 @@ export default ({
   width,
   height,
   events = false,
-  margin = { top: 80, left: 80, right: 80, bottom: 80 },
+  margin = { top: 40, left: 80, right: 80, bottom: 80 },
   levels = 5,
 }) => {
   if (width < 10) return null;
 
-  const webs = calcAxis(_data.length);
-  const radius = min([width, height]) / 2 - max(Object.values(margin));
-  const points = calcPoints(_data.length, radius);
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+
+  const webs = calcAxis(data.length);
+  const radius = min([xMax, yMax]) / 2;
+  const points = calcPoints(data.length, radius);
   const labelMargin = max(Object.values(margin)) - 20;
 
   const x = d => d.letter;
@@ -74,38 +78,36 @@ export default ({
 
   const yScale = scaleLinear({
     range: [0, radius],
-    domain: [0, max(_data, y)],
+    domain: [0, max(data, y)],
   });
 
-  const polyPoints = calcCoordinates(_data, yScale, y);
+  const polyPoints = calcCoordinates(data, yScale, y);
 
   return (
     <svg width={width} height={height}>
-      <Group top={height / 2} left={width / 2}>
-      {[...new Array(levels)].map((v, i) => (
-        <LineRadial
-          data={webs}
-          key={i}
-          angle={d => rScale(d.angle)}
-          radius={(i + 1) * radius / levels}
-          fill="none"
-          stroke="#d9d9d9"
-          strokeWidth={2}
-          strokeOpacity={0.8}
-          strokeLinecap="round"
-        />
-      ))}
-      </Group>
-      <Group top={height / 2} left={width / 2}>
-      {[...new Array(_data.length)].map((v, i) => (
-        <Line key={i}
-          from={new Point({x:0, y:0})}
-          to={new Point({x:points[i].x, y:points[i].y})}
-          stroke="#d9d9d9"
-        />
-      ))}
-      </Group>
-      <Group top={height / 2} left={width / 2}>
+      <rect fill="#FAF7E9" width={width} height={height} rx={14} />
+      <Group top={height / 2 - margin.top} left={width / 2}>
+        {[...new Array(levels)].map((v, i) => (
+          <LineRadial
+            data={webs}
+            key={\`web-\${i}\`}
+            angle={d => rScale(d.angle)}
+            radius={(i + 1) * radius / levels}
+            fill="none"
+            stroke="#d9d9d9"
+            strokeWidth={2}
+            strokeOpacity={0.8}
+            strokeLinecap="round"
+          />
+        ))}
+        {[...new Array(data.length)].map((v, i) => (
+          <Line
+            key={\`line-\${i}\`}
+            from={new Point({ x: 0, y: 0 })}
+            to={new Point({ x: points[i].x, y: points[i].y })}
+            stroke="#d9d9d9"
+          />
+        ))}
         <polygon
           points={polyPoints.str}
           fill="#ff9933"
@@ -113,18 +115,16 @@ export default ({
           stroke="#ff9933"
           strokeWidth={1}
         />
-      </Group>
-      <Group top={height / 2} left={width / 2}>
-      {polyPoints.map((v, i) => (
-        <circle
-          key={i}
-          cx={v.x}
-          cy={v.y}
-          r={4}
-          fill="#f5810c"
-          className="dots"
-        />
-      ))}
+        {polyPoints.map((v, i) => (
+          <circle
+            key={\`point-\${i}\`}
+            cx={v.x}
+            cy={v.y}
+            r={4}
+            fill="#f5810c"
+            className="dots"
+          />
+        ))}
       </Group>
     </svg>
   );
diff --git a/packages/vx-demo/pages/treemap.js b/packages/vx-demo/pages/treemap.js
index 8d10bba4d..fffeeb00e 100644
--- a/packages/vx-demo/pages/treemap.js
+++ b/packages/vx-demo/pages/treemap.js
@@ -71,25 +71,6 @@ export default ({
                       stroke={'#3436b8'}
                     />
                   )}
-
-                  <clipPath id={\`clip-\${i}\`}>
-                    <use xlinkHref={\`#rect-\${i}\`} />
-                  </clipPath>
-
-                  {node.depth === 1 && (
-                    <text
-                      x={(node.x1 - node.x0) / 2}
-                      y={(node.y1 - node.y0) / 2}
-                      dx={-30}
-                      fill={'white'}
-                      clipPath={\`url(#clip-\${i})\`}
-                      style={{
-                        font: '18px sans-serif',
-                      }}
-                    >
-                      {node.data.id}
-                    </text>
-                  )}
                 </Group>
               ))}
             </Group>
diff --git a/packages/vx-shape/build/index.js b/packages/vx-shape/build/index.js
deleted file mode 100644
index df49d0515..000000000
--- a/packages/vx-shape/build/index.js
+++ /dev/null
@@ -1,202 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Arc = require('./shapes/Arc');
-
-Object.defineProperty(exports, 'Arc', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Arc).default;
-  }
-});
-
-var _Pie = require('./shapes/Pie');
-
-Object.defineProperty(exports, 'Pie', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Pie).default;
-  }
-});
-
-var _Line = require('./shapes/Line');
-
-Object.defineProperty(exports, 'Line', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Line).default;
-  }
-});
-
-var _LinePath = require('./shapes/LinePath');
-
-Object.defineProperty(exports, 'LinePath', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_LinePath).default;
-  }
-});
-
-var _LineRadial = require('./shapes/LineRadial');
-
-Object.defineProperty(exports, 'LineRadial', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_LineRadial).default;
-  }
-});
-
-var _LinkHorizontal = require('./shapes/LinkHorizontal');
-
-Object.defineProperty(exports, 'LinkHorizontal', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_LinkHorizontal).default;
-  }
-});
-
-var _LinkVertical = require('./shapes/LinkVertical');
-
-Object.defineProperty(exports, 'LinkVertical', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_LinkVertical).default;
-  }
-});
-
-var _LinkRadial = require('./shapes/LinkRadial');
-
-Object.defineProperty(exports, 'LinkRadial', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_LinkRadial).default;
-  }
-});
-
-var _Area = require('./shapes/Area');
-
-Object.defineProperty(exports, 'Area', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Area).default;
-  }
-});
-
-var _AreaClosed = require('./shapes/AreaClosed');
-
-Object.defineProperty(exports, 'AreaClosed', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_AreaClosed).default;
-  }
-});
-
-var _AreaStack = require('./shapes/AreaStack');
-
-Object.defineProperty(exports, 'AreaStack', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_AreaStack).default;
-  }
-});
-
-var _Bar = require('./shapes/Bar');
-
-Object.defineProperty(exports, 'Bar', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Bar).default;
-  }
-});
-
-var _BarGroup = require('./shapes/BarGroup');
-
-Object.defineProperty(exports, 'BarGroup', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_BarGroup).default;
-  }
-});
-
-var _BarStack = require('./shapes/BarStack');
-
-Object.defineProperty(exports, 'BarStack', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_BarStack).default;
-  }
-});
-
-var _BarStackHorizontal = require('./shapes/BarStackHorizontal');
-
-Object.defineProperty(exports, 'BarStackHorizontal', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_BarStackHorizontal).default;
-  }
-});
-
-var _Stack = require('./shapes/Stack');
-
-Object.defineProperty(exports, 'Stack', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Stack).default;
-  }
-});
-
-var _callOrValue = require('./util/callOrValue');
-
-Object.defineProperty(exports, 'callOrValue', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_callOrValue).default;
-  }
-});
-
-var _stackOffset = require('./util/stackOffset');
-
-Object.defineProperty(exports, 'stackOffset', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_stackOffset).default;
-  }
-});
-Object.defineProperty(exports, 'STACK_OFFSETS', {
-  enumerable: true,
-  get: function get() {
-    return _stackOffset.STACK_OFFSETS;
-  }
-});
-Object.defineProperty(exports, 'STACK_OFFSET_NAMES', {
-  enumerable: true,
-  get: function get() {
-    return _stackOffset.STACK_OFFSET_NAMES;
-  }
-});
-
-var _stackOrder = require('./util/stackOrder');
-
-Object.defineProperty(exports, 'stackOrder', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_stackOrder).default;
-  }
-});
-Object.defineProperty(exports, 'STACK_ORDERS', {
-  enumerable: true,
-  get: function get() {
-    return _stackOrder.STACK_ORDERS;
-  }
-});
-Object.defineProperty(exports, 'STACK_ORDER_NAMES', {
-  enumerable: true,
-  get: function get() {
-    return _stackOrder.STACK_ORDER_NAMES;
-  }
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
\ No newline at end of file