index.html

---
layout: default
---

<div class="jumbotron relative" style="min-height: 400px;">
  <canvas class="absolute l-0 t-0 w-100 h-100 o-50" id="jumbotron-canvas"></canvas>
  <div class="relative w-100 mw8 ph4-l ph3 pv5-l pv3 center z-1" style="pointer-events: none;" >
    <h1 class="f1 measure mt3" style="pointer-events: auto;">CMU Data Interaction Group</h1>
    <p class="f4 measure lh-copy" style="pointer-events: auto;">
      We are a research group at the
      <a href="https://www.hcii.cmu.edu/"
        >Human-Computer Interaction Institute</a
      >
      at <a href="https://www.cmu.edu/">Carnegie Mellon University</a>. Our
      mission is to empower everyone to analyze and communicate data with
      interactive systems.
    </p>
    <h3 style="pointer-events: auto">
      <a class="cta" href="{{ '/about' | relative_url }}"
        >Learn more about our group</a
      >
    </h3>
  </div>
</div>

<div class="w-100 mw8 ph4-l ph3 center">
  <section class="pv3">
    <h2 class="f2">Research Areas</h2>

    <p class="f4 measure-wide lh-copy">
      Our group conducts research in computer science at the intersection of
      human-computer interaction, machine learning, data science, programming
      languages, and data management.
    </p>

    <div class="flex flex-row-ns flex-wrap pt3">
      <div class="mr2-ns mv2 w-20-l w-40-m flex-auto shadow-4 pa3 br2">
        <h3 class="f4 mt0">Visualization</h3>
        <p class="measure lh-copy">
          Visualization leverages human perception to make (potentially large)
          data accessible. We are developing new languages and tools for
          analysis and communication.
        </p>
      </div>
      <div class="mh2-ns mr0-m mv2 w-20-l w-40-m flex-auto shadow-4 pa3 br2">
        <h3 class="f4 mt0">Human-Centered Data Science</h3>
        <p class="measure lh-copy">
          While computers can help us manage data, human judgment and domain
          expertise is what turns it into understanding. Meeting the challenges
          of increasingly large and complex data requires methods that richly
          integrate the capabilities of both people and machines.
        </p>
      </div>
      <div class="mh2-l mr2-ns mv2 w-20-l w-40-m flex-auto shadow-4 pa3 br2">
        <h3 class="f4 mt0">Interpretable Machine Learning</h3>
        <p class="measure lh-copy">
          Machine learning allows data scientists to summarize, aggregate, and
          make predictions about their data. But computers don't explain their
          predictions, which limits interpretability and actionable insights. We
          create techniques and systems that make models and their decisions
          understandable.
        </p>
      </div>
      <div class="ml2-ns mv2 w-20-l w-40-m flex-auto shadow-4 pa3 br2">
        <h3 class="f4 mt0">Design for Machine Learning</h3>
        <p class="measure lh-copy">
          To create ML-based applications, we need to understand and design for
          everyone involved in the development process—the engineers who build
          the models, the designers who create the experiences, and the people
          who use the products.
        </p>
      </div>
    </div>
  </section>

  <div class="flex flex-row-ns flex-column pv3">
    <section class="pr3 w-two-thirds-l w-50-m">
      <h2 class="f3">News</h2>

      <ul class="list pl0">
        {% assign sorted_posts = site.posts %} {% for post in sorted_posts
        limit:5 %}
        <li class="pb2">
          <a href="{{ post.url }}">{{ post.title }}</a>
          <time datetime="{{ post.date }}" class="db f6 black-80"
            >{{ post.date | date: "%b %Y" }}</time
          >
        </li>
        {% endfor %}
      </ul>
      <a class="cta" href="/news">Show all</a>
    </section>

    <section class="pl3-ns w-third-l w-50-m">
      <h2 class="f3">Courses</h2>

      <ul class="list pl0">
        {% assign i = 0 %}
        {% assign break_loop = false %}
        {% assign years = site.courses | group_by: 'year' %}{% assign
        sorted_years = years | reverse %}{% for year in sorted_years %} {%
        assign sorted_courses = year.items | sort: 'semester' %} {% for course
        in sorted_courses %}
        
        {% assign i = i | plus: 1 %}
        {% if i > 5 %} 
        {% assign break_loop = true %}  
        {% break %}     
        {% endif %}

        <li class="pb2">
          <a href="{{ course.url }}">{{ course.name }}</a>
          <span class="db f6 black-80"
            >{{ course.semester }} {{ course.year }}</span
          >
        </li>
        {% endfor %} 
        
        {% if break_loop %}
        {% break %}
        {% endif %}

        {% endfor %}
      </ul>
      <a class="cta" href="/courses">Show all</a>
    </section>
  </div>

  <!-- <div class="mv3 measure-wide">
    <h2 class="f3 mt0">Participate</h2>
    <p class="lh-copy">
      Interested in sharing your expertise with us? Check out our ongoing
      research studies with visualization, machine learning, and data science
      practitioners!
    </p>
    <a class="link dim dib cta" href="/studies"> Learn More </a>
  </div> -->

  <section class="pv3">
    <h2 class="f3">Recent Publications</h2>

    <a class="cta" href="/publications">Show all</a>

    {% assign recent_pubs = site.publications | reverse %} {% include
    publications.html publications=recent_pubs limit=7 %}

    <a class="cta" href="/publications">Show all</a>
  </section>
</div>

<script type="module" defer>
  {% include jumbotron.js %}
</script>
<style>
  @media (prefers-reduced-motion) or (prefers-contrast: more) {
    #jumbotron-canvas {
      display: none;
    }
  }
</style>