Notebooks Prototype v3

index.pug

- let counter = 1
- let cells = [{group: 1, type: 'text', heading: 'Common plotting pitfalls with large data', paragraph: 'When working with large datasets, visualizations are often the only way available to understand the properties of that dataset -- there are simply too many data points to examine each one!  Thus it is very important to be aware of some common plotting problems that are minor inconveniences with small datasets but very serious problems with larger ones.', git: 'modified'},{group: 1, type: 'code', string: 'import matplotlib.pyplot as plt\nimport numpy as np', time: '0.1'},{group: 1, type: 'code', string: 'print("Hello World")', time: "0.3", output: 'Hello World',git: 'added'},{group: 2, type: 'text', heading: '1. Overplotting', paragraph: 'Let\'s consider plotting some 2D data points that come from two separate categories, here plotted as blue and red in **A** and **B** below.  When the two categories are overlaid, the appearance of the result can be very different depending on which one is plotted first:'},{group: 2, type: 'code', string: 'def blues_reds(offset=0.5,pts=300):\n    blues = (np.random.normal( offset,size=pts), np.random.normal( offset,size=pts), -1*np.ones((pts)))\n    reds  = (np.random.normal(-offset,size=pts), np.random.normal(-offset,size=pts),  1*np.ones((pts)))\n    return hv.Points(blues, vdims=["c"]), hv.Points(reds, vdims=["c"])\n\nblues,reds = blues_reds()\nblues + reds + reds*blues + blues*reds', time: '2.5', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/61037/notebooks-scatter-plot.png'},{group: 3,type: 'text', heading: '2. Oversaturation', paragraph: 'You can reduce problems with overplotting by using transparency/opacity, via the alpha parameter provided to control opacity in most plotting programs.  E.g. if alpha is 0.1, full color saturation will be achieved only when 10 points overlap, reducing the effects of plot ordering but making it harder to see individual points:'},{group: 3,type: 'code', string: '%%opts Points (s=50 alpha=0.1)\nblues + reds + reds*blues + blues*reds', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/61037/scatter-plot-2.png', git: 'added'}]

- let menu = [{name: 'Lock Cell', shortcut: '⌘⇧L'},{name: 'Change Cell Type', shortcut: 'Y'},{name: 'Move cell up', shortcut: '⌥↑'},{name: 'Show cell toolbar', shortcut: '⌥↓', border: true},{name: 'Delete cell', shortcut: 'Backspace'}]

