Overhauling All of Our Widgets

Big news! We’ve finally finished moving all of our charts to a new framework. The framework, NVD3, makes it really easy for us to create great-looking charts and graphs that are more responsive and interactive than before.

Our line graph was the first graph to get moved over a couple of weeks ago. Much like dominos, once we toppled that first one, the rest quickly followed.

We also completely changed the color scheme used in the graphs. And lastly, we totally changed the widget selection box for when you want to add new widgets.

So now let’s take a quick look at all of the other charts and widgets we finished revamping.

Engagement graph

engagement

I’m most proud of our new engagement graph. We reworked it so it’s nearly identical to the graph that’s offered over on Wistia. As you move over the graph, the popover shows you the timecode, % engagement, watches, and rewatches. I love the ability to see watches vs rewatches on the chart. This is great for figuring out if there are certain parts of your video that people are watching over and over.

Scatter Plot

scatter

I’m also pretty proud of our updated scatter plot. Something very cool about this graph is that each data point has a low opacity. When you have multiple data points in the same spot, they stack and increase the opacity. This makes it very easy to see when there’s a lot of engagement or activity on a certain day.

Donut chart

donut

The donut chart’s style was a bit cramped, so we gave it more space to breathe. Doing so gave it the necessary space for placing segments at the top. And when you deactivate those segments, the slices and data update to reflect the segments that are still active. Clarity when hovering over the donut has been improved with a nice little animation to highlight the segment.

Top Videos

top_videos

There weren’t any major changes to the Top Videos widget – just some minor tweaks. We removed the awkward letterboxing on the sides of the thumbnail. The metric data is larger and clearer. And the title of the video sits nicely at the bottom of the thumbnail. While minor, I think the refinements really helped to improve the experience when using this widget.

Total Count

total_count

Honestly we really didn’t do much with this guy. We changed its name from Total Display to Total Count, because that makes more sense. But other than that, for now, he’s still crushing it.

Add New Widget

add_widget

We decided to move away from iconography towards plain text because we felt that text is clearer. The design is now inline with our overall dashboard design. And the box now pops up right next to the + button, so you don’t have to move your cursor far to choose what you want.


Now that we’ve completed overhauling our charts and widgets, we’re going to focus on creating new product features. We’re super excited to move forward and can’t wait to get these new features out!

Expect the capabilities of Meshtrics to grow substantially over the coming months. The groundwork is almost completely laid, so it’s onwards and upwards from here on out!

Andy Waplinger

I'm the CEO and co-founder of Medialytics. I'm on a mission to make the lives of content creators everywhere easier and more informed. I love to learn and teach and empower others. I also love puppy GIFs.

This entry has 0 replies

Comments open

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>