nprapps / dailygraphics Goto Github PK

View Code? Open in Web Editor NEW

292.0 292.0 51.0 24.78 MB

NPR Visuals' rig for deploying daily graphics projects in responsive iframes.

License: MIT License

Python 12.78% HTML 9.76% JavaScript 73.84% Shell 0.13% Less 3.51%

dailygraphics's People

Contributors

Stargazers

Watchers

Forkers

scottpham ejhale insideenergy stlpublicradio lashback motherjones tophtucker wbez eads danilito19 windminer elizalive kamal-hothi benheubl cerealcommas onyxfish azizjiwani wjcjenny abcnews swastvedt thelens bwareham hampelm unamandita joshuarrrr blakebutcher jordanebranch markm92198 wendyhe816 benlk thetylerloop stiles capradio greenpdx kbianews nathanlawrence derekkramer southsideweekly brmayes yuqingliu19 shellyscheng phjudge yutinghcw nabarundg marduklien isabella232 bostonbachexchange

dailygraphics's Issues

Port over static assets workflow from app-template

Should have a way to run data scripts inside graphics folder

Through fab?

Kill reference to copy spreadsheet in the default footnote example

Just causes confusion when you're not starting from the template spreadsheet.

https://github.com/nprapps/dailygraphics/blob/master/new_graphic/child_template.html#L59

Child graphics showing up in Google search results

Do we need the responsiveIframe function call in the embed code?

Update ad tags (DFP)

Change ENVIRONMENT to NPR; change TESTSERVER to false

Do we need Google Analytics and Chartbeat on these?

Since these will be embedded on other pages, are we double-counting?

Google spreadsheet shouldn't be required

Not sure if this is bug or if I'm just doing it wrong.

If I delete graphic_config.py, I get an error when I try to load the page. So even if a particular project doesn't have a google doc, I still need to have to connect to one for things to work.

Redeploy quit_rates

http://www.npr.org/blogs/money/2014/01/22/263504402/millions-of-people-are-quitting-their-jobs-every-month-thats-good-news

Don't want to do it while it's hot, but we should deploy the new version

NB: Will require updating the embed code

Responsive table not working in IE9?

