565 Matching Annotations
  1. May 2019
    1. Make the chart larger, align it with the edge of the infographic, and add some brief explanatory text to the side. Is this adjusted for inflation? You need to mention that. The chart also needs a Y axis. And users will wonder why you stopped at 1985. There is probably an interesting trend to show in recent years: revenue has increased but so has overhead, so profit margins may be less than before. Add more recent movies to the chart; you should have the data.

    2. rials to go home.

      awkward phrasing. And the sentence about the second Indiana Jones movie is confusing. I think you mean that the second one didn't reach blockbuster status because audiences found it too gory, but the franchise bounced back with the Last Crusade.

    3. Summer Block


    4. Guaridans of the Galaxy

      Why is all of the Guardians text italicized?

    5. Anothe

      Broken image link (403 error). Try re-uploading the image to your server. If that doesn't work, go through these steps: https://www.hostinger.com/tutorials/what-is-403-forbidden-error-and-how-to-fix-it

    6. If you're going to remove the Iron Man modal window, remove the target area in the code, too.

    7. his role as the web-slinging w

      web-slinging hero?

    8. Jaws

      Quote marks

    9. V-A

      Need a space here. It looks like IV-A (or 'four A).

    10. X

      Move the close button to the top right and use an icon. This looks a bit unfinished.

    11. Great White Shark t


    12. V commercials and movie trailers accredit a large portion of Jaws’ success

      I'm not sure what you're trying to say here. They account for a large portion of the succes?

    13. I love the visual design. It looks like a move poster, and that's the perfect way to illustrate this story.

    1. 1950s.

      Isn't this supposed to be a photo from the 1940s?

    2. heer dress.

      I think she's wearing pants, no?

    3. hese women are seen wea

      Change the width and height of the image to preserve the correct aspect ratio

    4. Technology was evolving as the Industrial Age kicked into high gear and this was a time of

      Left-align the text and reduce the line height

    5. US Annual Expenditures Entering the 20th Century

      What's the story in this data? The cost of apparel fluctuated while other goods showed clear upward or downward trends? If so, a line chart would be a better choice to tell that story. And since your overall story is about fashion trends -- not the cost of apparel -- perhaps a chart showing sales of various iconic styles of clothing over time, e.g., high heels, blue jeans, etc.

    6. Ashley, I like the overall look of this app; the background photo is great. But users may miss the content below the viewport. I would try putting the timeline vertically and to the left or right, with transparent background and a different color text. And incorporate the chart into the timeline, so it's not sitting on the page over the photo on page load.

    7. Women's

      Consider using a different color for the title to make it pop against the sepia photo.

    8. Here's

      Here are

    9. Although fashion trends and styles seem to rotate in and out as time passes, women's fashion trends developed over the 1900s with reason

      This phrasing is awkward.

  2. Apr 2019
    1. weighted vest

      Wow. This is your lede. "Imagine doing 32 box jumps per minute for 20 minutes. With a weighted vest. Now do that twice a day, six days a week. Welcome to collegiate rowing."

    2. rage VO2 Max Scores for Coll

      Center the chart and make it larger so the labels aren't scrunched. You need a label on the Y axis and units for the numbers in the tooltips. Even with the detailed explanation, this chart will still confuse some viewers. I would include the average VO2 max for a non-athlete in the data, for comparison; then we'd really see how much fitter rowers are than the typical student.

    3. line first.

      How do you decide who gets to be the coxswain? Do you rotate that position?

    4. ingle word post-burst


    5. rowers

      at UNC

    6. Monday mornings practice ta

      Add a blur filter to the background and/or darken it when the modal windows open.

    7. Lydia, I love the way you organized this topic as a to-do list. But the piece needs a stronger visual. Consider using a background photo or video. I'm sure you can find a great photo of a boat on the water, with enough clean space (sky, water) to lay the text and to-do list on top.

    8. m


    9. pre-hab

      What's pre-hab? Define unfamiliar terms on first use (AP style).

    10. ollegiate athletes

      Cut the intro text in half and put some of the details inside the relevant modal windows.

  3. www.natalie-huggins.com www.natalie-huggins.com
    1. close

      The close buttons look dated and out-of-place with the rest of the design. You can customize the default HTML buttons, or just use text or an icon.

    2. Natalie, This looks cool and the illustrations must have taken a long time. You're a good digital artist.

    3. TVNews WebsiteRadioSocial MediaPrintNewspaper18-2930-4950-6465+020406080100Age RangePercentage of each age group who often getnews on each platform

      Your data viz is essentially a republishing of the same chart in the Pew article. I was hoping you would try to build an original data visualization for this story.

    4. News Sources for Americans

      What year does the data represent? 2017? You need to mention that in Y axis label or chart title.

    5. the primary way that America’s younger generation consumes media and receives news.

      You seem to contradict this statement with the Pew data in the next sentence. 36 percent is not even a majority, let alone a high enough number to suggest that it's the 'primary way' younger generations consume news. After looking at the chart, I understand what you're trying to say -- younger generations use social media as their news source more than any other platform -- but the way that you've phrased it here makes the 36 percent sound like a contradiction.

    6. early 1980s

      technically, it was invented in 1969

    7. s


    8. s


    9. 1926, Th

      In 1926, the... The copy in this entire section needs polishing. I know the written content wasn't the focus on this class, but for the purposes of your portfolio, keep working on it.

    10. s


    11. apart of this time

      I'm not sure what you're trying to say in this phrase.

    12. -f

      add space between the dash and the word next to it

    13. Common Sense

      Put in quotes

    14. he merchant class,

      None of the other classes read the paper?

    15. uring the time in print

      This phrasing is awkward.

    16. ted Re

      circulated throughout Renaissance Europe?

    17. Our journey begins with Gutenberg's printing press which ultimately enabled print journalism, and ends in a funny place we call 'social media' (what's that?). I humbly present this little self-aware interactive media project.

      Cut this from the intro and put the info in the timeline sections. Remember: keep the copy short online.

    1. Sources

      Keep working on the position and design of the sources window. It looks a bit rough right now.

    2. Safa, This is an important and eye-opening story, and as usual, your writing is great. Keep working on the layout. Consider moving the intro text to the top, laying the timeline vertically on the left or right side of the main photo, and changing out the photo on click. That would keep everything together on the screen and keep the audience more engaged.

    3. Dalit population concentrated in a few states.

      A heat map would be a better fit for this data, so users who are unfamiliar with these states can see where they are in India. Try Google GeoCharts.

    4. Home × There are 165 million Dalits in India, making up about 1/6th of the total population. The majority of them live in poverty and own no land, forced to live in places like Dharavi - a neighborhood of Mumbai that’s known as the largest slum in Asia. Dalit homes across India are generally cramped, dark, and susceptible to becoming muddy and flooded when it rains. Image credit: A. Savin (Wikimedia Commons - WikiPhotoSpace) Family × Due to systematic discrimination, the majority of Dalit families have struggled with poverty, hunger, and debt for generations. Less than 10% of them have access to clean water and electricity. Religion differs from family to family - while many Dalits are Hindu, others have protested their treatment under the caste system by converting to Islam, Christianity, Buddhism, or Sikhism. Image credit: Marcus Perkins Work × While some Dalits have been able to escape poverty and secure well-paying jobs, the majority of them do the “dirty” work that higher castes refuse to touch. This includes leatherworking, scavenging, sweeping waste off the streets, cleaning and disposing of dead cows, and trash disposal. Even though caste discrimination is illegal, in many regions, Dalits are barred from seeking higher-paying forms of work by local employers. Image credit: Marcus Perkins School × Dalit children face major barriers to education. Some are turned away from certain schools due to their caste. Others are allowed to enroll, but are forced to eat separately from their fellow classmates and sit at the back of their classrooms. One study, conducted in the state of Madhya Pradesh, found that 46% of Dalit students are afraid to ask their teachers a question, and 55% of Dalit families say that their children aren’t able to study properly in the face of blatant discrimination. Image credit: Marcus Perkins Barriers × Despite being illegal in India, caste discrimination takes an almost apartheid form all over India. In rural areas especially, Dalits are forbidden from using community water pumps or entering temples. They are routinely denied services at barbershops, restaurants, and schools. Casteist people often refuse to touch anything a Dalit has touched, whether it’s a teacup or a handful of rupees, claiming it has been “polluted.” In some areas, like the village of Thati near New Delhi, Dalits must show upper-caste people respect by not even looking them in the eye. Image credit: BBC Grief × Hate crime against Dalits are common, even though they’re not regularly charged as such. In 2016 alone, over 40,000 anti-Dalit crimes were reported. Beatings, scalpings, whippings, humiliation, torture, disfiguration, gender violence, and murders are all distressingly common. A man in Delhi was scalped for wearing a turban, which is typically only worn by upper-caste Hindus; another man in Gujurat was killed for riding a horse, also an upper-caste privilege. Often, however, police declare these crimes as personal disputes or accidents, reinforcing the systems of structural violence against Dalits. Image credit: Marcus Perkins

      The word 'Home' is confusing because users will think it pertains to the home page of the app, not housing. Regarding the scalping and horse riding, how did the attackers know the men were Dalits? (human depravity knows no bounds...)

    5. Safa, You're getting 403 permission errors on your images. Try the fixes listed in this article: https://www.hostinger.com/tutorials/what-is-403-forbidden-error-and-how-to-fix-it

    6. In

      Consider using a drop cap on the first letter (I) and wrap the rest of the intro text around it, to give the story a magazine style.

    7. Untouchable.

      This title, 'Untouchable,' is a bit confusing. To many readers who are unfamiliar with the Dalits, the word 'untouchable' connotes a hyper-elitist mindset, e.g., the 'untouchables' are those so privileged that they're above society's rules. Quite the opposite of the Dalits.

    8. pottery below the feet of the world.

      Great phrase

    9. varna system

      Interesting. This is eerily similar to the stratified society laid out in Plato's Republic.

    10. Brahmins

      Users will expect the red text to link to external articles.

    11. Untouchable

      Keep experimenting with the visual design of your title section. It seems a bit drab or 'corporate' for such an important story with such a strong title.

    1. Garrett, this looks good and everything works, but you need to consider your audience in a story like this. See my annotations for more details about the writing style. There are myriad ways you can explain this research with interactive elements. You're a good programmer. Keep experimenting.

    2. is

      What hypothesis?

    3. Cont

      The legend is cut off in the chart. Make sure you fix this before you put it in your portfolio. It's always important, but especially for a story like this.

    4. attling Breast Cancer B-Cells: Improving Prognosis via Immunotherapy

      Garrett, You must consider your audience for a story like this. A general audience won't be familiar with the terms (B-cell, mRNA sequencing, etc.) and therefore won't really engage with the story. If you want a general audience, you need to write this like an article for the health section of a national publication. Define unfamiliar terms, explain procedures in a way that laymen will understand. Dr. Tom Linden teaches Medical and Science Journalism at UNC and is a great resource if you want to learn more. Here's one of his books: [https://www.amazon.com/New-York-Times-Reader-Timescollege/dp/1604264829] If your audience is scientists, then you can keep your copy the way it is, but consider a different visual approach. The illustrations might not fit the vibe of a scientific journal. I would focus on data visualization.

    5. taking this reality unrecognized

      This phrasing is awkward.

    6. UNC's

      University of North Carolina at Chapel Hill (AP style)

    1. Grant, This is a great story; interesting and important. The tomato graphics, however, don't convey the information as well as they could -- especially since the same carousel is repeated on each tomato -- and the style doesn't quite fit the tone of the piece. Since food waste is at heart a data story, I would put the chart front and center. The chart is the eye-opener. Then use the tooltips in the chart as the modal windows. Users can explore the food waste journey by clicking on each color band in the chart. Google Chart tooltips can include anything you want, e.g., photos, sliders, custom text, etc.: (https://developers.google.com/chart/interactive/docs/customizing_tooltip_content)

    2. processing centers

      Watch the typos

    1. Other films to hit $1 billion: Transformers: Dark of the Moon - $1,123,794,079 Pirates of the Caribbean: On Stranger Tides - $

      Remove the bullet points on your list items.

    2. Dominck, this is an interesting, well-written piece, and you did a good job on the timeline. You just need to rework the layout and polish the visual design. I would put the timeline to the right and the modal windows on the left, in the same spot as the header photo and intro text. That way everything stays in the same screen; just swap the photo and text on each click.

    3. The Rise of

      Keep experimenting with the font and layout. The design feels a bit dated and unprofessional. I like the marquee idea (and nice effort on it), but it needs polishing. If you can get a higher res photo and fix the alignment of your custom lettering on the sign, then make the image bigger and let the lettering be the title for the story; you don't need it twice. I would also make your logo much smaller and move it to the top left corner. Remember the rules of visual hierarchy. Right now, it looks like the title of the story.

    4. In September 2008, the Dow Jones Industrial Average plummeted 777.68 points, the largest single-day point drop in history, and causing one of the worst recessions in American history. Prior to this catastrophic crash, only four films had ever grossed over $1

      Left-align the text

    1. Ally, this is a great start, you just have some glitches and other things that need polishing. Fix the size, background, and position of the modal windows so users can easily read the text. I like the background image, and I like the illustration of the body, but I'm not sure they work well together. I'd consider a more minimalist design that focuses on the body illustration.

    2. he Top Five Global Diseases

      This title is vague and misleading. Your story is about the top five causes of death, not 'global diseases.' The top five most prevalent diseases may include ones that don't kill people, and the phrasing, 'global diseases,' implies that you're talking about diseases that exist worldwide; I think you mean 'top five causes of death, worldwide.'

    3. shallow breathing

      Your list font should be the same size and family as the rest of the text in the window.

    4. no

      not smoking

    5. The chart has problems, but you should be able to fix them easily. The title is vague and irrelevant to the data. The legend is missing the yellow, green and purple categories. The lines need tooltips to show the actual numbers on hover.

    6. alcohol, and regular exercise

      You need to change the background color on the modal window so the text doesn't compete with the chart below it. And I would move the window to the center of the screen.

    7. Strokes

      The slideshow nav doesn't work.

  4. www.theguterblog.com www.theguterblog.com
    1. Click to see sources

      Keep working on the design of the sources window; move the close button, center the text, etc. And add target=_blank so the sources open in new windows and users don't have to start back at the top of the piece.

    2. eslie Jones and Sasheer Zamata join the cast at the same time—an SNL milestone. This came after Keenan Thompson announced he'd no longer perform in drag until SNL hired two black female cast members. Zamata left the show in 2017, but Jones is still on. Rating: 8.1 Kate Mckinnon Kate McKinnon wins the Emmy for Outstanding Supporting Actress in a Comedy Series for the second time. She's the only woman in SNL history to win twice in a row. Rating: 8.0 Tiffany Haddish Please welcome your first black female stand-up host, Tiffany Haddish. It's crazy that it took this long. Rating: 6.5 + - Amy Poehler's Ratings as a Repertory Cast Member

      This bleeds past the div; you need to fix the size of the div or add overflow-y: scroll. And some of the years in the left column bleed into the left-hand content section.

    3. repertory player

      You need to define this unfamiliar term for your audience. What's the difference between a rep player and featured cast member?

    4. Amy Poehler's Ratings as a Repertory Cast Member

      I know you really struggled with the chart and ran out of time to make ones for the other comediennes. But if you're only going to include the Amy Poehler chart, don't show it until users click on her section of the timeline. It's confusing otherwise.

    5. Candice Bergen

      What's the 'rating' below Candice Bergen's bio?

    6. 1975

      You should start the content with the first year in the timeline (1975, Gilda Radner).

    7. Maia, This looks great, but the HTML video file is large and that really slows down the app, even on desktop; it took almost 20 seconds to load on my 2017 MacBook Pro. Try using the Adobe Media Encoder to shrink the mp4 size.

    1. Matt, This is fantastic. It's an interesting story and you told it with tasteful interactivity and great visual design.

    2. This is a great use of data vis to enhance a story. Well done.

    3. have been on the rise


    4. He is said to have come from the virtuoso and technical phase of guitaris

      This is awkwardly phrased.

    5. d of the g

      typo: one of the greatest...


      The 'next' button is an upside down 'previous.'

    7. tart Me Up b

      Great choice to demonstrate the Telecaster sound.

    8. simple operation

      how so? what makes other guitars more complicated?

    9. archtop

      Define an unfamiliar term on first use (AP style).

    10. Les Paul was crucial in the development of electric guitars.

      You could do a separate piece on Les Paul...

    1. PESO:

      Nice job with the HTML5 audio player, but the audio controls don't really fit your style. You could easily trigger the audio with the slider arrows so it plays automatically on each slide, and then add simple mute/stop/play buttons on the screen.

    2. The yellow bitmap text looks cool, but it's hard on the eyes with the snow TV background, especially by the last few slides. Good writing though. Clear and strong. Is the TV set a crucial element of the A$AP Mob story? If not, ask yourself if it's the best design choice.

    3. A$AP Album Sales Reinforce Rocky's Lead Role in the Mob

      Need to align the chart with the text. And make the chart larger so you can add a legend showing which rapper/group is represented by each color.

    4. theguardian.com - A$AP Rocky Interview

      Add target_blank so the links open in new windows and you can go back to the Sources page without clicking through the whole slider again.

    5. death of A$AP Yams,

      What happened to Yams? Many people in your audience won't know.

    6. Always Strive and Prosper.”

      I did not know that. You learn something every day.

    1. ned the king of France at Notre Dame Cathedral in Paris in 1431. Photograph: Getty Images

      It's hard to judge the rest of the visual design of your app because the slider is broken.

    2. Notre Dame is one of the world's most famous cathedrals. It is visited thousands of times a year from people all over the world, and serves as one of France's major symbols. Recently, a fire destroyed two-thirds of its ceiling, leaving people all over the world in shock. Taking over 200 years to build and falling through cycles of disrepair, Notre Dame has seen everything from coronations to beheadings. This timeline shows a few of Notre Dame's most famous moments in it's hundreds of years of history.

      This text is too small and is surrounded by too much negative space. I would keep trying other fonts.

    3. Aubrey, this is a good start, but as you probably know, it's broken. The first five slides appear statically on the page, outside of the slider, and the sources modal window doesn't work. It looks like you pasted code from W3 Schools for the slider. The problem with pasting wholesale is that you won't understand the code enough to fix it when it breaks. Let me know if you want help. If you fix this, you'll have a solid piece for your portfolio.

    4. The Disasters Notre Dame Survived

      Remember my warning about small sample sizes in data visualization. This is interesting, but it's not the sort of data that warrants a chart; in fact, it's rather odd, since it's just three small numbers (1, 2 and 2) with no reason to compare why one is greater than another. And readers will want to know more, e.g., what wars did Notre Dame survive? I'm sure are other datasets you can find to tell an accurate and noteworthy story about Notre Dame cathedral.

    1. Vennela, This is impressive. It looks great, everything works, it's well-researched, and it's an important story. Great job.

    2. Sources

      Move the close button to the top right or top left in the sources modal.

    3. NGO

      Use the full name on first instance.

    4. he map below

      This map is great. It could use a little more contrast so the disparity between nations is clearer, though, and try to write some logic into the chart code so that abbreviated nations, e.g., SS, are listed out in full.

    5. UNHCR.

      Use the full name, not the acronym, on first instance (AP style).

    1. Number of Championships since Kobe entered th

      This chart needs labels on the Y axis so the audience can quickly see the remarkable story in the data: that Kobe has more rings than most other teams. Without labels, the chart is confusing.

    2. Sources

      Your sources need to be links to the sites.

    3. and

      cut this word

    4. Darryl, this looks great. I love the color filter effect on the iso photos. Watch your contrast, though. Some of the text is hard to read because it competes too much with the background images. Also, you need to add a close button on the modal windows, however. It's not as user friendly as it could be.

    5. o


    6. Although Kobe's career did not jump start, he quickly found success in the NBA.

      This is awkward phrasing.

  5. Dec 2018
    1. Franklin Street Restaurant Openings Over Time

      Again, this isn't showing up live but it works on the local server. I think it's because of the URL path (./js/restaurants.json). Also, the tooltip isn't working in the stretch from 1935 to 1970. I'm sure some restaurants opened during that time. If you don't have the data from those years, you need to mention it in your piece. If you do have it, you need to represent it in your chart.

    2. Year Opened 1922 2018

      This isn't showing up live, only on a local server. Hmmm.

    3. This map is fantastic and really useful, even without the color-coded markers (they aren't showing up in the live site, only on a local server). I'll probably use this map myself when I'm in the mood for a certain kind of cuisine and want to see what's available.

    4. 38 new restaurants in 2018,


    5. retention rate of 75.6 percent

      How does this compare to other well-known areas, like Bourbon Street? A comparison would add a lot to the story if you can get the data.

    6. subzone

      This is an odd and unfamiliar term to your readers. Aren't the areas surrounding Franklin -- e.g., Rosemary, Weaver -- extensions of the core Franklin zone? A subzone would be a smaller area within the larger Franklin zone.

    7. The header looks great.

    1. Increasing Diversity

      This chart is okay, but it doesn't tell the story quite as effectively as it should; the story being that whites are only group whose percentage decreased from 2000 to 2010. To show that in a more striking way, consider a toggle bar chart that shows only the 2000 bars at first, with radio button for 2000 and 2010. When users click the 2010 button, the chart data updates and all of the bars would get longer, except for the whites.

    2. Population Distributions by Race

      Great job on these maps. A few things: first, put the map for the earlier year (2000) on the left; most users will read left to right and expect chronological order. This will also make it consistent with the order in the bar charts, below.

      Also, you need to add brief text explaining this section and inviting users to explore it, especially with the News API feed below the maps. Something like, 'Between 2000 and 2010, some racial groups moved in large numbers; others largely stayed put. Choose a group from the list below to see the shifts and current headlines related to those demographics.'

    3. above

      the graphic is to the left on desktop

    4. #1 Most Commonly Used Language: 231,122,908 Speak only English at home #2 Most Commonly Used Language:37,458,470 Speak Spanish at home

      I know you excluded the bars for English and Spanish because they extended too far in the viewport, but you really need to include them. Try other charting libraries that let you set the domain and range of the X axis. That should scale the width so it reflects the data but stays within the div.

    5. A Portrait of the American 'Melting Pot'

      The header looks great. Nice work.

    1. "Today humani

      I love this section. And you built the rotating Earth with an API. Nice.

    2. Sources

      You don't need a separate Sources section if you link to everything in the article text and chart captions.

    3. y index of cities,

      What cities? It's fine that the map is in Chinese -- if your intended audience is Chinese -- but you need to include a translated version for other audiences. Most English-speaking users, for example, won't know what geographic area they're looking at. You might be able to get the user's location from their IP address and pass it into the API as the center of the map.

      I would also make this a title, not a caption. Users need to see it immediately and clearly. Finally, the map is much more effective if you zoom it out to show the entire world. That really tells a story about air quality.

    4. This table defines the Air Quality Index scale as defined by the US-EPA 2016 standard

      Show the index scale in a map legend, not a link. Users need to be able to quickly understand the map markers without going to an external site. And wow, this data is disturbing. Good map in that respect.

    5. Global GDP is 20 times higher than it was in 1900, having grown at a rate of 2.7% per annum; CO2 emissions have grown at an annual rate of 3.5% since 1900, reaching an all-time high of 100 million metric tons of carbon in 2001; and the ecological footprint, a composite measure of consumption measured in hectares of biologically productive land, grew from 4.5 to 14.1 billion hectares between 1961 and 2003, and it is now 25% more than Earth’s “biocapacity”

      Show these numbers in a chart! Take advantage of the interactive digital medium: a picture is worth a thousand words.

    6. City Folk Consume Less

      Make this bolder to match the other section titles, and make the cards the same size. Remember, consistency is key.

    7. Urbanization

      What's the source for your audio? You need to mention that this is from a podcast, etc.

    8. Population and the Environment

      I love the header image and title. I would use a sans serif font through the site to keep up the modern, urban style.

    9. h 9.2 billion by 2050.

      Your source says 9.7 billion by 2050, not 9.2. And add target=_blank to your external links so they open in a new window and users don't have to hit the back button.

    10. distribution a

      This link is jarring and confusing for users, because it just sends them down about 200px to the next area, but it looks like a new page. Add scroll-behavior: smooth; to the links.

    11. that population growth will eventually cause an environmental catastrophe

      In fact, the worry dates back to 1798 and Thomas Malthus, who famously predicted that population would eventually outgrow resources.

    12. seven billion three hundred million bodie

      Wait, where does the number 7.3 billion come from? You said we're already at 7.6, and by 2050, it will have increased by 2.4. ??

    1. Glendale, Arizona, East Rutherford,

      Glendale and East Rutherford are suburbs of Phoenix and NYC. I would just list the stops with the names of major cities, like Atlanta, Chicago, etc.

    2. So, what is the deal with the "snake" theme?

      This is fun, but users may miss it because there's no cue that the answer is available on click, and it's broken on mobile (both sides are showing on top of each other).

    3. The Tour Venues Across America

      The map is broken. Error: initMap is not a function. There are several possible reasons for this and several possible solutions. . It's working on my iPhone in Chrome, so no biggie, but try to fix it before you put this in your portfolio.

    4. video below for

      Why is the height so narrow on the video player? You need to maintain the aspect ratio of the video and use your viewport effectively. There's too much empty space below the video.

    5. ...Ready For It?

      This link is broken.

    6. The reputation Lyrics

      This MusixMatch API isn't really doing much for your story, especially since each song title is just a link to an external website. That makes the section just feel like a list of HTML links, not something built with JS and APIs. If you can't build something that displays inside your app with the MusixMatch JSON (or provides data that you can use to build a chart, etc.), then choose another API.

    7. https://www.forbes.com/sites/brittanyhodak/2018/11/30/taylor-swift-breaks-u-s-record-with-reputation-stadium-tour/#44cb6adf348e https://variety.com/2018/music/reviews/concert-review-taylor-swift-soars-at-reputation-tours-dublin-date-1202848882//li> https://en.wikipedia.org/wiki/Taylor_Swift%27s_Reputation_Stadium_Tour https://www.billboard.com/articles/columns/chart-beat/8039679/taylor-swift-reputation-debuts-no-1-billboard-200-albums https://www.spin.com/2018/05/taylor-swift-snake-kim-kardashian-reputation-tour-opener-video/ https://www.rollingstone.com/music/music-live-reviews/why-taylor-swifts-reputation-tour-is-her-finest-yet-628294/ https://hellogiggles.com/reviews-coverage/taylor-swift-reputation-tour-review/ https://www.theguardian.com/music/2018/oct/20/taylor-swift-review-tour-shows-a-star-and-reputation-still-in-ascendance https://www.washingtonpost.com/lifestyle/style/step-inside-the-taylor-swift-biodome/2018/07/11/d87ecfd0-8516-11e8-8553-a3ce89036c78_story.html?utm_term=.738f843f710e

      This text is way too small, and they should be links to the sources, not just text. You don't need a modal window. Just put links to your sources in keywords in the article; that's the standard now for most publications. If you want a modal window for the sources, keep working on the design. This looks a bit unprofessional.

    8. highest-grossing in American history

      you need to cite a source for this

    9. An insider look into the Reputation Staidum Tour

      I would try a thinner font for the subhead.

    10. The rise of the snake

      The header background image is broken because of a bad URL path. It should be ../img/mypic.jpg

    11. 26 cities.38 shows.

      Nice job with the typewriter effect, but it would be a lot more effective without the white background.

    1. Overall, this looks great, but it feels like the start to something robust, not the finish. I think there's more you can do to make the story interactive, immersive and user-friendly. I know you're capable of it. Keep fleshing this out (adding markers, maybe ones that appear on a dropdown menu selection, etc.), and reworking the layout.

    2. Downtown Raleigh, NC

      There are more universities in the Triangle than just UNC, Duke and NCSU, for example, NC Central University, an historically African-American college in Durham, and Meredith College in Raleigh. Make sure you include all of them, otherwise it won't be an accurate comparison between cities.

      Also, experiment with the Google Maps styling options to make the markers stand out more against the surrounding area.

    3. Keep up with the latest Amazon news here:

      This is broken, argh.

    4. no money was spent in the campaign

      I find that hard to believe. I'm sure they paid some people to help out with the campaign. You need to cite your source if this is true.

    5. D.C.


    6. National Landing, Arlington, VA

      Your Terp audience will be upset to find the University of Maryland missing from this map.

    7. Score out of 100. Data from Walk Score

      You should also add an info cue next to each score, with tooltips explaining how the scores were calculated. Readers will be unfamiliar with these metrics. I like the icons.

    8. Given that you're comparing these three cities, your audience will want to be able to do that, visually, in a single screen. I would redo the layout so all three are in the viewport at once, and change the cards (tax incentives, housing costs, etc.) into charts comparing the numbers for each city.

    9. Long Island City, New York, NY

      Again, there are a lot more colleges in NYC than these three.

    10. As I've said, this is a great idea for a story.

    11. (Business Insider)

      Just put this link on one of keywords in the sentence.

    1. Click each icon to find out how!

      Again, I like this, but it's glitchy and essentially unusable on mobile. Hover events tend to be that way.

      Great illustrations, though.

    2. About A National Crisis Visit Inspiration Benefit A Park

      Your hamburger menu is broken and/or unfinished.

    3. Nice job with the Google Books API, but it feels a bit arbitrary, like you just threw it in to meet the requirements (and you had already met the three-API/chart quota, by the way). It doesn't add a lot of value. I've never used that API, so I don't know what's available in it (I was excited to see students using it, but I've been underwhelmed by the results from the API). If this is all you can do, I would get rid of it. Users might also get stuck in the book viewer, trying to scroll back to the top of the site.

    4. Search for

      You should have the Flickr photos change to match the chosen park in the search section.

    5. Total Yearly

      Great job on the chart

    6. ess to the 1%, disadvantaging millions.

      Great point.

    7. A Brief History

      I like the timeline, but it's glitchy. You need to fix the mouseover code so the previous modal text disappears when users hover over the next dot.

      And I think the timeline would be more immersive and effective if you used a vertical alignment and included photos with the modal text.

    8. for them.

      There's too much negative space below this on desktop.

    9. instated in office

      this phrase is awkward. Perhaps, 'since being elected...'

    10. Are the last living vestiges of America's once vibrant wildlife. Started in 1872, the n

      Left-align your copy. That's the standard in most publications now.

    11. verybody needs beauty as well as bread, places to play in and pray in, where nature may heal and give strength to body and soul alike. Keep close to Nature's heart and break clear away once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. - John Muir

      The header looks fantastic, but the section immediately below is a let-down, visually speaking. It looks a bit too sparse and dated (and perhaps unfinished); it needs to keep up the style that you established in the header. The quote is great. It begs for a punchy pull-quote design, maybe with a slight parallax.

      I'm not crazy about the speckled blue background in the search section, either. Keep experimenting.

    1. bleaching. Cont

      Nice YT video. You need to add/fix code so the video pauses or stops when users close the modal, though. The audio keeps playing in the background. You have .pauseVideo in player2, but it's not working.

    2. Coral in North Carolina?

      The map isn't showing up sometimes in the live site, error: initMap is not a function. There are several things that could be causing this, and several solutions. Try declaring the initMap function in the head of your HTML. I've heard that often fixes the intermittent fail problem.

      Also, I think you said you were planning to make info windows for each the coral icons. Definitely do that; users will expect it.

    3. What's the big deal about Coral?

      Users will expect the coral logo in the top left corner to be a link. Go ahead and make it the home button. Make your navbar sticky (that will also give users a way to easily go back up from the bottom, especially on mobile) and use the coral illustration as Home.

      Your nav is too jumpy; add scroll-behavior: smooth. Also, keep working on the layout of your Sources window.

    4. Search a location, coral type or other keyword

      Nice feature here. It's a little glitchy, though. If you just click search without entering a query, it loads the first four results from the overall data (I think). Instead, you should show a message (e.g., 'please enter a query') when this happens. And use a suggested keyword as a placeholder in the search box to help users (e.g., placeholder="Chile").

      Since the cards are different sizes depending on the length of the content, you might want to use a masonry plugin on the results. Some of the descriptions bleed beyond the cards, too. Just need to keep tweaking it.

      As you continue to develop this, consider using a map for the location-based results and adding a dropdown for coral type options.

    5. While coral reefs take up only 1% of the world's ocean space, they contain over 25% of the ocean's species. And, they're dis

      Left-align your copy. That's standard for most publications now.

    6. ger


    7. ungi and B


    8. is


    9. Calcium Carb


    10. Carbon Dioxid


    11. heterotrophy,

      What is heterotrophy, the act of bringing the food into their mouths? Define unfamiliar terms for your audience

    12. sea anemone

      A tooltip with photos comparing a polyp and an anemone would be nice here.

    13. C

      lower case on coral, or uppercase on everything in the section title

    14. Here’s why,

      This phrase is a bit awkward. Here's why they already knew that?

    15. d, t

      no comma needed

    16. In class, you said that you aimed this piece at a younger audience; I can see that. The visual scheme would appeal to young schoolchildren. You may want to add an About modal that explains the purpose and intended audience for the project (e.g., it was a UNC assignment, geared toward children).

    1. e c

      hyphen (game-changer).

      And you're clearly a Gaga fan -- as well you should be -- but this story reads like a PR piece. I'm a fan myself, but statements like, 'her music has been considered a game-changer' are matters of opinion. You need reputable sources for an opinion like this (e.g., music legends and most critics have said she is a seminal musician). It will lend it journalistic credibility.

    2. I love the background photo, but on mobile, you need to resize and recenter it. It just shows up as a blue rectangle on a phone.

    3. ht La

      brought in

    4. n 1976, Barbara Streisand and Kris Kristofferson.

      Barbra Streisand and Kris Kristofferson took the lead roles in 1976.

    5. ady Gaga's debut film, Gaga

      In her debut film, Gaga stars as...

    6. country music-inspired,

      inspired by country music and includes the ballad, 'A Million Reasons.'

    7. ideo icons t

      You need to add some code to the YT players so they pause or stop when users click on the next section in the timeline. Right now, the audio keeps playing in the background.

      Also, the controls below the timeline are too hard to see. Make them more prominent and add a swiping feature, if possible. There's also a glitch keeping the timeline from returning to the beginning after you click to the end and try to go back. It cuts off the first few boxes.

    1. emapping Asian American History

      Nice job with the Google Books API, but it's inclusion feels somewhat arbitrary, as if you threw it in to meet the requirements. And the book canvas areas are too small to make the text inside readable. If you zoom in, the text goes beyond the edge of the canvas.

      The API is glitchy, too. Sometimes it doesn't load. Keep working on it or come up with another option for this section. There are a lot of things you can do with your JS and API knowledge. I know the deadline was tight, but take your time after the semester and get this right. You're too talented not to.

    2. Nice job on the mega menu code. You might want to stack the subnav items vertically, or add piping between the titles if you keep them horizontal. And the some of the category links (home, education, gov) go to your portfolio site, not the relevant sections of this story. This is a big problem when users go to one of the article pages and then try to click back to the main section (e.g., after reading an education article, they click the Education menu item or Home, to get back to where they were, only to end up at your portfolio). They'll get frustrated and confused. You need to fix this before putting it in your portfolio.

    3. Citizenship & Immigration

      The second and third links in this section take you back up to the top, instead of showing the 'under construction' message. Users will be confused.