Chris Essig

Walkthroughs, tips and tricks from a data journalist in eastern Iowa

Archive for the ‘Uncategorized’ Category

Leaflet formula: Counting markers within a radius (version 2)

with 2 comments

A couple of years ago, I open-sourced a project that allows you to count how many markers are within a circle using Leaflet. As part of the template, a user needs to enter an address to get a marker to show up on the map.

Two weeks ago, Jefferson Guerrón reached out to me because he was creating something similar that didn’t require a user to type in their address. He was using the plugin Leaflet.draw to get the marker on the map. But he was having a hard time getting a circle to show up around the marker and count the other markers within that circle.

After a few back-and-forth emails, we were able to come up with a solution. Here’s a look of the final project. And the code is available on Github.

If you have questions, don’t hesitate to e-mail or comment.

Advertisements

Written by csessig

December 14, 2016 at 5:15 pm

Introduction to Javascript

with 2 comments

A few weeks ago, I presented on the basics of Javascript to my fellow developers at FusionFarm.

If you want to check out my slides for the presentation, they are available here. I went over variables, objects, for loops, functions, and a whole host of other fun stuff.

If I missed anything, let me know in the comments.

Written by csessig

July 12, 2016 at 9:13 am

Posted in Javascript, Uncategorized

Tagged with

Quick intro to PJAX

leave a comment »

Every week, the developers at Fusion Farm meet and have a code review. Last week, I presented on PJAX, which I spent a few hours digging into.

The code behind my presentation is available on my Github page.

You really need to set up a back-end project to use PJAX to its fullest. For this presentation, I focused on just the front-end components, which will at least give you an idea of how the library works.

I’ve seen PJAX (or something like it) a few times in the wild. The Chicago Tribune, for instance, uses it (or something similar) on their website. If you scroll down their page long enough, you’ll notice a new page opens up in your browser. But the entire page doesn’t refresh. Instead the URL changes smoothly as you scroll down the page.

Anyways, check out the code on my site and if you have any questions, fire them my way.

 

Written by csessig

December 21, 2015 at 9:58 am

Posted in Uncategorized

How To: Using jQuery tabs with Friday night preps coverage

leave a comment »

