diff --git a/client/src/components/Chart.js b/client/src/components/Chart.js
index 247383a211..6cb81f30df 100644
--- a/client/src/components/Chart.js
+++ b/client/src/components/Chart.js
@@ -3,7 +3,7 @@ import { LAYOUT_AGGREGATORS } from "layouts/utils"
 import PropTypes from "prop-types"
 import React from "react"
 
-const Chart = ({ items, layoutType, element: Element, style }) => {
+const Chart = ({ items, layoutType, widgetElement, widgetConfig, style }) => {
   const aggregator = LAYOUT_AGGREGATORS[layoutType]
   const [aggregatedItems, aggregationKey] = aggregator(items)
   const [ChartElement, layout, initViewState, ref] = useLayout(
@@ -16,8 +16,9 @@ const Chart = ({ items, layoutType, element: Element, style }) => {
       <ChartElement
         items={aggregatedItems}
         layout={layout}
-        element={Element}
+        widgetElement={widgetElement}
         initViewState={initViewState}
+        widgetConfig={widgetConfig}
       />
     </svg>
   )
@@ -25,7 +26,8 @@ const Chart = ({ items, layoutType, element: Element, style }) => {
 Chart.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object),
   layoutType: PropTypes.string,
-  element: PropTypes.func,
-  style: PropTypes.object
+  widgetElement: PropTypes.func,
+  style: PropTypes.object,
+  widgetConfig: PropTypes.object
 }
 export default Chart
diff --git a/client/src/components/DateChart.js b/client/src/components/DateChart.js
index 3d326a6741..65c568f486 100644
--- a/client/src/components/DateChart.js
+++ b/client/src/components/DateChart.js
@@ -4,8 +4,9 @@ import React from "react"
 const DateChart = ({
   items,
   layout,
-  element: Element,
-  initViewState: viewDate
+  widgetElement: Widget,
+  initViewState: viewDate,
+  widgetConfig
 }) => {
   return (
     <>
@@ -20,7 +21,11 @@ const DateChart = ({
             transform={`translate(${boundingRect.x}, ${boundingRect.y})`}
             key={item[item.aggregationKey]}
           >
-            <Element item={item} dimensions={boundingRect} />
+            <Widget
+              item={item}
+              dimensions={boundingRect}
+              widgetConfig={widgetConfig}
+            />
           </g>
         )
       })}
@@ -29,8 +34,9 @@ const DateChart = ({
 }
 DateChart.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object),
-  element: PropTypes.func,
+  widgetElement: PropTypes.func,
   layout: PropTypes.func,
-  initViewState: PropTypes.object
+  initViewState: PropTypes.object,
+  widgetConfig: PropTypes.object
 }
 export default DateChart
diff --git a/client/src/components/HeatMap.js b/client/src/components/HeatMap.js
index 3f8fe3b616..e4f6a3f66c 100644
--- a/client/src/components/HeatMap.js
+++ b/client/src/components/HeatMap.js
@@ -4,6 +4,13 @@ import { LAYOUT_TYPES } from "layouts/utils"
 import PropTypes from "prop-types"
 import React, { useState } from "react"
 
+// TODO: this config can come from layouts/utils or be input to HeatMap or input from user
+const heatConfig = {
+  low: 3,
+  mid: 6,
+  bgColor: "white",
+  textColor: "black"
+}
 const HeatMap = ({ items, style }) => {
   const [layout, setLayout] = useState(LAYOUT_TYPES.YEAR)
   return (
@@ -25,8 +32,9 @@ const HeatMap = ({ items, style }) => {
       <Chart
         items={items}
         layoutType={layout}
-        element={HeatWidget}
+        widgetElement={HeatWidget}
         style={style}
+        widgetConfig={heatConfig}
       />
     </div>
   )
diff --git a/client/src/components/aggregations/HeatWidget.js b/client/src/components/aggregations/HeatWidget.js
index 7368a6da50..68014474f9 100644
--- a/client/src/components/aggregations/HeatWidget.js
+++ b/client/src/components/aggregations/HeatWidget.js
@@ -1,23 +1,34 @@
+import { numOfEventsToHeatBgc } from "components/aggregations/utils"
 import PropTypes from "prop-types"
 import React from "react"
+
 // TODO: add color scales
-const HeatWidget = ({ item, dimensions }) => {
+// TODO: api will probably change
+/**
+ * @param {object} item - aggregated item in the shape {aggregationKey: string, [aggregationKey]: object, numOfEvents: number}
+ * @param {object} dimensions - what view types you want to use
+ * @param {object} heatConfig - object in the form {low:number, mid:number, bgColor:string, textColor: string}
+ *                              4 levels of tone for event count:  if = 0, if <= low, if <= mid, if > mid
+ */
+const HeatWidget = ({ item, dimensions, widgetConfig: heatConfig }) => {
+  const bgc = numOfEventsToHeatBgc(item.numOfEvents, heatConfig)
+  console.log(item, heatConfig)
+
   return (
     <>
       <rect
         width={dimensions.width}
         height={dimensions.height}
-        stroke="#aaa"
+        stroke="purple"
         strokeWidth="2"
-        fill="#fff"
+        fill={bgc}
       />
       <text
         x={dimensions.width / 2}
         y={dimensions.height / 2}
         dominantBaseline="middle"
-        fontSize="12"
-        strokeWidth="0"
-        stroke="#000"
+        fontSize="16"
+        fill={heatConfig.textColor}
         textAnchor="middle"
       >
         {item.numOfEvents}
@@ -27,6 +38,7 @@ const HeatWidget = ({ item, dimensions }) => {
 }
 HeatWidget.propTypes = {
   item: PropTypes.object,
-  dimensions: PropTypes.object
+  dimensions: PropTypes.object,
+  widgetConfig: PropTypes.object
 }
 export default HeatWidget
diff --git a/client/src/components/aggregations/utils.js b/client/src/components/aggregations/utils.js
index c31ade1df3..31741d297b 100644
--- a/client/src/components/aggregations/utils.js
+++ b/client/src/components/aggregations/utils.js
@@ -220,3 +220,30 @@ export function reportsToEvents(reports) {
     }
   })
 }
+export const COLOR_NAMES_TO_RGB = {
+  red: "rgb(155, 0, 0, ",
+  blue: "rgb(0, 0, 155, ",
+  green: "rgb(0, 155, 0, ",
+  pink: "rgb(194, 31, 169, ",
+  orange: "rgb(199, 135, 6, ",
+  white: "rgb(255, 255, 255, ",
+  brown: "rgb(128, 57, 30, "
+}
+
+/**
+ * There are 4 levels, [none, low, mid, high], none=0 assumed, we need two values: low, mid
+ * Available colors ["red", "blue", "green", "pink", "orange", "brown"]
+ * @param {number} numOfEvents - number of items to scale
+ * @param {object} scale - example object: {low: 3, mid: 6, bgColor: "red"}
+ */
+export function numOfEventsToHeatBgc(numOfEvents, scale) {
+  if (numOfEvents === 0) {
+    return "transparent"
+  } else if (numOfEvents <= scale.low) {
+    return `${COLOR_NAMES_TO_RGB[scale.bgColor]}0.25)`
+  } else if (numOfEvents <= scale.mid) {
+    return `${COLOR_NAMES_TO_RGB[scale.bgColor]}0.5)`
+  } else {
+    return `${COLOR_NAMES_TO_RGB[scale.bgColor]}1.0)`
+  }
+}
diff --git a/client/src/layouts/geoLayout.js b/client/src/layouts/geoLayout.js
index 379eeffcdc..31c3166c31 100644
--- a/client/src/layouts/geoLayout.js
+++ b/client/src/layouts/geoLayout.js
@@ -1,4 +1,4 @@
-const geoLayout = (item, dimensions) => {
+const geoLayout = (item, dimensions, viewLocation) => {
   // FIXME: do something useful instead
   return {
     x: 0,