index.html

---
layout: default
title: Home
permalink: /

jumbotron:
  text: Free software, open standards, and web services for interactive computing across all programming languages
  images:
    - class: fade-in one
      alt: circle of programming language icons
      src: circle1.svg
      width: 677
      height: 286
    - class: fade-in two
      alt: circle of programming language icons
      src: circle2.svg
      width: 677
      height: 286
    - class: fade-in three
      alt: circle of programming language icons
      src: circle3.svg
      width: 677
      height: 286
    - class: main-logo
      alt: jupyter logo
      src: main-logo.svg
      width: 677
      height: 286
  background: white-background.svg

jupyterlab:
  headline: 'JupyterLab: A Next-Generation Notebook Interface'
  description: JupyterLab is the latest web-based interactive development environment for notebooks, code, and data. Its flexible interface allows users to configure and arrange workflows in data science, scientific computing, computational journalism, and machine learning. A modular design invites extensions to expand and enrich functionality.
  class: section-grey
  image:
    alt: examples of jupyterlab workspaces in single document and multiple document workspaces
    src: assets/homepage/labpreview
    width: 885
    height: 627
    loading: eager
  buttons:
  - class:
    href: /try
    text: Try it in your browser
  - class: install-button
    href: /install
    text: Install JupyterLab

notebook:
  headline: 'Jupyter Notebook: The Classic Notebook Interface'
  description: The Jupyter Notebook is the original web application for creating and sharing computational documents. It offers a simple, streamlined, document-centric experience.
  class: section-white
  image:
    alt: example notebook of Lorenz differential equations
    src: assets/homepage/jupyterpreview
    width: 885
    height: 627
  buttons:
  - class:
    href: /try
    text: Try it in your browser
  - class: install-button
    href: /install
    text: Install the Notebook
  features:
  - headline: Language of choice
    description: Jupyter supports over 40 programming languages, including Python, R, Julia, and Scala.
    image:
      alt: icon to represent a language
      src: assets/homepage/language.svg
  - headline: Share notebooks
    description: 'Notebooks can be shared with others using email, Dropbox, GitHub and the <a href="https://nbviewer.jupyter.org/">Jupyter Notebook Viewer</a>.'
    image:
      alt: icon to represent sharing a notebook
      src: assets/homepage/share.svg
  - headline: Interactive output
    description: 'Your code can produce rich, interactive output: HTML, images, videos, LaTeX, and custom MIME types.'
    image:
      alt: icon to represent an interactive widget
      src: assets/homepage/widget.svg
  - headline: Big data integration
    description: Leverage big data tools, such as Apache Spark, from Python, R, and Scala. Explore that same data with pandas, scikit-learn, ggplot2, and TensorFlow.
    image:
      alt: spark logo to represent big data
      src: assets/homepage/spark.svg

jupyterhub:
  image:
    alt: jupyterhub logo
    src: assets/homepage/hublogo.svg
  description: A multi-user version of the notebook designed for companies, classrooms and research labs
  features:
  - class: feature1
    headline: Pluggable authentication
    description: Manage users and authentication with PAM, OAuth or integrate with your own directory service system.
    image:
      alt: authentication icon
      src: assets/homepage/authentication.svg
  - class: feature-middle
    headline: Centralized deployment
    description: Deploy the Jupyter Notebook to thousands of users in your organization on centralized infrastructure on- or off-site.
    image:
      alt: icon to represent centralized deployment
      src: assets/homepage/central.svg
  - class: feature-middle
    headline: Container friendly
    description: Use Docker and Kubernetes to scale your deployment, isolate user processes, and simplify software installation.
    image:
      alt: container icon
      src: assets/homepage/container.svg
  - class: feature4
    headline: Code meets data
    description: Deploy the Notebook next to your data to provide unified software management and data access within your organization.
    image:
      alt: icon to represent data
      src: assets/homepage/data.svg
  button:
    href: /hub
    text: Learn more about JupyterHub

