Knock Knock. Who’s There? The Ring Doorbell 2 Black Friday Deal. End Joke. 


Ring Video Doorbell 2 + Free Echo Dot | $140 | Amazon

Best Home DealsThe best home, kitchen, smart home, and automotive deals from around the web, updated daily.   

Want to catch package thieves (especially inept ones) in the act? Or just see who’s at the door so you know whether it’s worth getting off the couch? The Ring Video Doorbell 2 is down to $140 on Amazon for Black Friday, plus a free Echo Dot. That’s $60 less than the usual price for the doorbell alone, not even accounting for the smart speaker.

The Ring 2 will give you an instant alert and a live video feed when someone’s walking up to your door, works as a two-way intercom, and can even record security footage to the cloud with a subscription.



via Gizmodo
Knock Knock. Who’s There? The Ring Doorbell 2 Black Friday Deal. End Joke. 

Ammoland’s Epic Tour of Palmetto State Armory – Part 1

A Palmetto State Armory lower just before anodizing.

U.S.A.-(Ammoland.com)- Have you ever wondered what goes into a Palmetto State Armory rifle? I have. Since Duncan and I were invited to visit with them and tour their facilities, we were about to get a first-hand look at how the rifles, uppers, and other parts are produced.

Duncan and I flew out from our home bases to Charleston, North Carolina and met with Josiah McCallum, the Affiliate Marketing Manager and co-founder of Palmetto State Armory, at the airport for the long trek to Columbia, South Carolina where Palmetto State Armory is based.

After getting checked into the hotel and settled, Duncan and I grabbed a bite to eat and planned out how we were going to tackle writing the tour up since we had an insane schedule.

NOTE: Some areas of the tour were not photographed or videoed to protect trade secrets so your imagination will have to suffice, sorry.

DC Machine

The first stop on our grand tour of the PSA facilities was DC Machine, the facility that produces not only PSA’s barrels, but they also make lower receivers, upper receivers, barrel extensions, receiver extensions and a ton of other stuff that makes its way onto PSA rifles.

Just a few of the machines inside of DC Machine.

While we were in the car with Josiah, we got the rundown on the history of the company as well as a good feel for the mission of PSA. They want to put a serviceable rifle in the hands of every American, a noble goal if we are honest. More gun owners inevitably lead to better gun rights and more 2A supporters.

The staggering number of barrels that they are able to produce daily is nothing short of awes inspiring. 1,800 new barrels are born a day in this facility on top of the many upper and lower receivers making the level of QC that they achieve pretty impressive.

A giant box of barrels that will later be built into uppers.

DC Machine has over 70 CNC machines that run almost non-stop to feed the beast that is Palmetto State Armory, and that isn’t even enough to satisfy their needs.

While Duncan and I were at DC Machine, we were given the two newest barrels off the line. Later those barrels would be built into rifles by us in their assembly facility.

PSA Flagship Store

While PSA has its largest presence on the internet, they do have 6 physical stores where you can shop their selection in person. While this is a pretty cool experience, it is also just as dangerous for your wallet as the daily deal section of their website.

The flagship Palmetto State Armory store in Summerville, SC.

While we got the tour of the store and range, we also were there to do some light shopping for optics that would be used on the rifles we were to build. I opted for a Vortex Strike Eagle paired with a Trijicon RMR to give the dual optics setup a try while Duncan chose the more 3 Gun orientated Vortex Viper PST Gen II 1-6 power scope.

I will have to admit, I was rather pleased by my experience in both of the stores that I visited. Now you might be thinking that since Duncan and I were there as guests of PSA that is why they were on their best behavior. I will confess to wandering off several times to see how the staff interacted with customers as well as myself and had to say that it was nothing short of impressive for a brick and mortar gun store. The staff was friendly, knowledgeable, and eagerly helpful.

As for selection, the stores somehow have MORE stuff than the website! Pretty much anything that I was looking for, they had in stock and at reasonable prices. The selection and how they had stuff priced is probably why I spent far more money than I intended on while taking a tour of the store.

After we were done with the store tour, we headed back to Columbia where I asked Josiah to drop me off at a local range so I could get a bit of practice in with my Glock 19. I will talk more about why later but I am very appreciative that Josiah accommodated my need to get some practice in while on the road.

Touring the Main Warehouse

We got the full tour of the impressive facility where Palmetto State Armory ships all of their web orders from as well as assembles ever upper, lower, and complete rifle at.

While I wish that I had taken some photos of the facility, much of what I wanted to show I wouldn’t have been able to share in good conscious like steps in the assembly process and secure areas like the gun room. Rest assured that the entire facility was nothing short of impressive, the most impressive thing I saw was the AR assemblers.

