CSEE Talk

Sparse models for integrative analysis

of fMRI and genetic data

Dr. Yu-Ping Wang
Biomedical Engineering Department
Biostatistics & Bioinformatics Department
Tulane University

2pm Thursday, 13 June 2013, ITE 346

In the last few years, the combination of imaging and genetic approaches has become an emerging area, where multiple complementary data are utilized for systematic and comprehensive analysis of a patient. While imaging approaches such as functional MRI (fMRI) continue to be major diagnostic tools for extracting structural and functional patterns at the tissue and organ levels, genetic techniques such as SNPs, microarray gene expression and the emerging next generation sequencing (NGS) add new dimensions by revealing structural variations at genomic level. The integration of these multiscale and multimodality approaches has been promising for complex disease diagnosis and prognosis. However, the combination of these data has been challenging because these data are of different nature, format, organization and structure are produced by different genomic platforms at multiple scales; each of these imaging data is currently still analyzed separately and the results are interpreted independently. Being a powerful approach recently developed in statistics and signal processing, sparse data representations or compressive sensing provides a promising way to address these challenges facing multiscale genomic imaging informatics. In this talk, I will present our recent research on the development of sparse models such as sparse canonical correlation analysis (sCCA) and joint sparse representation of multi-modal data that can better capture the interrelations between these data. We show latest examples of using these models for integrative analysis of SNP and fMRI to identify biomarkers, and use the joint information for the identification of schizophrenia diseases.

Dr. Yu-Ping Wang received the BS degree in applied mathematics from Tianjin University, China, in 1990, and the MS degree in computational mathematics and the PhD degree in communications and electronic systems from Xi'an Jiaotong University, China, in 1993 and 1996, respectively. After his graduation, he had visiting positions at the Center for Wavelets, Approximation and Information Processing of the National University of Singapore and Washington University Medical School in St. Louis. From 2000 to 2003, he worked as a senior research engineer at Perceptive Scientific Instruments, Inc., and then Advanced Digital Imaging Research, LLC, Houston, Texas. In the fall of 2003, he returned to academia as an assistant professor of computer science and electrical engineering at the University of Missouri-Kansas City. He is currently an Associate Professor of Biomedical Engineering and Biostatistics & Bioinformatics at Tulane University School of Science and Engineering & School of Public Health and Tropical Medicine. He is also a member of Tulane Center of Bioinformatics and Genomics and Tulane Cancer Center. His research interests lie in the interdisciplinary biomedical imaging and bioinformatics areas, where he has over 100 publications. He has served on numerous program committees and NSF/NIH review panels, and was a member of Machine Learning for Signal Processing technical committee of the IEEE Signal Processing Society.

Hover Maester Jenn Lukas sent me a link to PizzaTime.com. We agreed that 1) those are some pretty neat hovers! and 2) it's pretty cool that there is a quality website at all at a domain like PizzaTime.com - in which that she typed in randomly hoping there would be.

They have a set of navigational boxes that look like this:

Then they go through a neat multi-step transitional thing to essentially turn red:

The red square that the icon is in expands left/right to fill the parent box, then up/down afterward. The text and border change colors to remain visible over the expanded red box.

The HTML

We'll use this:

<a href="#0" class="pizza-link">
      <span class="icon maki-embassy"></span>
      <h3>Find a Store</h3>
      <p>We've got a location near you! As far as Bellingham and Lewiston and Yakima and South to Olympia.</p>
    </a>

In case you haven't gotten the memo yet, it's cool to wrap whatever you want in an anchor tag now, so it's easy to make this whole box a link. In our case we'll use that anchor to style the actual box.

Just for this demo, I used We Love Icon Fonts and picked some random icons to use. That site has you use spans with pre-determined classes to show the icons. If I were to take this concept to production, in this case, I'd probably use a pseudo element instead because these icons hold no content value. Or if I was using a span system, I'd apply it with a data-icon attribute and aria-hidden. Read more.

The CSS

This is a decent use case for of nesting in Sass. Everything we're working with here is related to this .pizza-time link, so let's just nest under that. Some boring CSS removed...