voila:
  headline: 'Voilà: Share your results'
  description: Voilà helps communicate insights by transforming notebooks into secure, stand-alone web applications that you can customize and share.
  class: section-white
  image:
    alt: examples of Voilà dashboards
    src: assets/homepage/voilapreview
    width: 885
    height: 716
  buttons:
  - class:
    href: /try
    text: Try it in your browser
  - class: install-button
    href: /install
    text: Install Voilà

open_standards:
  headline: Open Standards for Interactive Computing
  description: Project Jupyter promotes open standards that third-party developers can leverage to build customized applications. Think HTML and CSS for interactive computing on the web.
  features:
  - headline: Notebook Document Format
    description: Jupyter Notebooks are an open document format based on JSON. They contain a complete record of the user's sessions and include code, narrative text, equations, and rich output.
    image:
      alt: icon to represent notebook format
      src: assets/homepage/notebook-format.svg
  - headline: Interactive Computing Protocol
    description: The Notebook communicates with computational Kernels using the Interactive Computing Protocol, an open network protocol based on JSON data over ZMQ, and WebSockets.
    image:
      alt: icon to represent a protocol
      src: assets/homepage/protocol.svg
  - headline: The Kernel
    description: Kernels are processes that run interactive code in a particular programming language and return output to the user. Kernels also respond to tab completion and introspection requests.
    image:
      alt: icon that looks like a terminal represents kernel
      src: assets/homepage/kernel.svg

# Images should be grayscale SVGs at 300x90 pixels and sorted alphabetically
in_use:
  headline: Currently in use at
  companies:
    - href: https://www.anaconda.com
      src: anaconda.svg
      alt: Anaconda
    - href: https://ayasdi.com
      src: ayasdi.svg
      alt: Ayasdi
    - href: https://www.berkeley.edu
      src: Berkeley.svg
      alt: Berkeley
    - href: https://www.bloomberg.com
      src: bloomberg.svg
      alt: Bloomberg
    - href: https://www.brynmawr.edu
      src: brynmawr.svg
      alt: BrynMawr
    - href: https://www.calpoly.edu
      src: calpoly.svg
      alt: CalPoly
    - href: https://www.clemson.edu
      src: clemson.svg
      alt: Clemson
    - href: https://cocalc.com
      src: cocalc.svg
      alt: CoCalc
    - href: http://codeneuro.org
      src: codeneuro.svg
      alt: CodeNeuro
    - href: https://www.thedataincubator.com
      src: tdi.svg
      alt: The Data Incubator
    - href: https://www.gwu.edu
      src: washington.svg
      alt: George Washington University
    - href: https://www.google.com
      src: google.svg
      alt: Google
    - href: https://www.ibm.com
      src: IBM.svg
      alt: IBM
    - href: https://www.janelia.org
      src: janelia.svg
      alt: Janelia
    - href: https://www.latimes.com
      src: latimes.svg
      alt: Los Angeles Times
    - href: https://msu.edu
      src: michigan-state.svg
      alt: Michigan State University
    - href: https://www.microsoft.com
      src: Microsoft.svg
      alt: Microsoft
    - href: https://www.nasa.gov
      src: NASA.svg
      alt: NASA
    - href: https://www.netapp.com/
      src: netapp.svg
      alt: NetApp
    - href: https://www.linkedin.com/company/nsite-llc/about/
      src: nsite.svg
      alt: NSite
    - href: https://www.nyu.edu/
      src: NYU.svg
      alt: NYU
    - href: https://www.oracle.com/
      src: oracle.svg
      alt: Oracle
    - href: https://www.oreilly.com
      src: oreilly.svg
      alt: OReilly
    - href: https://quantstack.net
      src: quantstack.svg
      alt: QuantStack
    - href: https://developer.rackspace.com
      src: rackspace.svg
      alt: Rackspace
    - href: https://www.sheffield.ac.uk
      src: sheffield.svg
      alt: Sheffield
    - href: https://software-carpentry.org
      src: carpentry.svg
      alt: Software Carpentry
    - href: https://www.soundcloud.com
      src: soundcloud.svg
      alt: SoundCloud
