A data interactive that challenges people to draw a trend, and then shows them reality
In the thick of the 2016 campaign, then-candidate Donald Trump frequently claimed that life in America was becoming more dangerous. He didn’t have to work hard to convince folks. Gallup pollsters found more than half of Americans worried “a great deal” about crime and violence, and the same proportion expected gun violence to go up.
The problem? Those opinions weren’t based on facts. Violence in the United States has declined almost every year for the past 25 years. Trump’s comments were well-timed — the national murder rate did briefly jot up in 2015 and 2016, largely driven by violence in a few cities — but the overwhelming trend is negative. New York City, which ranks near the bottom in polls on public perception of crime and violence, is actually one of the safest places to live in the country.
But simply stating facts doesn’t always correct a misconception — people’s opinions are remarkably sticky. When I sat down to write a story on Trump’s doomsaying, I wondered if there was a sneakier way to show folks the true trends.
My experiment: What if I had them draw their guess first, and then showed them the actual data?
Here’s what I added near the top of the story:
It was a cool addition to the article, but I never had a chance to deploy this kind of interactive graphic again. What’s more, I never really got a sense if it was effective — did this actually help people change their minds?
Two years later
The government is shut down. The Democrats refuse to fund a wall. And nearly every day, Trump claims there is a flood of people pouring across the southern border.
By historical standards, this is not true. In fiscal year 2017, the U.S. Border Patrol apprehended 310,531 people, the lowest number since 1971. That’s despite a historically high number of Border Patrol agents, though the force strength has slightly dropped from its peak in 2011.
Could it be time to bring back the line-drawing trick?
This week, my Make Every (Two) Week(s) project is to turn my 2016 graphic into a reusuable web component I could launch with almost any dataset. I call it <guess-graph>.
Here’s the new graphic:
And here’s the code I used to make it:
<guess-graph
intro-title = "Click the starting point and
draw your best guess for total <strong>illegal
border crossings</strong> between 1997 and 2017."
data = "/assets/guess-graph/border-arrests.json"
y-axis-label = "Illegal border crossings (in millions)"
y-axis-min = "0"
y-axis-max = "3"
height-mobile = "300"
height = "400"
></guess-graph>
While defaulting to sensible styles, it has a bunch of parameters that customize how it should look (full list here). For data, tt references an external JSON file, which looks like this:
[
{
"year": 1997,
"rate": 1.369
},
{
"year": 1998,
"rate": 1.517
},
{
"year": 1999,
"rate": 1.537
},
...
]
This component is built using the Custom Elements V1 spec, which brings some of the modularity seen in frameworks like React or Vue into vanilla HTML and JavaScript. Custom elements are now supported across all major browsers except Edge; for them and older browsers, use this polyfill.
Why make it as a custom element? This frees the user from having to use any particular JS framework, and makes dropping the code into a content management system or blogging platform like Wordpress easy for beginners.
The full code for the component is here.
What’s next
Now that I’ve built the component, next step is to put it through some user testing to see if it makes sense to readers and contributes to their understanding of counterintuitive trends. See you in two weeks!