.pizza-link {
      display: block;
      float: left;
      /* yadda yadda yadda */
      h3 {
        border-bottom: 1px solid #eee;
        /* relative positioning keeps it on top of :before */
        position: relative;
      }
      p {
        /* relative positioning keeps it on top of :before */
        position: relative;
      }
      h3, p {
        /* "ease" and "all" are implied */
        @include transition(0.2s);
      }
      .icon {
        position: absolute;
        color: white;
        /* position in middle on top */
      }
      &:before {
        content: "";
        background: #D62121;
        /* position in middle on top */
        /* BELOW icon and other content */
        /* :before makes this easier than :after */
        position: absolute;
        width: 50px;
        height: 50px;
        top: 20px;
        left: 50%;
        margin-left: -25px;
        @include transition(
          /* FIRST STEP */
          width 0.2s,
          left 0.2s,
          margin-left 0.2s,
          /* SECOND STEP */
          top 0.2s 0.2s,
          height 0.2s 0.2s
        );
      }
      &:hover, &:active {
        h3 {
          color: white;
          border-bottom-color: #E14646;
        }
        p {
          color: white;
        }
        &:before {
          width: 230px;
          left: 0;
          top: 0;
          margin-left: 0;
          /* hacky, but the parent element */
          /* doesn't have explicit height */
          /* so can't use 100% */
          height: 320px;
        }
      }
    }

Three notable points:

1. The "red box" is a pseudo element. In the past I would have used a span or something here, but now we're able to transition pseudo elements, so might as well.
2. Because the "red box" is an absolutely positioned :before, all we have to do to the other content inside is give it position: relative and it will sit on top of the red box in the natural document stacking order.
3. We made the transition "multi-step" by comma-separating all the values to be transitioned. The horizontal-related properties go first: width, left, margin-left. Then the vertical-related properties go "second": top, height. By specifying a delay value equal to the duration value of the first step values, they will happen in sequence after the "first step" properties.

Demo

Check out this Pen!

I think we're all aware now that most touch screens don't have hover states. Perhaps users of these devices won't see our little fancy hover. That's OK. They are links. They still work.

Pizza Time Hovers is a post from CSS-Tricks

The web’s increasing infatuation with flat design has lead to a rapid rejection of artifice like drop shadows, in favor of a cleaner more shape-based look. But this leaves the designer with a problem: how do you style type to be vibrant whilst adhering to the tenets of flat design?

One solution is the renewed interest in chromatic typefaces. In widespread use in 19th century wood-block printing, chromatic type faces use multiple colors to define different areas. This is the polar opposite approach to modern logo design, in which we’re taught that shapes must work in a single tone.

The benefit of chromatic designs is that they add depth, emphasis and character; without the need for more intrusive text decoration such as shadows.

One of the best examples of this is Sodachrome. Designed by Dan Rhatigan and Ian Moore, Sodachrome consists of two separate fonts; one in which the serifs point to the left, and one in which they point to the right. Set individually the two fonts look distinctly unbalanced, however laid over each other in different colors, they produce an attractive slab-serif. The additional benefit of Sodachrome is that the overlap between the two colors creates a third face, a modern sans-serif, at the heart of the design. The visual interest in Sodachrome is created by the interplay between these three different designs.

Sodachrome by Dan Rhatigan and Ian Moore.

Developing chromatic fonts for use on the web is somewhat of a challenge. Whereas designs such as Lisa Lonergan’s Knoxville follow very traditional roman outlines, designs such as Mark Frömberg’s Pigment — which features 600 characters — don’t readily fit into vector outline formats.

Knoxville by Lisa Lonergan.

Pigment by Mark Frömberg.

Typefaces, even grunge-style faces, are designed as an outline. The outlines can be scaled, colored and spaced however the designer chooses. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) and almost every other available format works in this way. This means that a chromatic design cannot be specified in a single file. However, provided the chromatic typeface is delivered as two separate font files, we can lay one over the other quite easily.

CSS will even allow us to duplicate the title in the styles using the content property, avoiding doubling the content in the markup which would have a negative impact on SEO and accessibility.

The basic format is:

<h1>Any old title</h1>