The assembly area has a couple of different sections, each working on different areas of the rifle or even an entirely different platform like their AKs. I want to touch briefly on the AK rifles before we get into the ARs that PSA is most well known for. I intend to go back and spend a ton of time looking at how the AK platform parts are sourced and assembled. I really want to show you all as much about the manufacturing process as they will allow for the simple reason that I feel most don’t understand exactly how good of a rifle they are without seeing one come together. The fact that they are producing what appear to be reasonably high-quality US made AKs for under $1,000 is nothing short of impressive when you understand the hurdles that US made AKs face.

The AK team at PSA is a well-oiled machine that makes putting an AK together look like child’s play. As I previously mentioned, they use quality parts from what I could see and assemble them systematically and efficiently. What was the coolest thing about the process? The way the barrels were installed and head spaced. I wish I had a photo to show you, but that will have to wait until I can cover the build process in far more detail on my next visit.

Now that we have the AKs out of the way, the AR assembly line is likely what most people care about. Again, PSA has worked with some amazing process engineers that have developed an efficient assembly line that allows for near no QC issues to slip through. After all, with the volume of uppers, lowers, and rifles that PSA is sending out to Americans everywhere, there is bound to be a couple of small things that slip through the cracks. Don’t worry though, they have a process to identify who built any components or rifles that weren’t up to snuff and stressed that they will do everything in their power to improve the assembly process. That said, the percentage of components that experience an issue are staggeringly low. While I don’t recall the figure offhand, I do recall that when I heard the number, it was substantially lower than any other facility that I have had the pleasure of visiting.

The upper receiver process starts with the forward assist being pinned in place by a single station. The engineers at PSA designed an impressive jig to ensure this pin is placed in the upper uniformly. Once that is done, and the dust cover is installed, the uppers are sent down to the assembly stations. If the upper build calls for a front sight post, the FSP, delta ring, and any needed hardware is placed on the barrel and is drilled for the taper pins on a CNC machine and the taper pins are put in place.

Now that we have the barrel and upper ready to mate at the assembly stations one of the skilled assemblers gathers all the parts they need to finish the upper build. They have their own upper blocks that were designed by one of their engineers that makes the process easy and fluid. Once the upper receiver is pinned to the block, they insert the barrel, apply some grease to the threads and tighten the barrel nut. Once that is done if the build has an FSP the assembler checks to make sure it is aligned properly with yet another special tool. They add the gas block if needed and install the gas tube then the flash hider or brake is attached to the barrel and timed properly. Now is the time that the assembler either slaps on some plastic hand guards if the build calls for that or secures the free float handguard to the upper. Once all that is left is to add the charging handle and BCG, the upper is tilted up so that the assembler can stamp their mark on the upper. This stamp allows PSA to track who built what and ensured that any problems that are returned are addressed by not only making it right with the customer but also training the assembler to look for that issue going forward.

The assembly of the lowers is equally impressive. Where the upper assemblers have special tools to help them produce the best possible product in the quickest manner possible, the lower assemblers have developed nimble fingers, and ways of installing parts that help prevent them from damaging the finish on the lowers as well as retain all the parts they need to build the lower. The lower starts as striped and one worker installs all of the lower parts but leaves the buffer tube untorqued and the endplate unstaked. That particular part of the build process is completed by another worker at a separate station. While the lower build process is just as impressive as the upper build process, the number of steps required is far fewer.

Every PSA upper, lower, or complete rifle is either function checked in the case of lowers or test fired in the case of uppers or complete rifles. This is done on site in a test range located just off the assembly area.

At the end of my tour, I have a newfound respect for PSA’s rifles that I frankly didn’t have before visiting their assembly facility. It wasn’t that I thought that PSA didn’t make decent rifles, it was more than I had no idea that they were building rifles to the quality level that they are. Everyone there cares deeply about putting out the best possible product to be sold at an attainable price point. Every single employee that I spoke with believes in the PSA mission of putting a rifle in the hands of every American that can legally own a firearm.

Read Part 2 of the Tour Tomorrow

Special Thanks

I want to thank Josiah and everyone else that either spoke with us on the tour or made it happen. The hospitality shown was nothing short of above and beyond what anyone would expect on a media trip.

I am looking forward to making my way back to Columbia for the next visit!


About Patrick R.Patrick Roberts

Patrick is a firearms enthusiast that values the quest for not only the best possible gear setup but also pragmatic ways to improve his shooting skills across a wide range of disciplines. He values truthful, honest information above all else and had committed to cutting through marketing fluff to deliver the truth. You can find the rest of his work on FirearmRack.com as well as on the YouTube channel Firearm Rack or Instagram at @thepatrickroberts.