At the Courier, we are lucky to have a group of sports reporters that tweet from every high school prep game they can. Iowa high school football also have a dedicated hashtag (#iahsfb) that reporters and fans alike use every Friday night to update the world and what is going on in their game. The only problem from a readers standpoint is if you want to follow several of our local reporters and everybody across the state that uses the #iahsfb hashtag, you’ll have to open several Twitter pages to follow everything at once. Using simple Javascript, we can fix this problem. Here’s a rundown on how I use jQuery tabs (shown above) to fit all of the live coverage on one page. The final product will look like this.

1. For those unfamiliar with the jQuery UI, I suggest reading through their Documentation page to get the basics. You don’t need to know much code (I don’t) to get the feature working so don’t be intimidated. Then either download a theme or color-code your own. I worked our site’s blue into the theme before downloading a copy. You don’t need any programming skills for this and best of all, jQuery shows you on the fly what the final product will look like before you download it. Now download the files and unzip them.

2. The folder you just downloaded will include the necessary Javascript (located in the js folder) and CSS (you guessed it…in the CSS folder) for the project. It also includes an index.html page that shows you some of components you can use. Now put all of the files on the web somewhere. I put all mine in wcfcourier.com/app/special/.

3. Open up or create a new HTML page. In between the <head></head> tags, link to three files: the jQuery javascript file, the jQuery UI javascript file and the CSS file. My coding looks like this, although yours might vary slightly depending on what you downloaded:

<link type=”text/css” href=”ENTER_URL/css/custom-theme/jquery-ui-1.8.15.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”ENTER_URL/js/jquery-1.6.2.min.js“></script>
<script type=”text/javascript” src=”ENTER_URL/js/jquery-ui-1.8.15.custom.min.js“></script>

4. Calling the tabs function is just as easy. Here’s the code (from the jQuery UI site). Stick this under the code above and above the </head> tag.

<script>
$(function() {
$( “#tabs” ).tabs();
});
</script>

5. That’s all the Javascript we need to run this fairly complicated task! Now move to the body of the HTML file. Basically the tabbed links at the top of the page (in this case, the games we are covering) is an unordered list:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>

The number of tabs will vary depending on how many pages you have. In this example, our sports reporters are covering three different games plus I want a tab to link to a Twitter widget that uses the #iahsfb hashtag. So I have a total of four tabs. The text between the link tags is the text that the reader will see and click on to open each page. In this example, it’s high school games.

6. Next, we need to create four divs to be linked to. For this example, I need four Twitter widgets. The basic structure of each div is very, very simple:

<div id=”tabs-1″></div>
<div id=”tabs-2″></div>
<div id=”tabs-3″></div>
<div id=”tabs-4″></div>

Note these divs go inside the <div id=”tabs”> created above. After the final div tab (in this case number four), we want to make sure we include a </div> tag. The bare bones code looks like this:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>
<div id=”tabs-1“></div>
<div id=”tabs-2“></div>
<div id=”tabs-3“></div>
<div id=”tabs-4“></div>
</div>

7. The tabs function should be working by now. But each time you click on a tab, nothing shows up. Let’s fix that: Inside each of these four divs will be the individual Twitter widgets that will show up when a reader clicks the tab. We went ahead and made the reporters’ Twitter widgets by going to Twitter’s webpage. Twitter gives you the code to copy and paste between <div id=”tabs-4″></div> tags.

I also added a quick sentence above each Twitter widget telling the reader which game the reporter is covering. The final output for one Twitter widget looks like so:

<div id=”tabs-3″>
<p>Sports Reporter Carson Tigges (<a href=”http://twitter.com/CarsonTigges” target=”_blank”>@CarsonTigges</a>) is covering the Columbus v. North Hampton game:</p>
<br />
<p align=”center”>
<script src=”http://widgets.twimg.com/j/2/widget.js”></script&gt;
<script>
new TWTR.Widget({
  version: 2,
  type: ‘profile’,
  interval: 6000,
  title: ‘Tweets from Carson Tigges‘,
  subject: ”,
  width: 580,
  height: 650,
  theme: {
    shell: {
      background: ‘#001952’,
      color: ‘#ffffff’
    },
    tweets: {
      background: ‘#ffffff’,
      color: ‘#444444’,
      links: ‘#1985b5’
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: ‘all’
  }
}).render().setUser(‘CarsonTigges‘).start();
</script>
</p>
</div>

Amazing and all contained with a div.

8. Basically all we need to do now is replicate that Twitter widget three more times (four total), which is really easy. Just change the bolded text for each reporter you’ll be using. Now copy and paste the new Twitter widget code in between another div tag. Do the same for the others until you have all four Twitter widgets on the page. The final code is long but far from complicated.

– I uploaded the final product so take a peak and copy any of it that is helpful.

NOTE: If you look at the final product, you will see the following code. Ignore it. This is automatically added by our CMS and shouldn’t have any use for you:

<script type=’text/javascript’ src=’http://stats.townnews.com/shared-content/stats/common/tracker.js’></script&gt;
<script type=’text/javascript’>
<!–
 if (typeof(TNStats_Tracker) !== ‘undefined’ && typeof(TNTracker) === ‘undefined’) { TNTracker = new TNStats_Tracker(‘wcfcourier.com’); TNTracker.setTrackerDomain(‘stats.townnews.com’); TNTracker.trackPageView(); }
// –>
</script>

Written by csessig

October 6, 2011 at 7:44 pm

Posted in Uncategorized

New tools and (easy) Javascript tricks

leave a comment »

Here at WCFCourier.com, I’m always looking for cool, new tools that can help present our stories/data in a new way. One of my favorite new tools is DocumentCloud, a PDF viewer that allows us to present documents in a much easier and user-friendly way than how we’ve uploaded documents before.

Previously, we loaded PDF’s directly into our CMS, which basically forced readers to download the PDF to view the document. For documents that number in the hundreds of pages, that was impractical for readers. DocumentCloud not only gives readers an easy way to thumb through the pages without having to download the whole thing, it allows us to annotate specific text with the document to highlight major points. I was immediately impressed with the service and have used it to upload every document for the past several months.

Here’s some other tools I’ve used that may help you out:

  • Storify: This tool has become all the rage in the techie-journo world and it’s easy to see why. Basically, the tool allows journalists to make chronological, list stories using photos, text and video from a variety of social media platforms like Facebook and Twitter. Here’s a few examples: 1. A recap of our coverage from Michele Bachmann’s big presidential announcement in Waterloo; and 2. A Cedar Falls woman who inspired thousands on Twitter.
  • ScribbleLive: We recently switched from CoverItLive to ScribbleLive for our live chat needs. One thing I love about the service when compared to CIL is the lack of ads within the live chat when a reader first goes to the page. We’ve also had better luck loading in video to the chat than with CIL. Here’s an example from Saturday’s UNI football game.
  • Google Charts: Who doesn’t like fancy graphs that help break down numbers and figures? Using Google Docs and Google Charts, journalists basically only need a simple spreadsheet to output graphs like pie or line charts. And, of course, Google’s API gives you plenty of options to customize them to make them look how you want.
  • jQuery tabs: Anybody will a little bit of Javascript knowledge and an understanding of basic jQuery shouldn’t have any problem implementing this simple but flexible tool into their website. The jQuery UI also gives you great flexibility to style it how you want it to look when it’s all done. I now use the tabs feature to promote our sport reporters who live tweet high school prep games every Friday night.
  • jQuery before/after plugin: This is a tool I definitely want to use again the future. I won’t describe it in too much detail here; instead, I point you to the one time I used it to compare ward maps in Cedar Falls. But basically this is one of the best tools to visually compare before and after photos. And it’s simple to use. I swear. Check it out.

Written by csessig

October 3, 2011 at 6:55 pm

Posted in Uncategorized

Second story appears in the St. Louis Post Dispatch!

with 2 comments

Once in a blue moon the St. Louis Post Dispatch will run a story of ours in their newspaper. But it has to be something pretty unusual because the publication has it’s own bureau in the Statehouse. So far, only one of my story’s has appeared on their web site. Until last week….

SPRINGFIELD, Ill. — A lawsuit filed in federal court last week seeks to block the state from using public funds to help religious organizations expand their facilities.

Green Party gubernatorial candidate Rich Whitney, an attorney from Carbondale, is representing one of the state’s most outspoken atheists, Rob Sherman, in the case, which seeks to stop about $2.3 billion worth of funding for construction projects. The money is part of the Illinois’ $31 billion capital construction plan that was approved by the General Assembly last year.

Rock on!

And just because I love having pictures in my blog, I grabbed a screen shot…Wait for it…

Here’s my first story that appeared in the Dispatch.

That makes two more than I expected.

Written by csessig

April 14, 2010 at 9:40 pm

Posted in Uncategorized

Another 10 day lapse in blogging…

leave a comment »

Sorry…

Written by csessig

April 14, 2010 at 9:12 pm

Posted in Uncategorized