And in the CSS:

h1
{
 font-family:"Some Chromatic Font A";
 color: rgba(50, 0, 0, 0.5);
 position:relative;
}
h1:after
{
 font-family:"Some Chromatic Font B";
 color: rgba(0, 50, 50, 0.5);
 position:absolute;
 left:0;
 content:"Any old title";
}

For now, the lack of chromatic fonts being produced for web use is likely to mean that their use is a step too far for sites like blogs that require numerous headers. But for logos, or headers that rarely change, where using an image is acceptable, chromatic typefaces are a vibrant and engaging way of setting type that retains a flat aesthetic.

Have you worked with chromatic typefaces? What technical difficulties did you encounter? Let us know in the comments.

Thirsty Rough Font Family – only $9!

The web’s increasing infatuation with flat design has lead to a rapid rejection of artifice like drop shadows, in favor of a cleaner more shape-based look. But this leaves the designer with a problem: how do you style type to be vibrant whilst adhering to the tenets of flat design?

One solution is the renewed interest in chromatic typefaces. In widespread use in 19th century wood-block printing, chromatic type faces use multiple colors to define different areas. This is the polar opposite approach to modern logo design, in which we’re taught that shapes must work in a single tone.

The benefit of chromatic designs is that they add depth, emphasis and character; without the need for more intrusive text decoration such as shadows.

One of the best examples of this is Sodachrome. Designed by Dan Rhatigan and Ian Moore, Sodachrome consists of two separate fonts; one in which the serifs point to the left, and one in which they point to the right. Set individually the two fonts look distinctly unbalanced, however laid over each other in different colors, they produce an attractive slab-serif. The additional benefit of Sodachrome is that the overlap between the two colors creates a third face, a modern sans-serif, at the heart of the design. The visual interest in Sodachrome is created by the interplay between these three different designs.

Sodachrome by Dan Rhatigan and Ian Moore.

Developing chromatic fonts for use on the web is somewhat of a challenge. Whereas designs such as Lisa Lonergan’s Knoxville follow very traditional roman outlines, designs such as Mark Frömberg’s Pigment — which features 600 characters — don’t readily fit into vector outline formats.

Knoxville by Lisa Lonergan.

Pigment by Mark Frömberg.

Typefaces, even grunge-style faces, are designed as an outline. The outlines can be scaled, colored and spaced however the designer chooses. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) and almost every other available format works in this way. This means that a chromatic design cannot be specified in a single file. However, provided the chromatic typeface is delivered as two separate font files, we can lay one over the other quite easily.

CSS will even allow us to duplicate the title in the styles using the content property, avoiding doubling the content in the markup which would have a negative impact on SEO and accessibility.

The basic format is:

<h1>Any old title</h1>

And in the CSS:

h1
{
 font-family:"Some Chromatic Font A";
 color: rgba(50, 0, 0, 0.5);
 position:relative;
}
h1:after
{
 font-family:"Some Chromatic Font B";
 color: rgba(0, 50, 50, 0.5);
 position:absolute;
 left:0;
 content:"Any old title";
}

For now, the lack of chromatic fonts being produced for web use is likely to mean that their use is a step too far for sites like blogs that require numerous headers. But for logos, or headers that rarely change, where using an image is acceptable, chromatic typefaces are a vibrant and engaging way of setting type that retains a flat aesthetic.

Have you worked with chromatic typefaces? What technical difficulties did you encounter? Let us know in the comments.

100 Beautiful, High-Grade Textures – only $19!

The light bulb over your head is the brightest it’s ever been. You have this rush of motivation coursing through your veins. Finally you feel that passion again, the same passion when you first started. The vision of success is so clear, you know this is the idea, this is the idea that’s going to pull you and your entire family out of debt. This is the idea that’s going to change lives for the better.

Your mind is racing so fast. You want crack open the text editor and then you realize that you should sketch it out first. An hour later your pencil is so dull and you realize all this work you just did has nothing to do with the original idea. You’ve added all these new features and other ideas with the intention to make that app better and more robust. What happened? I thought this was the one, I thought this was your golden ticket? Where did you go wrong?

