fix typo in docs and code formatting

susielu · May 7, 2020 · 18c85b0 · 18c85b0
1 parent 31cb443
commit 18c85b0
Show file tree

Hide file tree

Showing 5 changed files with 258 additions and 251 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/bundle.map b/docs/bundle.map
diff --git a/docs/content/inpractice.md b/docs/content/inpractice.md
@@ -11,33 +11,43 @@ They are the foundational blocks of this library.
 Settings for subject types are in the annotation object's <code>.subject</code>:
 
 ```js
-const annotations = [{
-  note: { label: "Hi"},
-  x: 100, y 100,
-  dy: 137, dx: 162,
-  subject: { radius: 50, radiusPadding: 10 }
-}]
-
-d3.annotation().annotations(annotations)
+const annotations = [
+  {
+    note: { label: "Hi" },
+    x: 100,
+    y: 100,
+    dy: 137,
+    dx: 162,
+    subject: { radius: 50, radiusPadding: 10 },
+  },
+];
+
+d3.annotation().annotations(annotations);
 ```
+
 **d3.annotationCalloutCircle**
+
 - radius or outerRadius and innerRadius: Number, pixels
 - radiusPadding: Number, pixels
 
 **d3.annotationCalloutRect**
+
 - width: Number, pixels
 - height: Number, pixels
 
 **d3.annotationXYThreshold**
+
 - x1, x2 or y1, y2: Number, pixels
 
 **d3.annotationBadge**: this is the only base annotation that doesn't have a connector or note
+
 - text: String
 - radius: Number, pixels
 - x: "left" or "right"
 - y: "top" or "bottom"
 
 **No subject**
+
 - d3.annotationLabel
 - d3.annotationCallout
 - d3.annotationCalloutElbow
