Category: Dataviz

Mahima Singh : Independent learning

For the independent learning portion of the course, I didn’t want to only use lynda.com.  While lynda.com does provide exercise files and walk along I wanted to get an eclectic understanding of HTML and JavaScript for my final project.

I plan to use a one page HTML template to present my findings (Data) then host it on GitHub or someplace free.

Understanding how to Host sites on GitHub.

For this, I went through a GitHub Tutorial for GitHub

The hosting part of it was pretty straight forward. What was a little confusing to me was playing around with the HTML template that I download off the internet. Luckily in class, we have been tinkering with already exciting code. So that is exactly what it did. I played around with the HTML index file of the template and occasionally found myself on StackOverflow trying to figure out how to “Hyperlink an enter div.” Once I got this figured out, I was pretty confident that I will be able to at least Host my project on GitHub. But I would only be certain once I tried.

Integrating JS into HTML

This part took a lot of trial and error. The first place I looked for help was W3schools. It was simple to understand and I could use the snippets to play around with some of the stuff I had on my computer. I used some of the JS charts we had used in class as examples to integrate into a sample HTML template I was working with.

Lynda Requirement

I watched Bootstrap Layouts: responsive single-page design.

The HTML template I was working with was from Bootstrap. While it is known to be easy to work with, one thing I couldn’t get round was the column and row makeup of the Bootstrap page. The video was exactly what I needed. I was stuck trying to get my charts into multiple columns on the bootstrap template and watching this three-hour long video not only helped me solve that problem but it taught me many new things on bootstrap.

In the end, it all came together. The things I learned in class, especially the tinkering with Javascript along the extra learning I did made this project possible.

The final project can be viewed here: Trump and the media

 

 

 

Alex O’Toole – Final Project

The LGBTQ+ community is a community that has long faced persecution and discrimination and hearing that doesn’t come as a surprise to anyone– because it is not new information.

Final2
Create your own infographics

It isn’t as if more people are suddenly becoming gay or deciding to be gay, but they are becoming increasingly comfortable with themselves and the climate so that they can admit it now.

The LGBT Civil Rights Movement has been going on for a long time now and it is a fight that it still happening every day. This timeline offers just a sampling of what the LGBT community has done and has gone through over the past several decades.

 


Yes, as you can see, we as a nation have come a long way. However, that is not to say that we are in a completely safe and accepting society. We know that regardless of any strides or progress, that is absolutely not the case.

The following chart illustrates the breakdown of hate crimes based on sexual identity and gender identity, respectively. These are according to FBI findings for the year 2015.

Final3
Create your own infographics

In 2015, law enforcement agencies reported 1,219 hate crime offenses based on sexual orientation bias, which is the total number represented in the above chart. Most of the groups identified in the first chart are pretty self-explanatory. “Mixed group” bias, however, refers to bias that was was prompted by an anti-lesbian, gay, bisexual, and/or transgender bias; it encompasses a larger group. Clearly though, still, gay men are facing the majority of bias. In 2015 alone they alone faced over 758 hateful assaults.

In the same year, of the single-bias incidents, 118 offenses were a result of gender-identity bias. Of those, 75 of them were anti-transgender and 43 were anti-gender non-conforming.

Something that people always say is that children are the future. If that is the case here, then things are looking up. Children today are being born into a society where it is more acceptable to be who you are. Statistics about LGBT youth show the discrimination that is still being faced by all age groups within the community, but also hope for the future.

Final
Create your own infographics

Assignment 6 : Mahima Singh

With Rupert SandersGhost in the shell getting mixed reviews because fans kept comparing it to the original anime, I decided to do a comparison of anime with their live action counterparts.

I took the ratings from IMDB  and plotted it in this mixed bar chart.

The data entry into the JS code was easy enough, but formatting the original chart after that was a nice challenge.

I experimented with D3’s categorical colors and the charts’ axis formatting by writing a function of my own to make sure the ‘Rating” axis didn’t read negative values.

 