The post Ammoland’s Epic Tour of Palmetto State Armory – Part 1 appeared first on AmmoLand.com.

via AmmoLand.com
Ammoland’s Epic Tour of Palmetto State Armory – Part 1

Roast a Turkey the Lazy Way With a Bluetooth Thermometer

Photo: Pexels

Want a truly relaxing Thanksgiving? Try this: Pop the turkey in the oven, then watch TV for a few hours. When people start saying “Shouldn’t you check the turkey?” just pull your phone out of your pocket, and tell them its exact temperature.

That’s the magic of a bluetooth thermometer. I use an iGrill Mini (about $40), the same model our own Claire Lower uses in this video on how to make the perfect turkey. There’s a metal probe on the end of a long wire, attached to a little gadget the size of a chicken nugget. Place the probe like you would any thermometer: into the thickest part of the thigh, near where it meets the body. Make sure it’s not touching bone.

Advertisement

Then set the nugget next to the stove. (Or stick it right on—it’s magnetic.) The nugget will glow yellow, then orange, then red as the turkey approaches its final temperature. Pair it with your phone, and you can watch the turkey cook from afar.

Screenshot: iGrill

After telling the app what kind of meat you’re cooking (it also does steaks of any doneness!) you’ll see a graph of temperature, beginning with a dip when the room-temp probe goes into the refrigerator-temperature turkey. You’ll get a notification when the turkey is almost ready, so kick back and relax—until it’s time to get moving on those side dishes.


via Lifehacker
Roast a Turkey the Lazy Way With a Bluetooth Thermometer

Here’s Proof that Computers and All-Wheel Drive are No Match for Winter Tires

GIF

We’ve said it before, and we’ll say it again: If you live where there is serious winter, you really need to consider winter tires on your daily driver. Yes, even if you have all-wheel drive. Yes, even if it clearly says “ALL seasons” right there on the receipt from the tire store. It just makes good sense.

To remind us of what we really should know by know, TireRack.com ran through a series of tests to see just how important winter tires are in icy conditions. The answer: very.

Even with traction control and anti-lock brakes, the car without winter tires is all over the place. In a low-speed stopping test, the car without winter boots on slid a full car length further before coming to a stop.

Advertisement

“Ah ha!” you say, because you talk like a 1930s movie villain. “That is a mere Toyota Avalon, with front-wheel-drive. I have ALL-wheel drive, thus negating the need for winter tires!”

Tire Rack has an answer for you, too:

As you can see, all-wheel drive can help when you want to get going, but it’s nowhere near as effective when you need to turn, and especially not when you need to stop.

Advertisement

Of course, Tire Rack is, indeed, trying to sell more tires. But you can’t really argue with the tape.

And when winter is over, get those all-season puppies put on, because winter tires don’t do well on dry pavement.


via Lifehacker
Here’s Proof that Computers and All-Wheel Drive are No Match for Winter Tires

Hang onto your magical tridents, the final Aquaman trailer is here


Jason Momoa stars as Arthur Curry, aka Aquaman: half human, half Atlantean.
Enlarge /

Jason Momoa stars as Arthur Curry, aka Aquaman: half human, half Atlantean.

We’re just one month away from the release of director James Wan’s Aquaman, the first full-length feature film centered around Jason Momoa’s Justice League superhero. Now the final trailer has dropped, with all the magical tridents, warrior princesses, and epic CGI battles you’d expect from a superhero movie about averting a mythological war between two very different worlds.

Aquaman first entered the DC Comics universe in a 1941 anthology and later turned into a solo comic book series. He was a founding member of the Justice League during the “Silver Age” of the 1950s and 1960s. But he was never among the most compelling superheroes in the DC stable, often serving as the butt of jokes because of his supposedly inferior super powers. Hey, telepathically communicating with fish is cool, right?

So there was some initial skepticism about introducing the character into DC’s rebooted cinematic universe. Casting Momoa, who was so riveting as Khal Drogo in Game of Thrones‘ first season, was an inspired choice, and the initial artwork showing an Aquaman reimagined for the 21st century looked promising. For the reboot, DCEU wisely played down the talking-to-fish thing (it’s more a form of telepathic compulsion) and focued instead on Aquaman’s superhuman strength, ability to breathe underwater, super fast swimming, and so forth.

The first two Aquaman trailers didn’t inspire confidence, particularly among Ars staffers.

