Rhiza Blog Blog

Tech Talk: Performance enhancement & map layers

Propagating events through element layers as rendered in page.

The Rhiza blog takes a turn toward the technical, with a post this week by senior software engineer Matt Pickell. Check out his particular mapping challenge, which includes insight into problem solving, failing fast, and (delicious) shish kabobs.

I am currently working on a project involving Mapbox and Leaflet. As part of a performance enhancement feature I was implementing I came across an interesting issue on event handling in the map layers.

I am using D3 to implement a light-weight custom Leaflet layer to better handle large FeatureCollections. From the server I receive a GeoJSON FeatureCollection of features that includes shapes, markers, and text that I need to render to the map. In my custom layer the different feature types in the collection need to be placed into different map panes (overlay, markers, and popup panes) to maintain the proper layering. These “panes” are implemented as sibling DIVs as oppose to being in a tree layout.

Depending on the purpose of the map, any one of these layers can be enabled to accept click events (and possibly more than one). The issue I encountered was that only the top layer would actually accept the click — this layer typically being the marker or text. If that layer was deemed “un-clickable” then nothing would happen because the event propagated up the DOM tree and not to the sibling “panes.”

What I need to handle is passing this event to all of the sibling panes to see who could handle it. But I cannot just broadcast it! I need to pass it to the panes in the order they are rendered on the page and only to each pane’s feature located at the exact mouse-click position.

Some background…

In mapbox maps there is an overlay pane for adding new overlay shapes, like polygons. There is also the marker pane, for things like “pins” on point locations. There are still other panes, like “popups” for additional items. Because these panes are sibling divs and not hierarchical event handling can be tricky.

The FeatureCollection I receive can contain features mapping to 1..n of these panes. So what I can end up with is multiple overlapping features on a map — e.g., a shape, a marker (or more) on that shape, and a text label on that marker. These features know nothing about their layer or other features, but do contain information in their properties so I can determine if the feature is clickable.

Because the layers are actually laid out in the DOM as absolute-positioned sibling ‘div’ elements I cannot use the browser’s event propagation. What I need for my situation is information about the stack of elements as layered on the page by the renderer at the X/Y point of the mouse click. An example of what I mean by the “layers” of the DOM elements is nicely displayed in the picture below.

Element layers as rendered on the Google home page.

Element layers as rendered on the Google home page.

I took this screen shot using a cool Firefox plugin called Tilt, although I found out after I installed it that the Firefox Dev Tools already has it built in as “3D View.” Because everyone is familiar with it, I used Google’s homepage to illustrate stacked DOM element layers as I am working with such layers on the map. The actual map did not illustrate this as well since the Tilt plugin was not splitting out SVG trees into layers.

To propagate the event the way I need to do it, I need to dig through these layers from top-to-bottom at the coordinates of the mouse click regardless of how these layers are represented in the DOM tree — CSS can move them anywhere. It’s like driving a skewer through the page at the point of click and then peeling back the shish kabob of features until I get to the one that can process the event.

 

A solution emerges…

It turns out there is a very useful document function for this called document.elementFromPoint(x,y). This function will take an X/Y coordinate and return the element first encountered at those coordinates. This is great, but I already know the first encountered element… it’s the one in the event that is triggered when the mouse click occurs. So this alone does not help much, especially because it is only available on document and not sub-elements in order to process sub-trees. But, it is a start…

So digging deeper I found that I could manipulate the results of the elementFromPoint function using very simple CSS! When an element has the style “pointer-events: none,” click events pass through the element to whatever is next behind it. This style alone could solve this issue sometimes if you are able to throw it around multiple places, but in the case of creating a custom layer I need to be more surgical so I don’t affect other layers that may be added to the map. When this style is on an element, it is also skipped by the elementFromPoint function!  

Aside: Another page on QuirksMode.org says you can do this with “display: none” as well, but that would change the page visually…

A happy merging of these two ideas and a dose of recursion solves the problem. All of the features I add to the page have a click handler that routes the click to a special function that does the following:

  1. Get the elementFromPoint from the X/Y coordinates in the mouse event.
  2. Check if this element is:
    1. one of my features, which means it contains data (i.e., a “__data__” property) and has a key/value attribute I put on the element specifically for matching.
    2. clickable (a separate function to determine this based on whatever…)
    3. a child of some baseline element that I know all of my elements are inside. This is to fail faster instead of parsing a lot of the page I don’t care about. The base element for me, inside the mapbox map, is an element classed with ‘.leaflet-objects-pane’.
  3. If it all tests in #2 pass, return this element and pass it and its data (remember in D3 this is the element.__data__) off to the real click handler.
  4. If the tests in #2 fail, either return null (if i’m outside of my base element) or add the “pointer-events: none” style to the current element and call this function again recursively. The current element is added to an array of “passed over elements” so that we can come back later and remove this style. In order to not break the page, maintain the prior value of this style if there was one.