If you are familiar with pop culture and know a little bit about good cinema then you will know that James Wong’s white-washed adaptation of Dragon ball Z, Dragon ball Evolution was one of the worst live action remakes of any anime ever. So it is no surprise that Dragon Ball Evolution has the worst rating.

What is surprising to me is that Sailor Moon’s live adaptation (tv series) got the closest rating to its anime version. The Sailor Moon anime is a tough act to follow. But according to IMDB ratings, it looks like ‘Pretty Guardian Sailor Moon’ comes close enough.

Another obvious trend is the high ratings of the phenomenally successful anime, Death Note. While the anime did a little better, the film came pretty close and I say this from experience. Shûsuke Kaneko’s 2006 Death Note, had its pitfalls but it was a good movie. I doubt Netflix’s adaptation, set to release in August this year, will be able to live up to the hype. But we can only wait.

Here is a list of live action films (based on popular anime) in the making. Some names like Naruto, Bleach, Fullmetal Alchemist, Tokyo Ghoul and Attack on Titan have a lot riding on them because of their incredible fan base.

 

Assignment 6: GROH

I examined the relationship between overall crime in New York versus the amount of sentences for those crimes. The data reveals a slight decrease in overall crime and a sharp decrease in the amount of criminals sentenced. There could be a multitude of reasons for this, however; I expect the cause to be an already over populated jail system and the sentiment that “lesser” crimes shouldn’t be punishable by prison sentences.

Assignment 6: Carla Caban

For this assignment, I decided to look into unemployment rates from the past 10 years and compare them with the number of new jobs created. The dates are kind of off. I used the excel sheet but for some reason the dates are not exact. I got my unemployment data here and the numbers of new jobs created over the past 10 years here. I couldn’t figure out how to put the percentage sign after the number and not before so if someone knows how to please let me know.

Assignment 5 : Mahima Singh

Morbid warning.

After doing research for a project for my Natural Language Processing class, I came across this database of the Last Statement of inmates on death row in Texas.

I decided to scrape the website, pull out the last statements and figure out what the most used words were. You can find the code on my GitHub here.

As we can guess, by the end of their time, an inmate does think of their family.
The word ‘Love’ is used the most, followed by ‘Family’. Other words relating to retribution such as ‘God’ and ‘Sorry’ also make the top-15 list.

Here is the full data that is available on the site.  The “Info” column will give you information on the inmate and the crimes the committed and the “Link” column will take you to the text of their last statement.

 

FactTexas was the first state in the world to carry out an execution by lethal injection in 1982 

Assignment 4 : Mahima Singh

Disney just announced that they plan to continue telling Star Wars stories for the next 15 years. As an ‘EU’ (extended universe) fan of the franchise, I am excited that the Star Wars cannon will continue to grow in my lifetime. In my nostalgic look back at episode I-VII, I realized that characters hardly ever say the word ‘lightsaber’ in the films.  After a quick fan-forum search I learned that the word Lightsaber is used only eight times in all the films till episode VII.   I decided to do a histogram of some of the more popular Star Wars phrases.

May the Force be with you

I have a bad feeling about this

The Force

The Dark Side

I scraped through the scripts of episodes I-VII ( The official script of Rogue one hasn’t been released yet) and counted the number of times each phrase was said and by whom.

This two-level drill down of a treemap represents that dataset.

Design wise I wanted to do a lot more. But as we studied in class, High charts, like any other third-party application, has its drawbacks when it comes to customization.

Assignment 4 – Elena DeLuccia

I decided to take a look at Donald Trump’s tweeting activity in the days following inauguration (January 20th). There is a clear distinction between which tweets he authored and those he decided to retweet.

Assignment 3 – Elena DeLuccia

I thought it would be a good idea to do a timeline on something really relevant to news right now. So I decided to do mine on how Jeff Sessions got to the Attorney General position. I updated it to include the most recent controversies with his contact with Russia, and will continue to update if there are any other developments throughout the weekend!

 