It’s just that DC hasn’t had quite the same success as Marvel Studios in building a unified superhero world. Momoa’s Aquaman first appeared in Batman v Superman (2016) and followed that up with Justice League (2017), both of which were critically panned and didn’t perform as well as expected at the box office. And the first two Aquaman trailers didn’t inspire confidence, particularly among Ars staffers. (Ars’ culture editor Sam Machkovech offered a variety of colorful vulgarities upon seeing this latest trailer. Count him among the skeptics.)

But let’s not forget the smashing success of Wonder Woman (2017)—everything a superhero origin story should be. So maybe it’s premature to outright dismiss Aquaman (another origin story) simply based on the trailers, which have been visually striking but a little incoherent in terms of telling us what the movie is supposed to be about.

The final trailer doesn’t add much more to what we already know. We see the same lush underwater scenes that were so challenging to shoot, and we see elaborate CGI battle scenes. We catch a glimpse of Arthur before he becomes Aquaman with his parents as a baby and toddler. We watch him swim with dolphins and find a mentor in Willem Dafoe’s Nuidis Vulko.

We know Arthur’s destiny is to take his rightful place as king of Atlantis, pitting him against his half brother and current ruler of Atlantis, Orm (he’s played by Wan regular Patrick Wilson of the director’s Insidious and Conjuring franchises). In an interview with Entertainment Weekly at CinemaCon in April, Wan described their relationship as “almost a very classic Shakespearean story about brother from another world vs. brother from another world.”

Apparently Orm wants to use a magic trident to bring Atlantis back to the surface and declare war on the human race. And Aquaman will try to stop him and find a way to unite the two worlds, possibly by acquiring another magical trident? It’s not entirely clear. But we can definitely look forward to some villainous preening from Orm, a bit of romance with Atlantean warrior Princess Mera (Amber Heard), and what looks like an underwater battle with giant crabs, sharks, and manta rays—plus one extra-large sea monster.

Maybe that will be enough to win over the skeptics. Or maybe the final product will be just as bad as they fear. We’ll have to wait until the film comes out to see if Wan can pull it off. Aquaman will hit theaters on December 21.

Warner Bros. Pictures’ Aquaman final trailer.


via Ars Technica
Hang onto your magical tridents, the final Aquaman trailer is here

An Open Letter To Rep. Eric Swalwell


Late last week, California Rep. Eric Swalwell decided to double-down on previous anti-gun comments. In the process, he sparked a debate that led to one of the worst possible comments an elected official could make.

That’s right, he implied that the United States government would use nukes to deal with Second Amendment activists who resist gun confiscation.

With that in mind, I wanted to pen a bit of an open letter to Rep. Swalwell.

Dear Rep. Swalwell.

On Friday, I fired up Twitter to see what was going on and I saw something baffling. That was the above tweet where you respond to someone warning of a civil war in the even your assault weapon confiscation scheme ever came to fruition. You actually brought up nuclear weapons.

Seriously?

You then began to mischaracterize the entire thing, first calling it “sarcasm” while still ignoring the reality that you brought up the argument of nuking Americans who disagree with you. Then you tweet this:

Wow. Look at the lies.

First, you propose a “buy-back” sure enough…but notice how you said you wanted the police to go after anyone who didn’t want to sell their AR-15s for a fraction of their purchase price?

You’re not proposing a method to potentially reduce the number of AR-15s on the streets, you were talking about confiscating the single most effective rifle for self-defense and going after anyone who didn’t want to go along with the program.

You were then warned that if you do that, it’ll spark a civil war. To be clear, this point was made long before. This Twitter user can’t be the first one to have ever mentioned the possibility to you. American gun owners will not become subjects. We don’t trust the government enough, regardless of who is in power, to just accept them as the only one with these weapons.

It’s also interesting that you claim you “sarcastically point out the USA isn’t losing to his assault weapons” and claiming that is leading to you being called a tyrant.

No.

You’re being called a tyrant because you are seeking to ignore the Second Amendment, deprive people of their property without due process, and seek to create the perfect environment for tyranny to take hold in this great nation. You’re called a tyrant because you then respond to warnings of what that might lead to with comments about nuclear weapons.

However, I’m going to clue you in on a little something, Mr. Swalwell.

In the 1960’s, my father went on an all-expenses-paid trip to the far east. His destination was a tiny country few people had even heard of a decade before. It was called “Vietnam.” There, the mighty American military came face to face with an enemy that was little more than guys with assault rifles and how did that work out?

We didn’t nuke them.

Then fast forward to 2001. A group of terrorists hijacked some planes and flew them into buildings. We knew who was responsible and roughly where he was. We told the Taliban to give him over, and they refused. We rolled right over them.