Let’s step back take a deep breath and analyze the situation. So you have a great idea? Yes….Ok, so we know what you want to build, we now need to answer the four golden questions before any wireframing or functionality is scoped out. Here are the four golden questions that must be answered when creating an online business.

What Specifically Is The Goal?

This is the most important question by far. However the answer to this question might have multiple parts. If your end goal for your product is too large then you need to focus on the minimal product you can offer, right now. With that being said, you need to separate these two goals or visions.

Here is an example of someone who wants to start a digital magazine that covers all the major tech news from around the world. Right now this one person can only cover so much at once because they are just one person. However, in the future they’ll want to hire more professionals to handle the work load to accomplish their main goal.

Here is an example of their mission statements:

• Main Goal: Report on the latest, up to date information pertaining to everything tech.

• Initial Goal: Report on the latest, up to date information pertaining to web design.

You can see that the end goal is much larger however right now this individual will spread themselves too thin trying to accomplish that end goal by themselves. This is why it’s better to focus and strive for the minimum viable product. In this case it’s just focusing on reporting to the web design community.

This first step allows us to be clear, confident and more importantly pin point focused.

What Do You Need?

Only when question number one is answered in a precise manor are we able to move onto question number two; “What do you need”? This list should be very vague and category based. Since our goal is to report on Web Design, lets break that down into categories. This will give us a good idea on what topics we need to cover.

• Web Standards, UX, UI, Identity, Typography, Illustration, etc…

We simply take the main focus which is Web Design and break it up. Notice we’re not getting super in depth(ie. line-height). Keep it simple and straight to the point.

How Do I Make Money?

Again questions one and two need to be answered before we can answer question three. From the example we know the individual is reporting on Web Design and we have broken the content up into specific categories. Now, how are we going to make money off this? There isn’t a single correct answer for this question. This will take time and research to find the best approach for you and your product.

Here are some suggestions for getting a great approach.

• Research your competitors and target market.
• Send out surveys to see how much your market will be happy paying.
• Offer something for free.
• Look at advertising to fund everything.

After you feel you have considered all your options its time to pick a direction. For the example of the digital magazine, the approach might look like this.

• Offer the first issue for free
• Charge for a yearly subscription or by month ( ie. $4.99m / $49.99yr )
• Charge for advertisement in the digital magazine

How Should We Serve It Up?

Finally, we get to the functionality structure of the application. Just like all the other questions, one through three need to be answered before we can answer this question, “How should we serve it up”?. Using the example, here is a way to structure the design:

• Main site is a blog that has synopsis articles which then push to the magazine articles
• The digital magazine is purchased on the site and is only interactive on the site
• You are able to download the magazine in pdf format only
• Sign up with a social network and get the first article free through the initial newsletter link

From here we can start listing specific content lists and wireframing.

In Conclusion

By answering the Four Golden Questions we are able to have a clear vision of the product and execute it in an orderly fashion. There’s never a need to back track. Simply create your two statements and execute the simpler one. Put it into action now, and get it up quick. There is always time to rework, but you first need to be specific and minimal with your approach. If not, you’ll end up with a lot of wasted time, money and personal drive.

Without answers you’ll feel like your slowly driving in a murky mist of “I don’t know, we’ll get there”. So throw on those high beams and fog lights by answering the Four Golden Questions. It’s time to race to your products success.

The post The Four Golden Questions to a Successful Business appeared first on Treehouse Blog.

UMBC's Center for Hybrid Multicore Productivity Research, an NSF Industry & University Cooperative Research Center is holding its Industry Advisory Board meeting at UMBC 12-14 June. Students from UMBC and UCSD will present tutorials on a number of the technologies underlying ongoing CHMPR projects in a session from 1:00-5:00 on Wednesday June 12 in ITE 456. The tutorial session is free and open to the public.

• 3-D Printing – Timothy Blattner (UMBC)
• Semantic Table Information – Varish Mulwad (UMBC)
• Social Media Elastic Search – Oleg Aulov (UMBC)
• Machine Learning for Social Media – Han Dong (UMBC)
• Virtual World Interactions – Erik Hill (UCSD)

Directions and parking information is available here.