2/28 Lecture Notes: No-Code Dataviz tools, CartoDB

12:30: Housekeeping

12:31-12:50: Guest: Jodi Upton, Knight Chair in Data and Explanatory Journalism.

12:50-1: Your Infogr.ams (assignment 2).

1-1:40: Other no-code dataviz tools

But first, HTML! You can go through these three self-guided HTML teaching tools on your own.

Simple No-Code Dataviz Tools

Here are the ones we will go over today:

1) Infogr.am (http://infogr.am)

Infogr.am is an easy way to create simple charts and graphs, as well as scrolling infographics that you may notice people posting in places like Facebook and Tumblr. For journalism I think the graphs and charts work best, because you can embed them directly into stories to visually explain something you are reporting in text.

Take note of the Graphs and Charts tab at the top. Click the Charts tab to see all the different types of charts you can use.  Choose your visualization type, double click diferent parts of the interface to edit them, and copy and paste your data in. If you have trouble copying data from a web site, try starting from a summary sheet you make in Excel.

Click “Share” and copy the iFrame code at the bottom to embed into the blog. If you find that your chart is too wide for the blog post, you have two choices.  You can manually change the width and height variables in the HTML code you copied, being very careful not to change anything other than those numbers, or you can try the “responsive” code which will make your chart shrink or stretch based on the width of the page where it’s embedded. The second option is good if you think your chart will be viewed by people on mobile devices, but be sure to test it out from a mobile device to be sure.

Here’s an example of a chart I made in Infogr.am using data from a previous exercise.

Cardiac Deaths in Central New York Hospitals in 2010 | Create infographics

 

 

 

2) Easel.ly (http://easel.ly)

Think of Easel.ly as a quick infographic creator. You find a template you like, then start to manually edit it and add graphics from a built-in library. Charts can also be added and edited as spreadsheets, similar to Infogr.am.

 

3) Google Fusion Tables (http://fusiontables.google.com)

Google Fusion Tables  turns columns and rows of numbers in spreadsheets into visualizations. Once signed in, import a spreadsheet in .xls or .csv formats (not not .xlsx, which is Microsoft’s proprietary format). Make sure your spreadsheet has column headers, or it won’t work.

Sometimes Google will add a tab that it calls a “card” that is the best choice for your data — for example, a “Map of latitude” will appear if your data includes geocoordinates. If you see a card that works for you click it and see how it appears. If not, click the + sign to the right of that tab and choose Add a Chart. Click Done when your chart is set up the way you want it.

To publish your chart, you have to do two things:

1. Click the Share button at the very upper right of the browser, then “Change” next to Private under “Who can Access.” Select “Public on the Web” and then Save and Done.

2. Go to the Tools menu and choose Publish. You will see iframe tags here that you can embed in your blog post.

Here’s an example of a chart from Google Fusion Tables:

 

4) StoryMap (https://storymap.knightlab.com/)

From the Knight Lab at Medill, StoryMap lets you tell a story that’s broken up by points on a map. You can also use it to tell a story that moves across something that isn’t a map at all, such as a very detailed painting. Think of it like a timeline that takes place on a gigantic picture.

 

5) Google Maps (http://maps.google.com)

Quick overview of how Google Maps work if you don’t know already. Sign into Google, then choose the three lines at upper left and choose Your Places. Click Maps, then Create a Map. To embed it, you must first click the Share button in edit mode and change the access to “Public on the Web.” Then you can choose Embed.

 

6) CartoDB – Prepare for Thursday (http://cartodb.com)

On Thursday we will crack open CartoDB, which is a powerful mapping service that lets you tweak some of the interface and mess with a code a little. You can think of it as the gateway drug to other dataviz tools we will use that do require you to mess around with code. You can get a head start on how to use CartoDB through these free video tutorials on their web site.

Today I will show how we can create a map of the bridges in New York State that are in need of repair.