Now, little more than guys with assault rifles, they’ve been a major headache for the military since then.

The same thing played out in Iraq. Saddam’s army fell in no time, but we were stymied by the guerrilla warfare that followed.

Should, God forbid, a civil war come to our American shores, it won’t be pretty. However, I can also tell you that the combined might of the United States will have a damn hard time neutralizing that rebellion.

And that’s if the military is even interested in fighting. Don’t be surprised, Mr. Swalwell, to find out that most of the guys on the sharp end actually disagree with you over this crap. And they’re the ones who will have to kick in doors and be the ones who get shot.

The same is true of law enforcement. Don’t mistake police chiefs pontificating on gun control to mean that the regular beat cop is your ally in this. They often know damn good and well they can’t be everywhere, but an armed citizen can at least protect themselves.

In other words, the people who you want to stand against these Americans aren’t likely to side with you on any particular level.

But then again, maybe you did know that. Maybe that is why you brought up nukes in the first place.

Look, Rep. Swalwell, I get you’re from California and people there seem to love them some gun control. California isn’t the rest of the United States, and I’m thankful for that. However, you should also realize that many of us have seen what is transpiring in other countries and are bound and determined not to allow that to happen here. We’ve watched the UK ban guns, then start going after free speech at a time when crime is becoming more and more of an epidemic, for example. We watch Europe do the same thing as “refugees” act however they want and the governments of Europe seem unwilling to do anything about it, but the idea of average Europeans having the means to defend themselves is unconscionable.

We’ve seen that and we’re not interested in it ourselves.

If that means you want to nuke us, then so be it. However, look at the writings of our Founding Fathers when it comes to guns. They explicitly wanted us to be able to overthrow the government if it fails to act in our interests.

By making your crack about nukes, you didn’t take down the pro-gun argument. You may have created a “pro-civilian ownership of nukes” argument, though, so good job for that.

Maybe the next time you decide to be so flippant over a gun owner’s concerns about his constitutionally protected rights, you’ll stop being such an elitist schmuck and recognize there are real concerns at work on this side of the aisle, and your attitude isn’t making anyone more willing to sit down with you and talk about finding “common ground to protect our families and our communities.”

Especially since the only common ground you want us to find better boils down to “your way or the highway.”

So no. We’re not giving up our weapons.

And yes, if you insist on coming after us, it will spark a civil war.

You need to come to terms with this reality if you’re going to keep pushing this ban of yours. Man up and admit that you want us dead and I might at least be able to respect your guts. But stop pretending that you want anything else.

Author’s Bio:

Tom Knighton


Tom Knighton is a Navy veteran, a former newspaperman, a novelist, and a blogger and lifetime shooter. He lives with his family in Southwest Georgia.

https://ift.tt/2w2n5Gd


via Bearing Arms
An Open Letter To Rep. Eric Swalwell

Building An Interactive Infographic With Vue.js


About The Author

Krutie is technical business analyst and a front-end consultant with expertise in Vue.js and Nuxt.js, alongside back-end proficiency in Laravel. She has an …
More about Krutie

Build An Interactive Infographic With Vue.js

Have you ever had a requirement in which you had to design and build an interactive web experience but the grid system fell short? Furthermore, the design elements turned into unusual shapes that just wouldn’t fit into the regular web layouts? In this article, we’re going to build an interactive infographic using Vue.js, SVG and GreenSock by using dynamic data and unusual layout.

This article presents a modern approach to building an interactive infographic. You sure can have plain infographic with all the information available upfront — without any user interaction. But, thinking of building an interactive experience — changes the technology landscape we choose. Therefore, let’s understand first, why Vue.js? And you’ll see why GSAP (GreenSock Animation Platform) and SVG (Scalable Vector Graphics) become obvious choices.

Vue.js provides practical ways to build component-based, dynamic user interfaces where you can manipulate and manage DOM elements in powerful ways. In this instance, it’s going to be SVG. You can easily update and manage different SVG elements — dynamically — using only a small subset of features available in Vue.js — some of the staple features that fit the bill here, are, data binding, list rendering, dynamic class binding to name a few. This also allows you to group relevant SVG elements together, and componentize them.

Vue.js plays nice with external libraries without losing its glory, that is GSAP here. There are many other benefits of using Vue.js, one of which is that, Vue.js allows you to isolate related templates, scripts, and styles for each component. This way, Vue.js promotes modular application structure.

Recommended reading: Replacing jQuery With Vue.js: No Build Step Necessary

Vue.js also comes packaged with powerful lifecycle hooks that let you tap into the different stages of application to modify application behavior. Setting up and maintaining Vue.js applications doesn’t require a big commitment, meaning you can take phased-approach to scale your project as you go.