This loop continues until we either find an element that will handle the event or we are outside of the base element.

The last important step before returning from this function is to iterate over the “passed over elements” array and revert the “pointer-events: none” style.

Implementation

Here is the implementation as a member in the custom layer class, a little generalized for clarity.

_digForElements: function keepDigging(evt, passedOverElementsFromLast) {
            var layer = this
                  jMapPane = jQuery('.leaflet-objects-pane');
            if (!jMapPane) return null;

            var baseElement = jMapPane[0]
                attr = 'data-d3layerkey',
                attrVal = layer._layerId,
                passedOverElements = passedOverElementsFromLast || [],
                firstFound,
                element,
                jElement,
                existingCssValue;

            element = document.elementFromPoint(evt.x, evt.y);
            if (element && jQuery.contains(baseElement, element)) {
                jElement = jQuery(element);

                if (jElement.attr(attr) && jElement.attr(attr) === attrVal &&
                    _.isObject(element.__data__) && layer.options.isSeriesClickable(element.__data__)) {
                    firstFound = element;
                } else {
                    existingCssValue = jElement.css('pointer-events');
                    passedOverElements.push({
                        element: element,
                        previousCSSValue: existingCssValue === 'auto' ? '' : existingCssValue;
                    });

                    // Add style to it so that elementFromPoint bypasses it next time.
                    jElement.css({
                        'pointer-events': 'none'
                    });

                    firstFound = keepDigging.call(this, evt, passedOverElements);
                }
            }

            // clean up all elements we added classes to.  Also, end a sentence with a preposition.  done.
            var info;
            while (passedOverElements.length > 0) {
                // It did not have it before or it would not have come up in the search...
                // so remove it again.
                info = passedOverElements.pop();
                jQuery(info.element).css({
                    'pointer-events': info.previousCSSValue
                });
            }

            return firstFound;
        },

Rhiza Leadership Team Grows

HorizLogo-RGB-72dpi

Last month two all-stars joined the Rhiza leadership team, bringing their unique start-up experience, industry vision, and corporate resolve to our Pittsburgh headquarters.

Zachariah Sharek, our new SVP of Data Strategy, joined us from Civic Science. Zach recently completed his PhD in Organizational Behavior and Theory from Carnegie Mellon University’s Tepper School of Business. His research in judgment and decision-making and behavioral economics has been discussed in the Wall Street Journal, LA Times, Financial Times, Business Week, and USA Today. Zach’s ready to blaze new trails in our data partnerships with Acxiom, Nielsen, Rentrak, Kantar, Experian, comScore, Polk, and dozens more.

We also welcomed a new Director of Finance, Laurie Hochberg. Laurie was most recently the CFO at M*Modal during their successful acquisition and subsequent IPO. She holds a BS in Accounting from Clarion University of Pennsylvania and is a certified CPA. At Rhiza, Laurie will be responsible for directing financial and accounting duties, accounts payable/receivable processing, financial reporting, and she will lead budget and forecast creation.

We’re excited to have Zach and Laurie join the Rhiza team, bringing with them tremendous perspective, polish and passion. We’re now 25 strong, and every single employee contributes to our product vision, our customers’ satisfaction and our shopping-list for snacks in the company kitchen. Sound like an exciting place to work? We sure think so!

We’re hiring awesomely smart and fun people. Check out our careers page to apply.

Rhiza Wins Again!

Smart 50

Our very own Josh in the bottom left corner.

It’s satisfying to know that hard work pays off, so we were excited to receive further validation of our efforts this week. Wednesday night Rhiza CEO Josh Knauer was inducted into the inaugural class of Pittsburgh’s Smart 50 presented by Chase. Josh was recognized for his leadership, innovation, and impact on the Pittsburgh community.

The inaugural class is an impressive group - executives from healthcare to energy to manufacturing to services, the Smart 50 is a who’s who of the most impactful and inspiring business leaders in the area, and we’re proud to be recognized as one of the few software companies, and even fewer start-ups, to receive this honor.

We’re growing our team and looking for passionate people who will have an impact on day 1. Visit our careers page to see if we’re currently searching for a candidate just like you.

Talk Data to Me

Strategy Session

Josh Knauer from Rhiza and Matt Murphy and Rachel DiCola from Gamut strategize before their talk. Photo courtesy of Pittsburgh PTC.

