diff --git a/giraffe/README.md b/giraffe/README.md
index 383bfe32..a605e214 100644
--- a/giraffe/README.md
+++ b/giraffe/README.md
@@ -162,22 +162,27 @@ In this quickstart, we're going to build a simple line graph using Giraffe in a
 
     ```
 
-
 #### Examples Using Flux [](#example-using-flux)
 
-##### 1. Generating the table through a Flux result
+##### Plot a Flux table generated from Flux CSV
 
-When generating the table through a Flux result:
+To generate the Flux table from Flux CSV, do the following:
 
-- call the `fromFlux` utility function on the CSV generated by Flux
-- get the table in the returned object from calling `fromFlux`
+1. Pass the CSV from the Flux response to the `fromFlux` utility function.
+2. Get the `.table` property from the object returned by `fromFlux`.
 
-Here is an example of turning a result in comma separate values (CSV) from Flux into a table and rendering it without optional properties:
+The following example shows how to transform a Flux annotated CSV response into a Flux table and render the data as a line plot:
 
-  <pre>
-  import {Plot, fromFlux} from '@influxdata/giraffe'
+```ts
+import { fromFlux, Plot, LayerTypes, Config, LayerConfig } from '@influxdata/giraffe'
+
+export default function DevicePlot() {
 
-  // ...
+  const style = {
+    width: "calc(70vw - 20px)",
+    height: "calc(70vh - 20px)",
+    margin: "40px",
+  }
 
   const fluxResultCSV = `#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double,string,string,string,string
 #group,false,false,true,true,false,false,true,true,true,true
@@ -194,40 +199,40 @@ Here is an example of turning a result in comma separate values (CSV) from Flux
 
   const dataFromFlux = fromFlux(fluxResultCSV)
 
-  const lineLayer = {
-    type: "line",
+  const lineLayer: LayerConfig = {
+    type: LayerTypes.Line,
     x: "_time",
     y: "_value",
   }
 
-  const config = {
+  const config: Config = {
     table: dataFromFlux.table,
     layers: [lineLayer],
   }
 
-  // ...
+  return(
+    <div style={style}>
+      <Plot config={config} />
+    </div>
+  )
 
-  // return this element in your React rendering code:
+}
+```
 
-  &#60;div
-    style={{
-      width: "calc(70vw - 20px)",
-      height: "calc(70vh - 20px)",
-      margin: "40px",
-    }}
-  &#62;
-    &#60;Plot config={config} /&#62;
-  &#60;/div&#62;
-  </pre>
+##### Plot Flux CSV from a Flux query response
 
-##### 2. Using CSV from a Flux query
+To render a plot from Flux CSV, pass the CSV as the `fluxResponse` config--for example:
 
-When using the comma separated values (CSV) from the Flux query as the `fluxResponse` property:
+```ts
+import { Plot, LayerTypes, Config, LayerConfig } from '@influxdata/giraffe'
 
-  <pre>
-  import {Plot} from '@influxdata/giraffe'
+export default function DevicePlot() {
 
-  // ...
+  const style = {
+    width: "calc(70vw - 20px)",
+    height: "calc(70vh - 20px)",
+    margin: "40px",
+  }
 
   const fluxResponse = `#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double,string,string,string,string
 #group,false,false,true,true,false,false,true,true,true,true
@@ -242,35 +247,31 @@ When using the comma separated values (CSV) from the Flux query as the `fluxResp
 ,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-10T22:20:40.776Z,28.7,value,temperature,index.html,browser
 `
 
-  const lineLayer = {
-    type: "line",
+  const lineLayer: LayerConfig = {
+    type: LayerTypes.Line,
     x: "_time",
     y: "_value",
+    fill: []
   }
 
-  const config = {
+  const config: Config = {
     fluxResponse,
     layers: [lineLayer],
   }
 
-  // ...
+  return(
+    <div style={style}>
+      <Plot config={config} />
+    </div>
+  )
 
-  // return this element in your React rendering code:
-
-  &#60;div
-    style={{
-      width: "calc(70vw - 20px)",
-      height: "calc(70vh - 20px)",
-      margin: "40px",
-    }}
-  &#62;
-    &#60;Plot config={config} /&#62;
-  &#60;/div&#62;
-  </pre>
+}
+```
 
 ## Config
 
-`<Plot>` requires a `config` prop which is an object with properties that serve three purposes:
+`<Plot>` requires a `config` prop.
+`config` is an object with properties that control the following:
 
 - [appearance](#appearance-properties) customization for sizing and framing
 - [data](#data-properties) store, getters and setters, and plot-type specific options