The infographic is very light-weight in a visual sense, as the main aim of this article is to learn how to think in terms of data, visual elements, and of course, Vue.js — the framework that makes all the interactivity possible. In addition, we’ll use GreenSock, a library for animating SVG elements. Before we dive in, take a look at the demo.

We’ll start with:

  1. The overview of the data for infographic;
  2. SVG image preparation;
  3. An overview of Vue components in context of the SVG artwork;
  4. Code samples and diagrams of key interactivity.

The infographic that we’re going to build is about Tour De France, the annual bicycle racing event held in France.


Build an interactive infographic with Vue.js, SVG and GreenSock
Tour De France  —  Interactive bicycle listing game stages (rear-wheel) and participating teams (front-wheel). (Large preview)

Overview Of Tour De France Data

In infographic design, data drives the design of your infographic. Therefore, while planning your infographic design, it’s always a good idea to have all data, information, and statistics available for the given subject matter.

During Tour De France of 2017, I learned everything about this biggest cycling event that I could in 21 days of the game in July, and I familiarized myself with the subject.

Basic entities of the race that I decided to go for in my design are,

  • Stages,
  • Teams,
  • Routes,
  • Winners,
  • Length and classifications of each routes.

This next part of the process depends on your thinking style, so you can be creative here.

I created two sets of data, one for stages and other for teams. These two datasets have multiple rows of data (but within limit)  —  which matched with two wheels of the bicycle with multiple spokes in each. And that defined the key element of the design, The Bicycle Art that you saw at the beginning  —  where each spoke will be interactive & responsible to drive what information is revealed on screen.

I mentioned within limits above, because what we’re aiming for in this instance is not a full-blown data-visualization in context of big data but rather an infographic with high-level data.

Therefore, spend quality time with data and look for similarities, differences, hierarchy or trends that can help you convey a visual story. And don’t forget about the amazing combination of SVG and Vue.js while you’re at it, as it will help you bring about the right balance between information (data), interactivity (Vue.js) and design elements (SVG Artwork) of infographic.

Here’s the snippet of a stage data object:

{
    "ID": 1,
    "NAME": "STAGE 01",
    "DISTANCE": "14",
    "ROUTE": "KMDÜSSELDORF / DÜSSELDORF",
    "WINNER": "THOMAS G.",
    "UCI_CODE": "SKY",
    "TYPE": "Individual Time Trial",
    "DATE": "Saturday July 1st",
    "KEY_MOMENT": " Geraint Thomas takes his first win at 32"
}

And team data object snippet as below:

{
    "ID": 1,
    "UCI_CODE": "SKY",
    "NAME": " TEAM SKY",
    "COUNTRY": "Great Britain",
    "STAGE_VICTORIES": 1,
    "RIDERS": 8
}

This infographic is operated by a very simple logic.

UCI_CODE (Union Cycliste Internationale) is the connecting key between the stage and the team object. When a stage is clicked, first we’ll activate that stage, but also use UCI_CODE key to activate corresponding winning team.

SVG Preparation

Having a couple of datasets and a rough concept of bicycle art ready, here’s the static SVG CodePen of the infographic I came up with.

See the Pen Static Bicycle SVG by Krutie(@krutie) on CodePen.

We have created only one spoke for each wheel, that is because we’ll dynamically create rest of the spokes using a number of records found in the dataset, and animate them using GreenSock Library.

The workflow to create this SVG code is also very simple. Create your Infographic artwork in Adobe Illustrator and save as SVG. Make sure to name each group and layer while working in Illustrator, because you will need those ids to separate parts of SVG code that will eventually populate <template> area of Vue components. Remember that layer names given in Illustrator become element ids in SVG markup.

You can also use SVGOMG and further optimize SVG code exported from Adobe Illustrator.

Important Note: If you use SVGOMG to optimize SVG markup, your code certainly will look neat, but note that it will convert all <rect> elements into <path> with d attribute. This results into losing x and y values of the rectangle, in case you wish to adjust few pixels manually later-on.

Second thing, make sure to uncheck Clean Id option (right-hand side options in SVGOMG interface), this will help maintain all groups and ids intact that were created in Illustrator.

Vue Component Overview

Even if interactivity and data-flow in your infographic project is quite simple in nature, you should always take a moment to draw up a tree diagram of components.

This will especially help in case you’re not using any shared-data mechanism, where child components are dependent on the values sent from the parent component (i.e. via props) or vice-versa (i.e. this.$emit events). This is your chance to brainstorm these prop values, emit events and local data — and document them before starting to write the code.