body.dark
  a(id="theme", href="#")="Toggle Theme"
  .menu-overlay
    ul#menu
      each item in menu
        if item.border
          li.border

        li
          span=item.name
          span.shortcut=item.shortcut

  #cells
    
    each cell in cells
      .cell-container
        .cell(class=cell.git, id=index, data-type=cell.type, data-group=cell.group)
          .side
            .execution= '[' + counter + ']'
            #actions
              if cell.type == 'text'
                svg(class="fold" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                  path(fill-rule="evenodd" clip-rule="evenodd" d="M7.97612 10.0719L12.3334 5.7146L12.9521 6.33332L8.28548 11L7.66676 11L3.0001 6.33332L3.61882 5.7146L7.97612 10.0719Z" fill="#C5C5C5")
                svg(class="folded" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                  path(fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 8.02397L5.7146 3.66666L6.33332 3.04794L11 7.71461V8.33333L6.33332 13L5.7146 12.3813L10.0719 8.02397Z" fill="#C5C5C5")
              if cell.type == 'code'
                svg(id="run" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                  path(fill-rule="evenodd" clip-rule="evenodd" d="M4 2V14.4805L12.9146 8.24024L4 2ZM11.1809 8.24024L4.995 12.5684V3.91209L11.1809 8.24024Z" fill="#C5C5C5")
              svg(id="gripper" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                path(d="M5.00806 2.992L7.00806 2.992V4.992H5.00806V2.992ZM5.00806 6.992H7.00806L7.00806 8.992H5.00806V6.992ZM5.00806 10.992H7.00806V12.992H5.00806L5.00806 10.992ZM9.00806 2.992L11.0081 2.992V4.992H9.00806V2.992ZM9.00806 6.992L11.0081 6.992V8.992H9.00806V6.992ZM9.00806 10.992H11.0081L11.0081 12.992L9.00806 12.992L9.00806 10.992Z" fill="#C5C5C5")
          .toolbar
            if cell.type == 'text'
              svg(width="16" height="16" viewBox="0 0 16 16")
                path(d="M13.23 1H11.7701L3.52008 9.25L3.36005 9.46997L1.00006 13.59L2.4101 15L6.53009 12.64L6.75006 12.48L15.0001 4.22998V2.77002L13.23 1ZM2.4101 13.59L3.9201 10.59L5.37006 12.04L2.4101 13.59ZM6.24005 11.53L4.47003 9.76001L12.47 1.76001L14.2401 3.53003L6.24005 11.53Z" fill="#C5C5C5")
            //- svg(width="16" height="16" viewBox="0 0 16 16")
            //-     path(d="M4.708 5.578L2.061 8.224L4.708 10.87L4 11.578L1 8.578V7.87L4 4.87L4.708 5.578ZM11.708 4.87L11 5.578L13.647 8.224L11 10.87L11.708 11.578L14.708 8.578V7.87L11.708 4.87ZM4.908 13L5.802 13.448L10.802 3.448L9.908 3L4.908 13Z" fill="#C5C5C5")
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M13 7H12V5C12 3.93913 11.5786 2.92178 10.8284 2.17163C10.0783 1.42149 9.06087 1 8 1C6.93913 1 5.92172 1.42149 5.17157 2.17163C4.42142 2.92178 4 3.93913 4 5V7H3L2 8V14L3 15H13L14 14V8L13 7ZM5 5C5 4.20435 5.31605 3.44127 5.87866 2.87866C6.44127 2.31605 7.20435 2 8 2C8.79565 2 9.55873 2.31605 10.1213 2.87866C10.6839 3.44127 11 4.20435 11 5V7H5V5ZM13 14H3V8H13V14Z" fill="#C5C5C5")
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(fill-rule="evenodd" clip-rule="evenodd" d="M9.99994 3H11.9999H12.9999V4H11.9999V13L10.9999 14H3.99994L2.99994 13V4H1.99994V3H4.99994V2C4.99994 1.73478 5.10525 1.48038 5.29279 1.29285C5.48032 1.10531 5.73472 1 5.99994 1H8.99994C9.26516 1 9.51956 1.10531 9.70709 1.29285C9.89463 1.48038 9.99994 1.73478 9.99994 2V3ZM8.99994 2H5.99994V3H8.99994V2ZM3.99994 13H10.9999V4H3.99994V13ZM5.99994 5H4.99994V12H5.99994V5ZM6.99994 5H7.99994V12H6.99994V5ZM8.99994 5H9.99994V12H8.99994V5Z" fill="#C5C5C5")
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M4 8C4 8.19778 3.94135 8.39112 3.83147 8.55557C3.72159 8.72002 3.56541 8.84819 3.38268 8.92388C3.19996 8.99957 2.99889 9.01937 2.80491 8.98079C2.61093 8.9422 2.43275 8.84696 2.29289 8.70711C2.15304 8.56725 2.0578 8.38907 2.01922 8.19509C1.98063 8.00111 2.00043 7.80004 2.07612 7.61732C2.15181 7.43459 2.27998 7.27841 2.44443 7.16853C2.60888 7.05865 2.80222 7 3 7C3.26522 7 3.51957 7.10536 3.70711 7.29289C3.89464 7.48043 4 7.73478 4 8Z" fill="#C5C5C5")
              path(d="M9 8C9 8.19778 8.94135 8.39112 8.83147 8.55557C8.72159 8.72002 8.56541 8.84819 8.38268 8.92388C8.19996 8.99957 7.99889 9.01937 7.80491 8.98079C7.61093 8.9422 7.43275 8.84696 7.29289 8.70711C7.15304 8.56725 7.0578 8.38907 7.01922 8.19509C6.98063 8.00111 7.00043 7.80004 7.07612 7.61732C7.15181 7.43459 7.27998 7.27841 7.44443 7.16853C7.60888 7.05865 7.80222 7 8 7C8.26522 7 8.51957 7.10536 8.70711 7.29289C8.89464 7.48043 9 7.73478 9 8Z" fill="#C5C5C5")
              path(d="M14 8C14 8.19778 13.9414 8.39112 13.8315 8.55557C13.7216 8.72002 13.5654 8.84819 13.3827 8.92388C13.2 8.99957 12.9989 9.01937 12.8049 8.98079C12.6109 8.9422 12.4327 8.84696 12.2929 8.70711C12.153 8.56725 12.0578 8.38907 12.0192 8.19509C11.9806 8.00111 12.0004 7.80004 12.0761 7.61732C12.1518 7.43459 12.28 7.27841 12.4444 7.16853C12.6089 7.05865 12.8022 7 13 7C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8Z" fill="#C5C5C5")

          .editor
            if cell.type == 'text'
              .code
                if cell.heading
                  h1=cell.heading
                if cell.paragraph
                  p=cell.paragraph
            else
              .code
               pre
                code(class="python")= cell.string
              .status
                span.left
                  if cell.time || cell.output
                    span.time
                      svg(width="16" height="16" viewBox="0 0 16 16")
                        path(fill-rule="evenodd" clip-rule="evenodd" d="M14.4315 3.3232L5.96151 13.3232L5.1708 13.2874L1.8208 8.5174L2.63915 7.94268L5.61697 12.1827L13.6684 2.67688L14.4315 3.3232Z" fill="#73C991")
                      = cell.time + 's'
                  else
                    span.hint='Ctrl + Enter to run'
                span.right='Python 3.7'
              -counter++
            if cell.output || cell.image
              .output
                if cell.image
                  image(src=cell.image)
                = cell.output
        .cell.new-cell
          .border
          .button.code
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M14.0001 7V8H8.00009V14H7.00009V8H1.00009V7H7.00009V1H8.00009V7H14.0001Z" fill="#C5C5C5")
            ="Code"
          .button.text
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M14.0001 7V8H8.00009V14H7.00009V8H1.00009V7H7.00009V1H8.00009V7H14.0001Z" fill="#C5C5C5")
            ="Markdown"

notebooks-prototype-v3.markdown

Notebooks Prototype v3

A Pen by Miguel Solorio on CodePen.

License.

scripts

<script src="https://codepen.io/miguelsolorio/pen/OJywbgJ"></script>

style.sass

.dark
  --sidebar: #252526
  --activity: #333
  --editor: #1E1E1E
  --iconHighlight: #89d185
  --gitAdded: #587C0C
  --gitModified: #357E9D
  --activeIndicator: #292929
  --focus: #007ACC
  --fontColor: #ccc
  --output: var(--activeIndicator)
  --borderCell: var(--activeIndicator)
  --borderCellStrong: var(--activeIndicator)
  --borderColor: rgba(255, 255, 255, 0.08)
  --borderSelection: rgba(255, 255, 255, 0.12)
  --shadow: rgba(0, 0, 0, 0.8)
  --code: #D4D4D4
  --icon: #c5c5c5

.light
  --sidebar: #f3f3f3
  --activity: #333
  --editor: white
  --iconHighlight: #388a34
  --gitAdded: #81b88b
  --gitModified: #66afe0
  --activeIndicator: #F6F6F6
  --fontColor: #616161
  --focus: #66afc0
  --output: var(--activeIndicator)
  --borderCell: var(--activeIndicator)
  --borderCellStrong: var(--activeIndicator)
  --borderColor: #ccc
  --borderSelection: rgba(0, 0, 0, 0.04)
  --shadow: rgba(0, 0, 0, 0.06)
  --code: #000
  --icon: #414141



*
  box-sizing: border-box

body
  margin: 0
  padding: 0
  font-family: 'Input Mono', monospace
  font-size: 13px
  color: var(--fontColor)
  background-color: var(--editor)
  display: flex
  height: 100%
  overflow: hidden
  flex-direction: column
  align-items: center
  // justify-content: center
#theme
  width: 100%
  padding: 4px 16px
  display: block
  text-align: right
  text-decoration: none
  color: var(--fontColor)

#activity-bar
  flex-shrink: 0
  display: flex
  flex-direction: column
  align-items: center
  width: 48px
  height: 100vh
  background-color: var(--activity)
  svg
    margin: 12px 0

#sidebar
  flex-shrink: 0
  padding: 20px
  width: 250px
  height: 100vh
  background-color: var(--sidebar)

#cells
  flex-shrink: 0
  margin: 0 auto
  width: 100%
  height: 100vh
  overflow: scroll
  min-width: 300px
  padding-top: 16px


.cell
  position: relative
  display: flex
  justify-content: center
  padding: 8px 12px 8px 8px
  margin: 0 auto
  background-color: var(--editor)
  border-top: 1px solid transparent
  border-bottom: 1px solid transparent
  &:before
    content: ""
    position: absolute
    left: 0
    top: 0
    width: 3px
    height: 100%
  &.modified:before
    background-color: var(--gitModified)
  &.added:before
    background-color: var(--gitAdded)
  &:hover:not(.new-cell)
    background-color: var(--activeIndicator)
  &.active:not(.new-cell)
    border-color: var(--borderSelection)
    box-shadow: 0px 2px 8px 2px var(--shadow)
    background-color: var(--activeIndicator)
    .code,.status
      border-color: var(--borderCellStrong)
  &:hover
    #actions #gripper
      opacity: .5 !important

  .side
    text-align: center
    min-width: 28px
    color: var(--fontColor)
    padding-top: 8px
    flex-shrink: 0
    .execution
      opacity: .6
      font-size: 10px
    #actions
      display: none
      flex-direction: column
      height: 100%
      align-items: center
      justify-content: space-between
      #gripper
        margin-bottom: 4px
        opacity: 0
      svg, svg *
        fill: var(--icon)
      svg:active
        transform: scale(1.2)
      #run:hover, .fold:hover,.folded:hover
        cursor: pointer
      .fold
        opacity: 0
      .fold,.folded
        margin: 0 auto
        width: 20px
        height: 20px
      .folded
        display: none
    &:hover
      cursor: grab
    &:active,
    &:focus
      cursor: grabbing !important

  .toolbar
    display: none
    position: absolute
    padding: 2px 4px
    top: -12px
    right: 24px
    border: 1px solid var(--borderColor)
    background-color: var(--editor)
    svg
      width: 16px
      height: 16px
      margin: 2px 4px
      &, & *
        fill: var(--icon)
      &:last-child
        margin-right: 0
      &:hover
        cursor: pointer
      &:active
        transform: scale(1.2)

  .editor
    width: 100%

    &.focus
      .code,.status
        border-color: var(--focus)
    .code,.status
      border: 1px solid var(--borderCell)
    .code
      border-bottom: none
      background-color: var(--editor)
      padding: 8px 16px
      span.color
        color: #C586C0
    .status
      border-top: 1px solid transparent !important
      font-family: -apple-system, BlinkMacSystemFont, sans-serif
      background-color: var(--editor)
      color: var(--fontColor)
      font-size: 12px
      border-top: none
      padding: 4px 16px
      display: flex
      svg
        width: 14px
        height: 14px
      .time
        display: flex
        align-items: center
        svg
          margin-right: 4px
          &, & *
            fill: var(--iconHighlight)
      .right
        margin-left: auto

    .output
      font-size: 13px
      font-family: -apple-system, BlinkMacSystemFont, sans-serif
      padding: 16px
      background-color: var(--output)
      img
        width: 100%
        height: auto
  &:hover:not(.new-cell)
    .toolbar
      display: flex
    .execution
      display: none
    #actions
      display: flex
      .fold
        opacity: 1

  &[data-type="text"]
    #actions
      display: flex
      #gripper
        display: none
    &:hover #actions #gripper
      display: block
    *:last-child
      margin-bottom: 0
    h1
      font-size: 26px
      margin: 0
      padding-bottom: 8px
      border-bottom: 1px solid rgba(white, 0.18)
    p
      font-size: 13px
      line-height: 22px
      margin: 13px 0
    #run
      display: block
    .status, .execution
      display: none
    .editor
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji
      font-size: 22px
      border: none
      .code
        padding: 4px 16px 8px
        border: none
        background-color: transparent
      h1
        font-weight: 400

.cell-highlight
  height: 2px
  background-color: var(--focus)

.ui-sortable-helper
  opacity: .5
  .side
    &:hover
      cursor: grabbing


.menu-overlay
  display: none
  z-index: 999
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
#menu
  z-index: 999
  position: absolute
  list-style-type: none
  padding: 4px 0
  color: var(--fontColor)
  background-color: var(--sidebar)
  box-shadow: var(--shadow) 0px 4px 8px
  @at-root
    .light #menu
      background-color: var(--editor)
      li:hover
        background-color: #0074E8
  li
    display: flex
    align-items: center
    min-width: 200px
    margin: 0
    padding: 8px 24px
    text-transform: capitalize
    &.border
      margin: 4px 12px 5px 12px
      pointer-events: none
      padding: 1px 0 0 0
      background-color: var(--borderColor)
    &:hover
      color: white
      background-color: #094771
      cursor: pointer
    span
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji
      font-size: 13px
    span.shortcut
      font-family: -apple-system,BlinkMacSystemFont,sans-serif
      margin-left: auto


.new-cell
  opacity: 0
  margin: 0
  padding: 8px 0
  position: relative
  display: flex
  align-items: center
  transition: opacity .2s ease-in
  transition-delay: .1s
  background: tranparent
  &:hover
    opacity: 1
  .border
    z-index: 0
    position: absolute
    width: calc(100% - 48px)
    height: 1px
    left: 24px
    right: 0
    margin: auto
    background-color: var(--borderColor)
  .button
    z-index: 1
    font-size: 12px
    font-family: -apple-system, BlinkMacSystemFont, sans-serif
    padding: 4px 8px
    background-color: var(--editor)
    margin: 0 8px
    display: flex
    align-items: center
    &:hover
      cursor: pointer
    svg
      width: 14px
      height: 14px
      margin-right: 4px
      &, & *
        fill: var(--icon)



pre
  margin: 0
  padding: 0

.hljs
  padding: 0
  background-color: transparent

.hljs
  font-size: 12px
  line-height: 1.2rem
  font-family: 'Input Mono', monospace
  display: block
  overflow-x: auto
  color: var(--code)

.hljs-keyword, .hljs-literal, .hljs-symbol, .hljs-name
  color: #C586C0

.hljs-link
  color: #569CD6
  text-decoration: underline

.hljs-built_in, .hljs-type
  color: #4EC9B0

.hljs-number, .hljs-class
  color: #B8D7A3

.hljs-string, .hljs-meta-string
  color: #D69D85

.hljs-regexp, .hljs-template-tag
  color: #9A5334

.hljs-title
  color: #DCDCAA

.hljs-subst, .hljs-function, .hljs-params
  color: #DCDCDC

.hljs-comment, .hljs-quote
  color: #57A64A
  font-style: italic

.hljs-doctag
  color: #608B4E

.hljs-meta, .hljs-meta-keyword, .hljs-tag
  color: #9B9B9B

.hljs-variable, .hljs-template-variable
  color: #BD63C5

.hljs-attr, .hljs-attribute, .hljs-builtin-name
  color: #9CDCFE

.hljs-section
  color: gold

.hljs-emphasis
  font-style: italic

.hljs-strong
  font-weight: bold

.hljs-bullet, .hljs-selector-tag, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo
  color: #D7BA7D

.hljs-addition
  background-color: #144212
  display: inline-block
  width: 100%

.hljs-deletion
  background-color: #600
  display: inline-block
  width: 100%

.light
  .hljs-keyword, .hljs-literal, .hljs-symbol, .hljs-name
    color: #af00db

  .hljs-link
    color: #569CD6
    text-decoration: underline

  .hljs-built_in, .hljs-type
    color: #4EC9B0

  .hljs-number, .hljs-class
    color: #098658

  .hljs-string, .hljs-meta-string
    color: #a31515

  .hljs-regexp, .hljs-template-tag
    color: #9A5334

  .hljs-title
    color: #795e26

  .hljs-subst, .hljs-function, .hljs-params
    color: #001080

  .hljs-comment, .hljs-quote
    color: #57A64A
    font-style: italic

  .hljs-doctag
    color: #608B4E

  .hljs-meta, .hljs-meta-keyword, .hljs-tag
    color: #9B9B9B

  .hljs-variable, .hljs-template-variable
    color: #BD63C5

  .hljs-attr, .hljs-attribute, .hljs-builtin-name
    color: #9CDCFE

  .hljs-section
    color: gold

  .hljs-emphasis
    font-style: italic

  .hljs-strong
    font-weight: bold

  .hljs-bullet, .hljs-selector-tag, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo
    color: #D7BA7D

  .hljs-addition
    background-color: #144212
    display: inline-block
    width: 100%

  .hljs-deletion
    background-color: #600
    display: inline-block
    width: 100%