At Rhiza, we understand Mo’ Data means Mo’ Problems. That’s why we strive everyday to make Notorious B.I.G. Data Smalls. That’s why we were so excited to co-sponsor the “I Love When You call me Big Data” Conference with the Pittsburgh Technology Council last Thursday, November 6th, 2014.

During the conference, we heard talks on a wide array of big data trends, problems, solutions, and best practices. From IBM’s supercomputer Watson helping cure cancer (bringing us one step closer to the eventual singularity) to how Major League Baseball can optimize its schedules, Big Data is alive and well in Pittsburgh.

Longtime Rhiza customer Rachel DiCola from Gamut presented as a featured speaker. She spoke about how the Rhiza platform changed the way Gamut sells with Big Data, surpassing her sales goals for 2014 within 6 months! You can read a bit more about Rachel’s presentation in CMSWire’s coverage of the day: Love Fest for Data… in Pittsburgh.

We even got to hear from our very own Rhiza CTO, Mike Higgins, who described the need to embed storytelling into Big Data narratives. For without a cohesive story, all you got is Mo’ Problems with Mo’ Data.

All in all, a great day for data lovers.

The Future of Data Marketing

A few weeks ago, Rhiza CEO Josh Knauer spoke alongside other data industry heavyweights on the Data Congress panel at AdWeek XI hosted by Rachel DiCola from Gamut and sponsored by Verizon’s Precision Market Insights.

After the congress, we spoke with panelists Rick Erwin – President of Experian Market Services’ Consumer Insights & Targeting, and Aastha Parikh – Director of ComScore Telecom & Technology, about the future of data-driven sales and marketing.

“The people in all of our companies are going to become closer than they are today to being data scientists.” -Rick Erwin, President Consumer Insights & Targeting at Experian Market Services

With the exponentially growing amount of data on consumers, many companies feel overwhelmed by the titanic task of collecting and decoding these bits. But just as the amount of data is growing, the sources of data and expectations for impact is also in flux. So what does the future of data driven sales and marketing look like? How can organizations make sure that they’re ready for massive data? How does consumer privacy change factor into the equation? How do we distill millions of data points into the most salient, convincing story? Join in the discussion.

 

Rhiza Named Most Innovative Company!

Rhiza Wins Tech50 Innovator of the Year!

Last night was a big night for Rhiza– we were named the Most Innovative Company by the Pittsburgh Technology Council at their annual Tech50 Awards dinner. Over 700 people gathered at the Wyndham Grand Pittsburgh Downtown for the event.

The evening began with a 2 hour showcase where dozens of companies exhibited and hundreds of people mingled, discussing technology and regional growth over cocktails. The awards ceremony recognized winners in 8 categories, including CEO of the year, Solution Provider of the Year and Start-Up of the Year. We were extremely proud to receive the Innovator of the Year award, chosen from an elite list of the area’s most impressive tech companies. The independent panel of judges recognized Rhiza for our unrivaled dedication to innovation and execution.

Today we returned to the office, rolled up our sleeves, and got back to work– developing killer software that makes Big Data actionable for marketers and salespeople. Our investors have noticed, our customers have noticed, and now Pittsburgh has noticed us, too.

Do you want to revolutionize the way you interact with your data? Give us a call. We’d be happy to show you what this innovation fuss is all about.

Ad Week’s Over!

With last week’s Ad Week XI under our belt, Rhiza has officially completed it’s very first Ad Week… and we’re ready for next year!

We were very excited our courageous commander, Rhiza CEO Josh Knauer, spoke at the Ad Week Data Congress – a meeting of the minds on data analytics and how it can drive performance and the bottom line. Knauer discussed how data-driven storytelling can help sales and marketing teams  use internal and 3rd party data effectively to target and engage customers to increase ROI. Check out his talk below!

So, with a solitary tear, we mark the end of Ad Week XI – the end of the New York Bagels, the end of the last night restaurant, the end of an era. See ya next year!

Remember to follow us @rhiza and on our blog for updates on all things Rhiza.

The Rhizans Take Manhattan: Ad Week Edition

As Friday end of business draws nigh beckoning the weekend ever closer, the Rhizans are hard at work getting ready to ship off to NYC for Ad Week XI.

We are very excited our fearless leader, Rhiza CEO Josh Knuaer, will be participating in the AW Data Congress – an event that unites an all-star lineup of industry heavyweights to detail how data and analytics drive performance and the bottom line. Knauer will discuss how to effectively use internal and 3rd-party data to better target and engage customers to increase marketing ROI – through the art of data-driven story telling.

So, with our Rhiza t-shirts printed and pressed and with 90,000+ people to talk to over the course of more than 250 events, the team is ready to tackle #AWXI head on! Remember folks, we’ll be there all week!