Vue component tree
Vue component tree. (Large preview)

Diagram above is the snapshot of Vue components that is partially derived from interactivity requirements and partially based on SVG markup. You should be able to see how SVG markup will be split up based on this tree structure. It’s pretty self-explanatory from hierarchy view-point.

  1. Chain-wheel will imitate rotation of spokes.
  2. Stage component is the rear wheel that will list all 21 stages.
  3. Stage-detail component will display related information on a curved path (left-hand side).
  4. Team component is the front wheel that will list all participating teams on spokes.
  5. Team-detail component will display related information on a curved path (right-hand side).
  6. Navigation will include back and next button to access stages.

The diagram below represents the same Vue components seen above, but in the context of the infographic design.


Vue Components blended into SVG
Vue Components blended into SVG. (Large preview)

Less is more — should be the approach you should try to take while working on similar projects. Think through the animation and transition requirements you have, if you can get away with using TweenLite instead of TweenMax — do so. If you have the option to choose elementary shapes and simpler paths over complex ones — by all means try to opt-in for light-weight elements that are easy to animate — without any performance penalty.

Next section will take you through an exciting part with GreenSock animation and Vue.js.

GreenSock Animation

Let’s take a closer look at:

  1. Text animation on a curved path;
  2. Spoke animation on a wheel.

Animating Text On A Curved Path

Remember the curve path seen around the bicycle wheel, that curved path is slightly bigger than the radius of the bicycle wheel. Therefore, when we animate text on this path, it will look as if it follows the shape of the wheel.

See the Pen Text on a Curved Path by Krutie (@krutie) on CodePen.

path and textPath is a sweet combination of SVG elements that allows you to set text on any path using xlink:href attribute.

<path id="curvedPath" stroke="none" fill="none" d="..."/>

<text>

  <textPath xlink:href="#curvedPath"
          class="stageDetail"
          startOffset="0%">
          
   </textPath>

</text>

To animate text along the path, we’ll simply animate its startOffset attribute using GreenSock.

tl.fromTo( ".stageDetail", 1,

{
  opacity: 0,

  attr: { startOffset: "0%" }

},{opacity: 1,

  attr: { startOffset: "10%" }

}, 0.5 );

As you increase the startOffset percentage, text will travel further through the circle perimeter.

In our final project, this animation is triggered every time any spoke is clicked. Now, let’s move on to a more exciting part of the animation.

Animating Stages/Spokes Inside The Wheel

It’s visible from the demo that stage and team components are similar in nature with couple of small differences. So, let’s focus on just one wheel of the bicycle.

The CodePen example below zooms in on just the three key ideas:

  1. Fetch stage data;
  2. Arrange spokes dynamically based on the data;
  3. Re-arrange spokes when stage (spoke) is clicked.

See the Pen TDF Wheel Animation by Krutie (@krutie) on CodePen.

You may have noticed in the static SVG CodePen above that the spokes are nothing but SVG rectangles and text grouped together. I have grouped them together since I wanted to pick both text and rectangle for the purpose of animation.

<g v-for="stage in stages" class="stage">

    <rect x="249" y="250" width="215" height="1" stroke="#3F51B5" stroke-width="1"/>

    <text transform="translate(410 245)" fill="#3F51B5" >

      
    </text>

</g>

We will render them in <template> area of the Vue component using values fetched from the data-source.

When all 21 stages are available on screen, we’ll set their initial positions by calling, let’s say, setSpokes().

// setSpokes()

let stageSpokes = document.querySelectorAll(".stage")
let stageAngle = 360/this.stages.length

_.map(stageSpokes, (item, index) => {
    TweenMax.to(item, 2, 
    { rotation: stageAngle*index, 
      transformOrigin: "0% 100%"
    }, 1)
}

Three key elements of setting the stage are:

  1. Rotation
    To rotate spokes, we’ll simply map through all elements with className stage, and set dynamic rotation value that is calculated for each spoke.
  2. Transform Origin
    Notice transformOrigin value in the code above, which is as important as index value, because “0% 100%” enables each spoke to rotate from the center of the wheel.
  3. stageAngle
    This is calculated using total number of stages divided by 360-degree. This will help us lay every spokes evenly in 360-degree circle.

ADDING INTERACTIVITY

Next step would be to add click-event on each stage to make it interactive and reactive to data changes  —  hence, it will breathe more life into an SVG image!

Let’s say, if stage/spoke is clicked, it executes goAnimate(), which is responsible to activate and rotate the stage being clicked using the stageId parameter.

goAnimate (stageId) {

  // activate stage id
  this.activeId = stageId

  // rotate spokes

}

We’ll use DirectionalRotationPlugin…which is a key ingredient for this interactivity. And yes, it is included in TweenMax.

There are three different ways of using this plugin. It animates rotation property in 1) clockwise, 2) counter-clockwise and 3) in the shortest distance calculated to the destination.