Running into issues with this table:
http://www.npr.org/templates/story/story.php?storyId=297331252&live=1
(slugged table-televangelists in the repo: https://github.com/nprapps/dailygraphics/tree/master/www/graphics/table-televangelists )

Works fine in my IE9 emulator. But Alicia and Ashley report that when they pull it up in IE9 (compatibility mode on by default), nothing shows up. Alicia found that if she disables compatibility mode, the first few lines of the table show up (the default iframe height before resizing?), but nothing else.

Clean: Kill console.log() statements.

Might be causing IE issues?

Automatically generate an index of every graphic, but don't deploy it

Create a view, _index that loops over all the graphics directories and creates an index of them at localhost:8000 so we don't have to remember the slugs

NB: views prefixed with _ don't get deployed.

Prefix messages with something

So we don't accidentally read NPR.org messages

How to handle JS/CSS assets?

Bower? Manually? With hammers?

update_copy: more helpful error message

Possible to remind the user to specify a particular slug?

(dailygraphics)alynpr:dailygraphics ahurt$ fab update_copy
Traceback (most recent call last):
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/main.py", line 717, in main
    *args, **kwargs
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 332, in execute
    results['<local-only>'] = task.run(*args, **new_kwargs)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 112, in run
    return self.wrapped(*args, **kwargs)
TypeError: update_copy() takes exactly 1 argument (0 given)

(I mean, I guess it does with that TypeError, but it's not very user-friendly. Super-low-pri.)

Enable GA and Chartbeat on non-NPR embeds

See what Chris did on Papertrail (https://github.com/nprapps/papertrail). Related to #10

add_graphic disappeared?

Used to be here:

dailygraphics/fabfile.py

Lines 462 to 468 in a251158

    
           App-specific commands 
        
           """ 
        
           def add_graphic(slug): 
        
               with settings(warn_only=True): 
        
                   local('mkdir www/graphics/%s' % slug) 
        
                   local('cp www/child.html www/graphics/%s/child.html' % slug) 
        
                   local('cp -r www/js www/graphics/%s/js' % slug)

Now I get this error when I fab add_graphic:name-of-graphic

(dailygraphics)alynpr:dailygraphics ahurt$ fab add_graphic:table-olympic-diet

Warning: Command(s) not found:
    add_graphic

Available commands:

    branch               Work on any specified branch.
    deploy               Deploy the latest app to S3 and, if configured, to o...
    master               Work on development branch.
    production           Run as though on production.
    render               Render HTML templates and compile assets.
    shiva_the_destroyer  Deletes the app from s3
    stable               Work on stable branch.
    staging              Run as though on staging.
    assets.assets_rm     Remove an asset from s3 and locally
    assets.sync          Intelligently synchronize assets between S3 and loca...
(dailygraphics)alynpr:dailygraphics ahurt$

I see it here, though:

dailygraphics/fabfile/__init__.py

Lines 185 to 191 in 9423375

    
           App-specific commands 
        
           """ 
        
           def add_graphic(slug): 
        
               with settings(warn_only=True): 
        
                   local('mkdir www/graphics/%s' % slug) 
        
                   local('cp www/child.html www/graphics/%s/child.html' % slug) 
        
                   local('cp -r www/js www/graphics/%s/js' % slug)

copytext documents should live in graphics folder, not in dailygraphics data dir

Add hex codes from graphics color palette to default CSS

On render, render parent.html (as index.html) for every slug

This will allow a preview of every project.

New graphic: Copytext spreadsheet not found

Workflow:

Use add_graphic:quiz-economy to create a new graphic
Open the app template copy spreadsheet, saved a new copy (to the shared NPR folder).
Paste new spreadsheet's ID into graphic_config.py
fab update_copy:quiz-economy — error
Publish the spreadsheet, run fab update_copy:quiz-economy again — error.

(dailygraphics)alynpr:dailygraphics ahurt$ fab update_copy:quiz-economy
Traceback (most recent call last):
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/main.py", line 717, in main
    *args, **kwargs
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 332, in execute
    results['<local-only>'] = task.run(*args, **new_kwargs)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 112, in run
    return self.wrapped(*args, **kwargs)
  File "/Users/ahurt/src/dailygraphics/fabfile/__init__.py", line 210, in update_copy
    download_copy(slug)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 109, in __call__
    return self.run(*args, **kwargs)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 112, in run
    return self.wrapped(*args, **kwargs)
  File "/Users/ahurt/src/dailygraphics/fabfile/__init__.py", line 203, in download_copy
    g.get_document()
  File "/Users/ahurt/src/dailygraphics/etc/gdocs.py", line 92, in get_document
    raise KeyError("Error! Your Google Doc does not exist.")
KeyError: 'Error! Your Google Doc does not exist.'

Migrate Pym.js updates into dailygraphics

Add copytext instructions to README

Pull in responsive iframe library

parent.js and child.js as global js

Kill the test rigs

We're unlikely to ever use these for daily projects and I want to simplify the docs

Backport new assets rig from `musicgame`

Supersedes #25. @alykat let's chat before I do this.

Set preview max-width to width of seamus container?

Dailygraphics should have something in the CSS or javascript that automatically blocks in CMS assets so that we preview what the finished product will look like before we build it out.

Upgrade to use separate copytext.py

https://github.com/nprapps/copytext

Add graphic index.html files to .gitignore?

deploy: require a slug? (or strongly suggest it?)

Would prefer users not be able to deploy the whole repo by accident

Easily create fallback images for interactive graphics

Maybe something like:
https://github.com/kevinschaul/depict
(recommended by Tyler)

Won't need it for everything in the dailygraphics rig — probably just the D3 things.

Build copytext rig in for each project

A workbook for each graphic
Some sort of app_config.py equivalent
graphic.html becomes a template

Changes to child.js and parent.js affect every graphic

These should probably be copied for each project or something :/

Consider putting the graphics themselves in a (private) submodule

Because we don't always want these things to be public, especially before launch. Suggested by @brianboyer: http://git-scm.com/book/en/Git-Tools-Submodules

When deploying a single graphic, only render files for that graphic (not the whole repo)

Related to #31

Have assets rig exclude .DS_Store files?

Nothing's broken — it's just annoying.

Kill all in app template that is not used

"Embed this" button for each graphic

Low-pri

When deploying to prod, should we only deploy a single graphic/folder?

If multiple people are working on different graphics (and at different stages of completeness), we might not want to deploy everything. Maybe require a flag for the graphic name?

Can't deploy pre-copytext graphics

Deploy script looking for a Google spreadsheet.

(dailygraphics)alynpr:dailygraphics ahurt$ fab production master deploy:slug=college-funding
You are trying to deploy the 'master' branch to production.
You should really only deploy a stable branch.
Do you know what you're doing? [Not at all] yes
Traceback (most recent call last):
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/main.py", line 717, in main
    *args, **kwargs
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 332, in execute
    results['<local-only>'] = task.run(*args, **new_kwargs)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 112, in run
    return self.wrapped(*args, **kwargs)
  File "/Users/ahurt/src/dailygraphics/fabfile/__init__.py", line 186, in deploy
    render()
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 109, in __call__
    return self.run(*args, **kwargs)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 112, in run
    return self.wrapped(*args, **kwargs)
  File "/Users/ahurt/src/dailygraphics/fabfile/__init__.py", line 84, in render
    _render_iterable(glob('www/graphics/*'))
  File "/Users/ahurt/src/dailygraphics/fabfile/__init__.py", line 115, in _render_iterable
    download_copy(slug)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 109, in __call__
    return self.run(*args, **kwargs)
  File "/Users/ahurt/.virtualenvs/dailygraphics/lib/python2.7/site-packages/fabric/tasks.py", line 112, in run
    return self.wrapped(*args, **kwargs)
  File "/Users/ahurt/src/dailygraphics/fabfile/__init__.py", line 203, in download_copy
    g.get_document()
  File "/Users/ahurt/src/dailygraphics/etc/gdocs.py", line 92, in get_document
    raise KeyError("Error! Your Google Doc does not exist.")
KeyError: 'Error! Your Google Doc does not exist.'

Examples

Can you post some examples of what dailygraphics can build? The wiki here on Github is a good place. There are some good examples listed here https://source.opennews.org/en-US/articles/all-about-dailygraphics/ "We’ve used it for graphs, certainly, but also data tables, before-and-after sliders and small interactives. We’re even building it into a workflow for managing Instagram photo call-outs!"

Jump/anchor links within iframes don't work on iOS

See: nprapps/pym.js#35

Came up when working on mobile view of table-fees-by-state:
http://localhost:8000/graphics/table-fees-by-state/
http://apps.npr.org/dailygraphics/graphics/table-fees-by-state/

app.py route for /slug

Renders parent.html, puts /slug's child.html as iframe in parent.

parent.html needs embed code for child

If there are multiple iframes on the page, what's to keep them from responding to each other's height events

Newly-bootstrapped graphic: Create a default js file for that graphic

graphic.js or app.js in the newly-created graphic's older, with this content to start?

$(document).ready(function() {

});

D3 graphics are too wide in iOS

Need a better way of calculating the iframe width.

Localhost is not updating?

localhost:8000 is not consistently reflecting new projects when they're added to the daily graphics rig.

Example slugged project folders inside www

Inside folder:

child.html, which is the iframe
js and less folders if necessary

Document: How do you embed more than one?

responsive iframe code moved the loop bits out of the library and, as @onyxfish put it so elegantly, "the user is now responsible for their own loops."

@alykat points out that you can't just paste the block of code twice without a.) duplicating the js import and b.) possible variable name collisions.

So, what's our preferred solution?

	App-specific commands
	"""
	def add_graphic(slug):
	with settings(warn_only=True):
	local('mkdir www/graphics/%s' % slug)
	local('cp www/child.html www/graphics/%s/child.html' % slug)
	local('cp -r www/js www/graphics/%s/js' % slug)