Demo: Updated sample code

- Demo: Updated basic example to reflect parameter for option overrides

- Styles: Removed some dead code, slightly increased size of label
background rectangles

Author: ZechyW

demo/demo.min.css

@@ -34,7 +34,10 @@ <h4>Basic example</h4>
 <code class="language-javascript">const tag = TAG.tag({
   container: "container-id",
   data: {...},
-  format: "odin"
+  format: "odin",
+  options: {
+    showTopArgLabels: true
+  }
 });</code></pre>
 
       <div id="basicContainer" style="border: solid 1px lightgray"></div>

demo/demo.min.css.map

@@ -73,310 +73,4 @@ svg, svg text {
 svg text {
   cursor: default;
   user-select: none;
-}
-
-// -------------------
-
-#fill {
-  /* ensure body takes up entire window */
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-body.full-demo {
-  margin: 0;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
-  /*font-size: 11px;*/
-  min-height: 100%;
-  overflow-y: scroll;
-}
-
-#header {
-  position: fixed;
-  z-index: 100;
-  width: 100%;
-  padding: 10px 20px;
-  background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), white, white);
-  /*background:rgba(255,255,255,0.5);*/
-  top: 0;
-  color: #777;
-  font: 14px/1.5em helvetica, arial, sans-serif;
-}
-
-body.full-demo header > div {
-  float: right;
-  display: inline-block;
-  background: inherit;
-  position: relative;
-}
-
-#dataset,
-body.full-demo header > button {
-  color: inherit;
-  background: none;
-  outline: none;
-  cursor: pointer;
-  font: inherit;
-  border: none;
-  padding: 0;
-  margin: 10px;
-}
-
-#dataset {
-  display: inline-block;
-  height: 40px;
-  background-color: white;
-  border: 1px solid #ddd;
-  transition: background 200ms ease;
-}
-
-#dataset:hover {
-  background: #fafafa;
-}
-
-body.full-demo header > button:hover {
-  border-bottom: 1px solid grey;
-}
-
-/* input */
-#input-modal {
-}
-
-#input-modal textarea {
-  width: 100%;
-  height: 300px;
-  padding: 5px;
-  font-size: 15px;
-}
-
-body.full-demo label[for="file-input"] {
-  padding: 10px 15px;
-  cursor: pointer;
-  background: steelblue;
-  color: white;
-  margin: 10px 0;
-  display: inline-block;
-  border-radius: 5px;
-}
-
-/* modal */
-.modal-tag {
-  color: #222;
-  background: rgba(0, 0, 0, 0.3);
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  position: fixed;
-  z-index: 1000;
-  display: none;
-}
-
-.modal-tag.open {
-  display: block;
-}
-
-.modal-tag > div {
-  background: hsl(5, 5%, 98%);
-  margin: 10vh auto;
-  width: 80%;
-  max-width: 700px;
-  height: 80vh;
-  border-radius: 6px;
-  box-shadow: 0 0 20px black;
-  font-size: 14px;
-  line-height: 1.5em;
-}
-
-.modal-tag header {
-  padding: 0 1em;
-  background: white;
-  white-space: nowrap;
-  overflow-x: auto;
-  cursor: move;
-  box-shadow: 0 0 1em rgba(0, 0, 0, 0.15);
-}
-
-.modal-tag header .tab {
-  background: hsl(5, 5%, 85%);
-  display: inline-block;
-  margin-top: 0.8em;
-  padding: 0.5em 1em;
-  cursor: pointer;
-  border-radius: 3px 3px 0 0;
-  border: 1px solid hsl(5, 5%, 85%);
-  border-bottom: none;
-  text-transform: uppercase;
-  font-size: 0.85em;
-  letter-spacing: 0.03em;
-  color: #555;
-}
-
-.modal-tag header .tab.active {
-  color: #222;
-  background: hsl(5, 5%, 98%);
-}
-
-.modal-tag .page {
-  position: relative;
-  padding: 2em;
-  padding-top: 0.5em;
-  display: none;
-  height: calc(100% - 5.6em);
-  overflow-y: auto;
-}
-
-.modal-tag .page.active {
-  display: block;
-}
-
-.modal-tag svg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-#toggle-taxonomy {
-  font-size: 0.9em;
-  text-decoration: underline;
-  cursor: pointer;
-  color: steelblue;
-  float: right;
-}
-
-#taxonomy > ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-#taxonomy > ul ul {
-  list-style-type: none;
-  padding: 0;
-  padding-left: 1.5em;
-}
-
-#taxonomy li {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-#taxonomy input[type="checkbox"] {
-  margin-right: 0.5em;
-}
-
-#taxonomy input.colorpicker {
-  margin-left: 0.5em;
-  width: 5em;
-  text-align: center;
-  display: inline-block;
-  outline: none;
-  border: 1px solid transparent;
-  padding: 0.4em;
-  border-radius: 3px;
-  cursor: pointer;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-  text-transform: uppercase;
-  -moz-osx-font-smoothing: initial;
-  -webkit-font-smoothing: initial;
-}
-
-#taxonomy input.colorpicker[disabled="true"] {
-  border-color: #ccc;
-  box-shadow: none;
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-#taxonomy input.colorpicker:focus {
-  border-color: white;
-}
-
-body.full-demo > #tree-svg {
-  border-top: 1px solid #ccc;
-  /*box-shadow: 0 0 1em #aaa;*/
-  background: hsl(5, 5%, 98%);
-  position: fixed;
-  bottom: 0;
-  font-size: 14px;
-  height: 200px;
-  width: 100%;
-  max-height: 40vh;
-}
-
-body.full-demo {
-  margin-bottom: 200px;
-}
-
-body.tree-closed {
-  margin-bottom: 0;
-}
-
-body.tree-closed > #tree-svg {
-  display: none;
-}
-
-body.full-demo > #tree-svg #tree-close {
-  display: inline-block;
-}
-
-#tree-close {
-  display: none;
-}
-
-#tree-popout, #tree-close {
-  font-size: 0.9em;
-  text-decoration: underline;
-  cursor: pointer;
-  fill: steelblue;
-}
-
-#tooltip {
-  width: 175px;
-  background: hsl(40, 10%, 98%);
-  margin-bottom: 10px;
-  box-shadow: 0 0 10px #555;
-  border-radius: 3px;
-  position: absolute;
-  padding: 8px 0;
-  font: 14px helvetica, arial, sans-serif;
-  font-weight: 400;
-  color: #444;
-  display: none;
-  z-index: 100;
-}
-
-#tooltip.active {
-  display: block;
-}
-
-#tooltip p {
-  padding: 4px 14px;
-  margin: 0;
-  cursor: default;
-}
-
-#tooltip p:hover {
-  background-color: rgb(77, 157, 250);
-  color: white;
-}
-
-#tooltip hr {
-  border-width: 0;
-  border-top: 1px solid #ddd;
-}
-
-/* svg styles for main vis */
-#main {
-  margin-top: 100px;
-  margin-bottom: 20px;
-  position: relative;
 }

demo/index.html

@@ -83,7 +83,7 @@
 
 .link-text-bg {
   fill: #ffffff;
-  stroke-width: 2px;
+  stroke-width: 3px;
   stroke: #ffffff;
 }