As you’d have guessed by now, we’re using the third option to rotate the shortest distance between the current stage and new stage.

Review the CodePen above and you’ll see how Stage 01 is constantly moving around the circle, leaving its original spot for new active stage at 0-degree angle.

First, we need to find the angle of a stage being clicked, and interchange its rotation with Stage 01. So, how do we find the rotation value of the stage being clicked? Check out the diagram below.


Distance calculation from Stage 01 to the ‘clicked’ stage
Distance calculation from Stage 01 to the ‘clicked’ stage. (Large preview)

For example, if Stage 05 is clicked (as you can see above), the journey from Stage 01 to Stage 05  —  requires 4 x angle-value.

And therefore, we can get the correct angle using, (Active stage Id - 1) * 17 degree, followed by ‘_short’ string postfix to trigger directional rotation plugin.

angle = 360/21 stages = 17
activeId = 5
new angle = ((activeId-1)*angle)+'_short'
          = ((5-1)\*17)+'_short'
          = 68

The final goAnimate() function will look something like below:

_.map(spokes, (item, index) => {

  if(activeId == index+1) { 
    // active stage
    TweenMax.to(item, 2, 
    { rotation: 0+'_short', 
      transformOrigin: "0 100%"
    })   

  } else if (index == 0) { 
    // first stage
    TweenMax.to(item, 2,
    { rotation: (activeId*angle)-angle+'_short',
      transformOrigin: "0 100%"
    })

  } else {
    TweenMax.to(item, 2, 
    { rotation: index*angle+'_short', 
      transformOrigin: "0 100%"
    })
  }

}) // end of map

Once we have the rear wheel ready, the front wheel (for team) should follow the same logic with a couple of tweaks.

Instead of stage, we’ll fetch team data and update registration point of transformOrigin attribute to enable spokes generation from opposite registration point than the stage wheel.

// set team spokes

map(teamSpokes, (index, key) => {
  TweenMax.to(index, 2, 
  { rotation: angle*key, 
    transformOrigin: "100% 100%"
  }, 1)
})

Final Project

Like me, if you have written all animation and data related functions in Vue components itself. It’s time to clean them up using Vuex and Mixins.


Using Vuex state management to power both wheels with data
Using Vuex state management to power both wheels with data. (Large preview)

VUEX

Vuex eases up the management of shared data among components, and more importantly, it streamlines your code, keeping methods and data() clean and tidy, leaving components only to render the data, not to handle it.

Lifecycle hooks are a very suitable place to perform any HTTP requests. We fetch initial data in created hook, when the Vue application has initialized, but hasn’t yet mounted into the DOM.

Empty state variables, stages and teams are updated using mutations at this stage. We then, use watcher (only once) to keep track of these two variables, and soon as they’re updated, we call in animation script (from mixin.js).

Every time user interacts with stage or team component, it will communicate with Vuex store, executes setActiveData, and updates current stage and current team values. That is how we set active data.

And when the active data is set after state update, goAnimate will kick in to animate (directional rotate) spokes using updated values.

Recommended reading: Creating Custom Inputs With Vue.js

Mixins

Now that the data is handled by Vuex, we’ll separate out GreenSock animations. This will prevent our Vue components being cluttered with long animation scripts. All GreenSock functions are grouped together in mixin.js file.

Since you have access to Vuex Store within Mixins, all GSAP functions use state variables to animate SVG elements. You can see fully functional store.js and mixin.js in the CodeSandbox example over here.

Conclusion

Creating interactive and engaging infographics requires you to be analytical with the data, creative with visuals and efficient with the technology you use, which in this case is Vue.js. You can further use these concepts in your project. As a closing note, I’ll leave you with this circular interactive color wheel below that uses an idea similar to the one we’ve discussed in this article.

See the Pen Material UI Circular Colour Palette made with Vue JS and GSAP by Krutie (@krutie) on CodePen.

With no doubt, Vue.js has many great features; we’re able to create interactive infographics with just a few things, such as watchers, computed properties, mixins, directive (see color-wheel example) and a few other methods. Vue.js is the glue that holds both SVG and GreenSock animation together efficiently, giving you ample of opportunity to be creative with any number of subject matter and custom interactivity at the same time.

Smashing Editorial
(rb, ra, yk, il)


via Smashing Magazine
Building An Interactive Infographic With Vue.js