rtapella.github.io/methane.html at master · rtapella/rtapella.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Methane Map Web Site - Rob Tapella</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <style>
        /* Page-specific styles */
        .hero {
            background-color: #d0d0d0;
            padding: 60px 40px;
            text-align: left;
        }

        .hero h1 {
            font-size: 36px;
            font-weight: 400;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
        }

        @media (max-width: 1024px) {
            .hero {
                padding: 40px 20px;
            }

            .hero h1 {
                font-size: 32px;
            }
        }

        @media (max-width: 768px) {
            .hero {
                padding: 30px 15px;
                text-align: center;
            }

            .hero h1 {
                font-size: 28px;
            }
        }
    </style>
</head>

<body>
    <header class="header">
        <a href="index.html" class="logo">ROB TAPELLA</a>
        <nav class="nav">
            <a href="index.html">HOME</a>
            <a href="about.html">ABOUT</a>
            <div class="dropdown">
                <a href="#" class="dropbtn active">WORK</a>
                <div class="dropdown-content">
                    <a href="methane.html" class="active">Methane Map Web Site</a>
                    <a href="data-dashboard.html">DNA Sequencing Data Dashboard</a>
                    <a href="rna-quantification.html">RNA Quantification Reagent</a>
                    <a href="service-map.html">Service Journey Map</a>
                </div>
            </div>

        </nav>
    </header>

    <!-- Hero Section with Image -->
    <div class="hero-image-container">
        <img src="images/methane-hero.jpg" alt="Methane Map Visualization" class="hero-image">
        <div class="hero-overlay">
            <h1>Methane Map Web Site</h1>
        </div>
    </div>

    <main class="main">
        <div class="grid-container">
            <div class="left-sidebar">
                <div class="content-section">
                    <h2 class="section-title">MY ACTIVITIES:</h2>
                    <div class="section-content">
                        <ul>
                            <li>Product manager and Design Lead</li>
                            <li>User research and analysis</li>
                            <li>Interaction and User Interface design</li>
                            <li>Usability testing</li>
                            <li>Requirements development</li>
                        </ul>
                    </div>
                </div>

                <div class="content-section">
                    <h2 class="section-title">OTHER TEAM MEMBERS:</h2>
                    <div class="section-content">
                        <ul>
                            <li><a href="http://aaronplave.com/">Aaron Plave</a> (UI design and development)</li>
                            <li>Josh Rodriguez (UI development)</li>
                            <li><a href="https://www.flickr.com/photos/kevinmgill/">Kevin Gill</a> (back-end
                                development)</li>
                            <li><a href="https://www.linkedin.com/in/laurenawong">Lauren Wong</a> (early-phase design
                                and research)</li>
                        </ul>
                    </div>
                </div>

                <div class="content-section">
                    <h2 class="section-title">TOOLS:</h2>
                    <div class="section-content">
                        <ul>
                            <li>Pen & paper</li>
                            <li><a href="https://github.com/mrsds/msf-ui-design">Figma for UI designs</a></li>
                            <li>OmniGraffle for task flows</li>
                            <li>Github and Zenhub for management</li>
                            <li>MS Word, Excel</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="main-content">
                <div class="content-section">
                    <div class="section-content">
                        <p>Methane Source Finder (<a href="https://msf.carb.arb.ca.gov/map">MSF</a>) is a map-based web
                            application to connect point-sources of methane emissions with nearby infrastructure that
                            may be related to the release of that greenhouse gas. It allows specific types of users to
                            answer questions using searchable lists or a map-based data visualization, or to analyze
                            patterns in the overall data set using an analytics-view.</p>

                        <p>The target users include engineers and regulators at California agencies that have started to
                            monitor methane, as well as facility operators who are interested in determining whether
                            process improvements might help them reduce methane emissions and avoid product loss (e.g.,
                            leaky pipes).</p>

                        <p>The website was intentionally designed toward goals of regulators and facility operators who
                            want to connect observations of methane emissions to facilities on the ground.</p>
                    </div>
                </div>

                <div class="content-section">
                    <h2 class="section-title">WHY METHANE?</h2>
                    <div class="section-content">
                        <p>Methane is a greenhouse gas that creates a warming effect that is far stronger than carbon
                            dioxide for equivalent volumes of gas. Methane is also related to some dangerous situations
                            such as gas pipeline leaks that are difficult to detect when they occur in unexpected
                            locations—for example the infamous <a
                                href="https://en.wikipedia.org/wiki/Aliso_Canyon_gas_leak">Aliso Canyon gas leak</a> in
                            2015.</p>

                        <p>A very large portion of methane emissions is from so-called "fugitive emissions" from a
                            relatively small number of facilities. This makes it easy to make a big impact by detecting
                            and remediating accidental emissions at a few dozen facilities. Emissions in
                            2018 were self-reported and based on assumptions rather than actual measurements. A team at
                            NASA-JPL has been conducting airborne observations of methane emissions for a few years in
                            order to help build some empirical evidence for emission-patterns and emission-distribution,
                            as well as a start at understanding natural emissions as compared to industrial emissions.
                        </p>
                    </div>
                </div>

                <div class="project-image-container wide">
                    <img src="images/MSF_Annotated.jpg"
                        alt="Methane Source Finder web application interface showing a map with methane emission data points and various UI controls"
                        class="project-image">
                    <p class="image-caption">Methane Source Finder annotated with some key design features.</p>
                </div>

                <div class="content-section">
                    <h2>CONCLUSION AND IMPACT</h2>
                    <div class="section-content">
                        <p>Several regulatory <strong>agencies</strong> in California <strong>are using MSF</strong> to
                            help identify the largest observed
                            emission sources of methane, and to understand its distribution across different industries.
                            It also <strong>enhanced the research process</strong> for the team generating the data so
                            that data curation
                            and quality control could be done more easily as the data-processing pipeline was developed.
                        </p>

                        <p>Additional collaborations with facility operators have also used the site to help navigate
                            the various disparate data sets in a seamless way.</p>

                        <p>When the site launch it had over 2000 users on the first day, which for the team was a
                            surprisingly enthusiastic response for such a niche scientific resource.</p>

                        <p>The MSF web site was developed along with new analysis methods based on convolutional
                            neural-network (CNN) image analysis of infrared spectroscopy data gathered on an airborne
                            platform—this analysis helps to identify methane point-sources at scale. A team also
                            developed a GIS database of facilities to better understand the potential sources of methane
                            plumes. The web site is designed to integrate these data sets together in a natural way.</p>
                    </div>
                </div>


                <div class="content-section">
                    <h2 class="section-title">DESIGN HIGHLIGHTS</h2>
                    <div class="section-content">
                        <p>Some key decisions were made to separate the design of this GIS application from other
                            (ostensibly) similar apps developed by our team.</p>

                        <p>1. There are two tabbed list-views of items on the left: Methane Plumes and Infrastructure.
                            These are the <strong>two main types of data that are important to regulators and
                                facilities</strong>, and let them quickly answer questions like “what are the largest
                            plumes
                            that have been observed here?” or “what plumes have been observed over my landfill"?”.</p>

                        <p>2. Unlike most scientific applications that have a large number of layers with relatively
                            obscure names, we have attempted to <strong>compress the layer management</strong> into a
                            small
                            number of top-level layers with flavors underneath. This is because the expectation is that
                            you will not use this site to do comparisons of several gridded-data layers, but to compare
                            wide-scale data to facilities and point-source emissions. <strong>Each layer is designed to
                                answer a specific question</strong> that might come to mind when browsing the site.</p>

                        <p>3. Unlike satellite data, airborne data is very sporadic. We have <strong>developed a
                                timeline
                                view that reflects the sporadic nature of the data</strong> and which also triggers
                            time-based searches when you click on it—rather than presenting a more complex time-search
                            widget in the text-search area.</p>

                        <p>4. We also avoided having the user specify the geographic boundaries of queries by simply
                            <strong>using the current view as the search area</strong>—more akin to Google Maps than to
                            other
                            big-data science applications that our team typically builds.
                    </div>
                </div>
            </div>
            <div class="right-sidebar">
                <div class="content-section">
                    <h2 class="section-title">Additional info:</h2>
                    <div class="section-content">
                        Images are from the JPL Methane Source Finder web site; operational versions of the site have
                        been <a href="https://msf.carb.arb.ca.gov/map">transferred to CARB</a> and to <a
                            href="https://carbonmapperdata.org/">CarbonMapper</a>.
                    </div><br>
                    <div class="section-content">The site is built using the open-source <a
                            href="https://github.com/nasa/common-mapping-client">Common Mapping Client</a> by NASA-JPL
                        along with other open-source middleware, and hosted on Amazon AWS.</div>
                </div>
            </div>
        </div>
    </main>
    <script src="js/script.js"></script>
    <script src="js/dropdown.js"></script>
</body>

</html>