---

<header>
    <div class="jumbotron">
      <div class="col-md-12">
          {% for img in page.jumbotron.images %}
          <div class="jumbotron-image-container">
              <span>
                  <img class="img-responsive {{ img.class }}"
                        src="/assets/homepage/{{ img.src }}"
                        width={{ img.width }}
                        height={{ img.height }}
                        alt="{{ img.alt }}"
                        loading="eager" />
              </span>
          </div>
          {% endfor %}
          <img class="img-responsive"
                src="/assets/homepage/{{ page.jumbotron.background }}"
                width=747
                height=313
                alt="white background"
                loading="eager" />
      </div>
    </div>
    <div class="container">
      <div class="col-md-12">
          <div class="col-md-8 col-md-offset-2">
          <div class="jumbotron-text">{{ page.jumbotron.text }}</div>
          </div>
      </div>
    </div>
</header>

<article>
  {% include homepage-section.html
      class=page.jupyterlab.class
      headline=page.jupyterlab.headline
      description=page.jupyterlab.description
      image=page.jupyterlab.image
      buttons=page.jupyterlab.buttons
  %}

  {% include homepage-section.html
      class=page.notebook.class
      headline=page.notebook.headline
      description=page.notebook.description
      image=page.notebook.image
      buttons=page.notebook.buttons
      features=page.notebook.features
  %}

  <section class="jupyterhub section-grey homepage-section">
    <div>
        <div class="hublogo">
            <img src="{{ page.jupyterhub.image.src }}" class="img-responsive"
                  alt="{{ page.jupyterhub.image.alt }}" loading="lazy" />
        </div>
        <div class="col-md-offset-3 col-md-6 col-md-offset-3 hubdescription">
            <p style="padding-top:24px; text-align: center">{{ page.jupyterhub.description }}</p>
        </div>
    </div>
    <div class="hubfeatures col-md-12">
        {% for feat in page.jupyterhub.features %}
        <div class="{{ feat.class }} hubfeature col-md-3">
            <img src="{{ feat.image.src }}"
                 class="img-responsive"
                 alt="{{ feat.image.alt }}"
                 width="81"
                 height="81"
                 loading="lazy">
            <h3>{{ feat.headline }}</h3>
            <p>{{ feat.description }}</p>
        </div>
        {% endfor %}
    </div>
    <div class="col-md-12 hubbutton">
        <a class="orange-button" href="{{ page.jupyterhub.button.href }}">{{ page.jupyterhub.button.text }}</a>
    </div>
  </section>

  {% include homepage-section.html
      class=page.voila.class
      headline=page.voila.headline
      description=page.voila.description
      image=page.voila.image
      buttons=page.voila.buttons
  %}

  <section class="section-grey homepage-section">
    <h3 class="section-header">{{ page.in_use.headline }}</h3>
    <ul class="logogrid">
    {% for li in page.in_use.companies %}
    <li class="small">
        <a href="{{ li.href }}">
            <img src="/assets/logos/{{ li.src }}"
                  class="greydout"
                  width=300
                  height=90
                  alt="{{ li.alt }}"
                  loading="lazy" />
        </a>
    </li>
    {% endfor %}
    </ul>
  </section>

  <section class="section-white homepage-section openstandards-section">
    <div class="description">
        <h2>{{ page.open_standards.headline }}</h2>
        <p>{{ page.open_standards.description }}</p>
    </div>
    <div class="cardlist">
        {% for feat in page.open_standards.features %}
        <div class="card">
          <img src="{{ feat.image.src }}" alt="{{ feat.image.alt }}" loading="lazy">
          <h3>{{ feat.headline }}</h3>
          <p>{{ feat.description }}</p>
        </div>
        {% endfor %}
    </div>
  </section>

  
</article>