@@ -50,57 +60,60 @@ The Options panel in the [Annotation Types UI](#types) exposes all of the option
 There are two ways to customize the connectors and notes. You can either change these properties per annotation:
 
 ```js
-const annotations = [{
-  note: { label: "Hi"},
-  x: 100, y 100,
-  dy: 137, dx: 162,
-  type: d3.annotationCalloutElbow,
-  connector: { end: "arrow" }
-}]
-
-d3.annotation().annotations(annotations)
+const annotations = [
+  {
+    note: { label: "Hi" },
+    x: 100,
+    y: 100,
+    dy: 137,
+    dx: 162,
+    type: d3.annotationCalloutElbow,
+    connector: { end: "arrow" },
+  },
+];
+
+d3.annotation().annotations(annotations);
 ```
 
 Or if you want all of the annotations to have these settings create a custom type with
 **d3.annotationCustomType(annotationType, typeSettings)**:
 
 ```js
-const calloutWithArrow =
-  d3.annotationCustomType(
-    d3.annotationCalloutElbow,
-    { connector: { end: "arrow" }}
-  )
+const calloutWithArrow = d3.annotationCustomType(d3.annotationCalloutElbow, {
+  connector: { end: "arrow" },
+});
 
 d3.annotation()
   .type(calloutWithArrow)
-  .annotations([{
-    text: "Plant paradise",
-    data: { date: "18-Sep-09", close: 185.02 },
-    dy: 37,
-    dx: 42
-  }])
-  .editMode(true)
+  .annotations([
+    {
+      text: "Plant paradise",
+      data: { date: "18-Sep-09", close: 185.02 },
+      dy: 37,
+      dx: 42,
+    },
+  ])
+  .editMode(true);
 ```
-Both examples above produce the same results.
 
+Both examples above produce the same results.
 
 <h3 id="select"><a href="#select">#</a>Selecting Elements</h3>
 
 - All of the visible shapes (aside from the edit handles) in the default annotations are **paths**
 - There is an invisible rect (<code>rect.annotation-note-bg</code>) behind the text in the notes as a helper for more click area etc.
 - Hierarchy of classes:
-![Annotation classes](img/classes.png)
+  ![Annotation classes](img/classes.png)
 - Within the g.annotation-note-content there could be three additional elements: <code>text.annotation-note-label</code>, <code>text.annotation-note-title</code>, <code>rect.annotation-note-bg</code>
 
 <h3 id="styles"><a href="#styles">#</a> Basic Styles</h3>
 
 Now the library comes with default styles, read more about it in the [2.0 release](http://www.susielu.com/data-viz/d3-annotation-2) post.
 
-Before v2, there were style sheets you needed to use: 
+Before v2, there were style sheets you needed to use:
 
 Available on [github](https://github.com/susielu/d3-annotation/blob/e7ba1e83f279a63e056964b080019d647f57e34c/d3-annotation.css).
 
-
 <h3 id="tips"><a href="#tips">#</a>Tips</h3>
 
 - In addition to the alignment settings for the note, you can also use the css `text-anchor` attribute to align the text within the note
@@ -109,11 +122,11 @@ Available on [github](https://github.com/susielu/d3-annotation/blob/e7ba1e83f279
 - If you are importing custom fonts, you may notice the annotations don't load perfectly with text wrapping and alignment. To fix that you can use, `document.fonts.ready` to make sure the fonts are loaded first to reflect the custom font's spacing for all of the calculations. Here's an example:
 
 ```js
-    document.fonts.ready.then(function(){
-      d3.select("svg")
-        .append("g")
-        .attr("class", "annotation-group")
-        .style('font-size', fontSize(ratio))
-        .call(makeAnnotations)
-    })
+document.fonts.ready.then(function () {
+  d3.select("svg")
+    .append("g")
+    .attr("class", "annotation-group")
+    .style("font-size", fontSize(ratio))
+    .call(makeAnnotations);
+});
 ```
diff --git a/docs/docs-compiled.js b/docs/docs-compiled.js
@@ -5,7 +5,7 @@ module.exports = "<ul>\n<li><a href=\"#introduction\">Introduction</a></li>\n<li
 },{}],3:[function(require,module,exports){
 module.exports = "<h2><a href=\"#extend\">#</a>Extending Annotation Types</h2>\n\n\n<p>The underlying code for d3-annotation has a base annotation type that all of the annotation types extend. The settings and components that make up the different types are customizable. </p>\n<p>The goal was to make a system that was easy to add new types and implement layout algorithms with. A longer post with details about how you can make your own type will be coming out soon. </p>\n<p>If you&#39;re interested in looking at the architecture before the post you can find the <a href=\"https://github.com/susielu/d3-annotation/tree/master/src\">source code here</a>. </p>\n";
 },{}],4:[function(require,module,exports){
-module.exports = "<h2><a href=\"#in-practice\">#</a>In Practice</h2>\n\n<p>All annotations are made of just three parts, a <strong>note</strong>, a <strong>connector</strong>, and a <strong>subject</strong>.</p>\n<p><img alt=\"Anatomy of an annotation\" src=\"img/anatomy.png\" /></p>\n<p>They are the foundational blocks of this library.</p>\n<h3 id=\"customize-the-subject-by-picking-a-base-annotation\">Customize the Subject by picking a base annotation</h3>\n<p>Settings for subject types are in the annotation object&#39;s <code>.subject</code>:</p>\n<pre><code class=\"lang-js\">const annotations = [{\n  note: { label: &quot;Hi&quot;},\n  x: 100, y 100,\n  dy: 137, dx: 162,\n  subject: { radius: 50, radiusPadding: 10 }\n}]\n\nd3.annotation().annotations(annotations)\n</code></pre>\n<p><strong>d3.annotationCalloutCircle</strong></p>\n<ul>\n<li>radius or outerRadius and innerRadius: Number, pixels</li>\n<li>radiusPadding: Number, pixels</li>\n</ul>\n<p><strong>d3.annotationCalloutRect</strong></p>\n<ul>\n<li>width: Number, pixels</li>\n<li>height: Number, pixels</li>\n</ul>\n<p><strong>d3.annotationXYThreshold</strong></p>\n<ul>\n<li>x1, x2 or y1, y2: Number, pixels</li>\n</ul>\n<p><strong>d3.annotationBadge</strong>: this is the only base annotation that doesn&#39;t have a connector or note</p>\n<ul>\n<li>text: String</li>\n<li>radius: Number, pixels</li>\n<li>x: &quot;left&quot; or &quot;right&quot;</li>\n<li>y: &quot;top&quot; or &quot;bottom&quot;</li>\n</ul>\n<p><strong>No subject</strong></p>\n<ul>\n<li>d3.annotationLabel</li>\n<li>d3.annotationCallout</li>\n<li>d3.annotationCalloutElbow</li>\n<li>d3.annotationCalloutCurve</li>\n</ul>\n<h3 id=\"customize-the-connector-and-note\">Customize the Connector and Note</h3>\n<p>The Options panel in the <a href=\"#types\">Annotation Types UI</a> exposes all of the options for connectors and notes. So the &quot;Line Type&quot; in the UI maps to <code>{ connector: { lineType : &quot;horizontal&quot; } }</code></p>\n<p>There are two ways to customize the connectors and notes. You can either change these properties per annotation:</p>\n<pre><code class=\"lang-js\">const annotations = [{\n  note: { label: &quot;Hi&quot;},\n  x: 100, y 100,\n  dy: 137, dx: 162,\n  type: d3.annotationCalloutElbow,\n  connector: { end: &quot;arrow&quot; }\n}]\n\nd3.annotation().annotations(annotations)\n</code></pre>\n<p>Or if you want all of the annotations to have these settings create a custom type with\n<strong>d3.annotationCustomType(annotationType, typeSettings)</strong>:</p>\n<pre><code class=\"lang-js\">const calloutWithArrow =\n  d3.annotationCustomType(\n    d3.annotationCalloutElbow,\n    { connector: { end: &quot;arrow&quot; }}\n  )\n\nd3.annotation()\n  .type(calloutWithArrow)\n  .annotations([{\n    text: &quot;Plant paradise&quot;,\n    data: { date: &quot;18-Sep-09&quot;, close: 185.02 },\n    dy: 37,\n    dx: 42\n  }])\n  .editMode(true)\n</code></pre>\n<p>Both examples above produce the same results.</p>\n<h3 id=\"select\"><a href=\"#select\">#</a>Selecting Elements</h3>\n\n<ul>\n<li>All of the visible shapes (aside from the edit handles) in the default annotations are <strong>paths</strong></li>\n<li>There is an invisible rect (<code>rect.annotation-note-bg</code>) behind the text in the notes as a helper for more click area etc.</li>\n<li>Hierarchy of classes:\n<img src=\"img/classes.png\" alt=\"Annotation classes\"></li>\n<li>Within the g.annotation-note-content there could be three additional elements: <code>text.annotation-note-label</code>, <code>text.annotation-note-title</code>, <code>rect.annotation-note-bg</code></li>\n</ul>\n<h3 id=\"styles\"><a href=\"#styles\">#</a> Basic Styles</h3>\n\n<p>Now the library comes with default styles, read more about it in the <a href=\"http://www.susielu.com/data-viz/d3-annotation-2\">2.0 release</a> post.</p>\n<p>Before v2, there were style sheets you needed to use: </p>\n<p>Available on <a href=\"https://github.com/susielu/d3-annotation/blob/e7ba1e83f279a63e056964b080019d647f57e34c/d3-annotation.css\">github</a>.</p>\n<h3 id=\"tips\"><a href=\"#tips\">#</a>Tips</h3>\n\n<ul>\n<li>In addition to the alignment settings for the note, you can also use the css <code>text-anchor</code> attribute to align the text within the note</li>\n<li>When you update the d3.annotation().type() you will need to use the call functionality again to set up the annotations with the new type. See the <a href=\"#responsive\">Responsive with Types and Hover</a> example</li>\n<li>You do not need to call d3.annotation().update() if you are only changing the position(x,y) or the offset(dx, dy). See the <a href=\"#overlapping\">Overlapping</a> example</li>\n<li>If you are importing custom fonts, you may notice the annotations don&#39;t load perfectly with text wrapping and alignment. To fix that you can use, <code>document.fonts.ready</code> to make sure the fonts are loaded first to reflect the custom font&#39;s spacing for all of the calculations. Here&#39;s an example:</li>\n</ul>\n<pre><code class=\"lang-js\">    document.fonts.ready.then(function(){\n      d3.select(&quot;svg&quot;)\n        .append(&quot;g&quot;)\n        .attr(&quot;class&quot;, &quot;annotation-group&quot;)\n        .style(&#39;font-size&#39;, fontSize(ratio))\n        .call(makeAnnotations)\n    })\n</code></pre>\n";
+module.exports = "<h2><a href=\"#in-practice\">#</a>In Practice</h2>\n\n<p>All annotations are made of just three parts, a <strong>note</strong>, a <strong>connector</strong>, and a <strong>subject</strong>.</p>\n<p><img alt=\"Anatomy of an annotation\" src=\"img/anatomy.png\" /></p>\n<p>They are the foundational blocks of this library.</p>\n<h3 id=\"customize-the-subject-by-picking-a-base-annotation\">Customize the Subject by picking a base annotation</h3>\n<p>Settings for subject types are in the annotation object&#39;s <code>.subject</code>:</p>\n<pre><code class=\"lang-js\">const annotations = [\n  {\n    note: { label: &quot;Hi&quot; },\n    x: 100,\n    y: 100,\n    dy: 137,\n    dx: 162,\n    subject: { radius: 50, radiusPadding: 10 },\n  },\n];\n\nd3.annotation().annotations(annotations);\n</code></pre>\n<p><strong>d3.annotationCalloutCircle</strong></p>\n<ul>\n<li>radius or outerRadius and innerRadius: Number, pixels</li>\n<li>radiusPadding: Number, pixels</li>\n</ul>\n<p><strong>d3.annotationCalloutRect</strong></p>\n<ul>\n<li>width: Number, pixels</li>\n<li>height: Number, pixels</li>\n</ul>\n<p><strong>d3.annotationXYThreshold</strong></p>\n<ul>\n<li>x1, x2 or y1, y2: Number, pixels</li>\n</ul>\n<p><strong>d3.annotationBadge</strong>: this is the only base annotation that doesn&#39;t have a connector or note</p>\n<ul>\n<li>text: String</li>\n<li>radius: Number, pixels</li>\n<li>x: &quot;left&quot; or &quot;right&quot;</li>\n<li>y: &quot;top&quot; or &quot;bottom&quot;</li>\n</ul>\n<p><strong>No subject</strong></p>\n<ul>\n<li>d3.annotationLabel</li>\n<li>d3.annotationCallout</li>\n<li>d3.annotationCalloutElbow</li>\n<li>d3.annotationCalloutCurve</li>\n</ul>\n<h3 id=\"customize-the-connector-and-note\">Customize the Connector and Note</h3>\n<p>The Options panel in the <a href=\"#types\">Annotation Types UI</a> exposes all of the options for connectors and notes. So the &quot;Line Type&quot; in the UI maps to <code>{ connector: { lineType : &quot;horizontal&quot; } }</code></p>\n<p>There are two ways to customize the connectors and notes. You can either change these properties per annotation:</p>\n<pre><code class=\"lang-js\">const annotations = [\n  {\n    note: { label: &quot;Hi&quot; },\n    x: 100,\n    y: 100,\n    dy: 137,\n    dx: 162,\n    type: d3.annotationCalloutElbow,\n    connector: { end: &quot;arrow&quot; },\n  },\n];\n\nd3.annotation().annotations(annotations);\n</code></pre>\n<p>Or if you want all of the annotations to have these settings create a custom type with\n<strong>d3.annotationCustomType(annotationType, typeSettings)</strong>:</p>\n<pre><code class=\"lang-js\">const calloutWithArrow = d3.annotationCustomType(d3.annotationCalloutElbow, {\n  connector: { end: &quot;arrow&quot; },\n});\n\nd3.annotation()\n  .type(calloutWithArrow)\n  .annotations([\n    {\n      text: &quot;Plant paradise&quot;,\n      data: { date: &quot;18-Sep-09&quot;, close: 185.02 },\n      dy: 37,\n      dx: 42,\n    },\n  ])\n  .editMode(true);\n</code></pre>\n<p>Both examples above produce the same results.</p>\n<h3 id=\"select\"><a href=\"#select\">#</a>Selecting Elements</h3>\n\n<ul>\n<li>All of the visible shapes (aside from the edit handles) in the default annotations are <strong>paths</strong></li>\n<li>There is an invisible rect (<code>rect.annotation-note-bg</code>) behind the text in the notes as a helper for more click area etc.</li>\n<li>Hierarchy of classes:\n<img src=\"img/classes.png\" alt=\"Annotation classes\"></li>\n<li>Within the g.annotation-note-content there could be three additional elements: <code>text.annotation-note-label</code>, <code>text.annotation-note-title</code>, <code>rect.annotation-note-bg</code></li>\n</ul>\n<h3 id=\"styles\"><a href=\"#styles\">#</a> Basic Styles</h3>\n\n<p>Now the library comes with default styles, read more about it in the <a href=\"http://www.susielu.com/data-viz/d3-annotation-2\">2.0 release</a> post.</p>\n<p>Before v2, there were style sheets you needed to use:</p>\n<p>Available on <a href=\"https://github.com/susielu/d3-annotation/blob/e7ba1e83f279a63e056964b080019d647f57e34c/d3-annotation.css\">github</a>.</p>\n<h3 id=\"tips\"><a href=\"#tips\">#</a>Tips</h3>\n\n<ul>\n<li>In addition to the alignment settings for the note, you can also use the css <code>text-anchor</code> attribute to align the text within the note</li>\n<li>When you update the d3.annotation().type() you will need to use the call functionality again to set up the annotations with the new type. See the <a href=\"#responsive\">Responsive with Types and Hover</a> example</li>\n<li>You do not need to call d3.annotation().update() if you are only changing the position(x,y) or the offset(dx, dy). See the <a href=\"#overlapping\">Overlapping</a> example</li>\n<li>If you are importing custom fonts, you may notice the annotations don&#39;t load perfectly with text wrapping and alignment. To fix that you can use, <code>document.fonts.ready</code> to make sure the fonts are loaded first to reflect the custom font&#39;s spacing for all of the calculations. Here&#39;s an example:</li>\n</ul>\n<pre><code class=\"lang-js\">document.fonts.ready.then(function () {\n  d3.select(&quot;svg&quot;)\n    .append(&quot;g&quot;)\n    .attr(&quot;class&quot;, &quot;annotation-group&quot;)\n    .style(&quot;font-size&quot;, fontSize(ratio))\n    .call(makeAnnotations);\n});\n</code></pre>\n";
 },{}],5:[function(require,module,exports){
 module.exports = "<h2><a href=\"#introduction\">#</a>Introduction</h2>\n\n<p>Annotations <strong>establish context, and direct our users to insights and anomalies</strong>. So why are annotations so few and far between in visualizations on the web? Because <strong>implementing them is difficult.</strong></p>\n<p><strong>But it shouldn&#39;t be.</strong> </p>\n<p>Use d3-annotation with built-in annotation types, or extend it to make custom annotations. It is made for <a href=\"https://github.com/d3/d3/blob/master/CHANGES.md\">d3-v4</a> in SVG. </p>\n<p>Contact me through the <a href=\"https://www.github.com/susielu/d3-annotation\">github repo</a> or <a href=\"https://www.twitter.com/DataToViz\">twitter</a>.</p>\n";
 },{}],6:[function(require,module,exports){
@@ -1206,7 +1206,7 @@ $(document).ready(function () {
 
     d3.select("#sandbox-code code").text(typeText + "\n" + "const annotations = [{\n" + "  note: {\n" + '    label: "Longer text to show text wrapping",\n' + (types[typeKey] && types[typeKey].typeSettings.note && types[typeKey].typeSettings.note.bgPadding && "    bgPadding: " + JSON.stringify(types[typeKey].typeSettings.note.bgPadding) + ",\n" || "") + '    title: "Annotations :)"\n' + "  },\n" + "  //can use x, y directly instead of data\n" + '  data: { date: "18-Sep-09", close: 185.02 },\n' + (types[typeKey] && types[typeKey].typeSettings.className && "  className: " + JSON.stringify(types[typeKey].typeSettings.className) + ",\n" || "") + "  dy: 137,\n" + ("  dx: 162" + (curveText !== "" || subjectText !== "" ? "," : "") + "\n") + curveText + (subjectText !== "" && curveText !== "" ? ",\n" : "") + subjectText + "}]\n" + "\n" + 'const parseTime = d3.timeParse("%d-%b-%y")\n' + 'const timeFormat = d3.timeFormat("%d-%b-%y")\n' + "\n" + "//Skipping setting domains for sake of example\n" + "const x = d3.scaleTime().range([0, 800])\n" + "const y = d3.scaleLinear().range([300, 0])\n" + "\n" + "const makeAnnotations = d3.annotation()\n" + editModeText + disableText + textWrapText + paddingText + "  .type(type)\n" + "  //accessors & accessorsInverse not needed\n" + "  //if using x, y in annotations JSON\n" + "  .accessors({\n" + "    x: d => x(parseTime(d.date)),\n" + "    y: d => y(d.close)\n" + "  })\n" + "  .accessorsInverse({\n" + "     date: d => timeFormat(x.invert(d.x)),\n" + "     close: d => y.invert(d.y)\n" + "  })\n" + "  .annotations(annotations)\n" + "\n" + 'd3.select("svg")\n' + '  .append("g")\n' + '  .attr("class", "annotation-group")\n' + "  .call(makeAnnotations)\n");
 
-    $("#sandbox-code code").each(function (i, block) {
+    $("code").each(function (i, block) {
       highlight.highlightBlock(block);
     });
   };