Join us on Tuesday Sept. 30, 2pm at Times Center Hall and follow us @rhiza and on our blog for updates throughout the week.

Nominated for Tech 50… again!

Tech50_2014 logoFor the 3rd consecutive year Rhiza has been named a finalist for the Tech 50, the Pittsburgh Technology Council’s annual list of the regions most successful and innovative companies.  Nominated in the Innovator of the Year category, we’re in good company alongside leading energy and robotics companies.  A full list of the nominated Tech 50, along with details about the award ceremony scheduled for October 21, 2014 at the Wyndham Grand Pittsburgh Downtown, can be found on the Pittsburgh Tech Council website.

Pittsburgh-Based Startup Rhiza Closes $3 Million Funding Round to Accelerate Growth

User-friendly and intuitive marketing analytics platform funded by first outside investors

rhiza-new-logo-154x105PITTSBURGH – June 17, 2014 – Rhiza, the leading provider of marketing analytics tools that make Big Data actionable for marketers and salespeople, announced today that it has closed a $3 million Series-A funding round led by Pittsburgh-based Draper Triangle Ventures with participation from Arthur Ventures, and Camp One Ventures. The capital will fuel Rhiza’s ongoing growth by building out its sales, marketing, and customer service teams to meet the demand in the market for its product.

Rhiza’s product suite increases revenue for both media companies and advertisers by delivering detailed recommendations based on integrated consumer insights. Its platform is used by a rapidly growing list of notable customers, including Comcast, Univision, Cox Media, Cox Reps and Experian.

“Our priority is to help our customers move beyond dashboards and utilize our powerful analytics platform to make smarter decisions that propel their businesses forward,” said Rhiza CEO Josh Knauer. “Thanks to the infusion of capital from Draper Ventures, Arthur Ventures and Camp One Ventures, we will not only be able to better serve our current clients, but also reach new audiences and refine our innovative tools for visualizing, analyzing and sharing data.”

New product developments have expanded Rhiza’s suite of analytics to include tools that rapidly develop marketing plans, support multi channel media buys and create visually compelling, data-driven marketing and sales collateral. Rhiza’s latest product release revolutionizes the way users interact with their data, making it simpler to find answers to their toughest questions about how to reach and influence consumers.

“Rhiza is disrupting the marketing analytics industry with intuitive tools for marketers and salespeople across the entire enterprise at a fraction of the cost,” said Mike Stubler, Managing Director at Draper Triangle Ventures. “Without taking any outside capital, the company has operated very efficiently since it was founded, and has achieved amazing success serving some of the largest media brands. Rhiza’s technology, culture, business acumen, and vision for growth made it a perfect fit for us.”

“After years of working with some of the largest media companies and brands in the world, we’ve learned to optimize our platform to quickly provide great tools our customers need,” said Knauer. “This infusion of capital will help Rhiza strategically expand our sales and marketing efforts to broaden our customer base while expanding our ability to provide excellent service to our clients.”

– ### –

About Rhiza
Rhiza is an emerging leader in the field of marketing analytics, offering online tools that make Big Data actionable for marketers and salespeople. Rhiza’s tools increase revenue for both media companies and advertisers by delivering detailed recommendations based on integrated consumer insights. Media publishers use Rhiza to arm their salespeople with better tools for selling premium advertising. Marketers use Rhiza to optimize hyper-targeted media buys, track campaign effectiveness and quickly create new marketing plans. Rhiza’s SaaS-based software is used by a rapidly growing list of notable customers, including Comcast, Univision, Cox Media, Cox Reps and Experian.

About Draper Triangle Ventures
Draper Triangle Ventures is a premier source of funding for early stage high-technology companies in the Midwest. As the Midwest-based partner of Draper Fisher Jurvetson, Draper Triangle offers entrepreneurs a host of benefits unrivaled in the industry. For more information, visit drapertriangle.com.

About Arthur Ventures
Arthur Ventures is a venture capital firm with offices in Fargo and Minneapolis. The firm was founded in 2008 by James and Doug Burgum (Chairman – Atlassian, Chairman – SuccessFactors, CEO – Great Plains Software). Arthur Ventures specifically invests in software companies and is currently investing out of a $45M fund raised in 2013.

About CampOne Ventures
Camp One Ventures (C1V) partners with leading emerging growth businesses in the mobility, software-as-a-service and financial technology segments. C1V provide companies with the venture capital and support they need to build world class businesses. Portfolio companies of C1V include Aarki, Credit Sesame, One Inc. and Ripple Labs.

Close

Want to schedule a demo?

Get in touch with us and we’ll be happy to set up a time.