nprapps / dailygraphics Goto Github PK
View Code? Open in Web Editor NEWNPR Visuals' rig for deploying daily graphics projects in responsive iframes.
License: MIT License
NPR Visuals' rig for deploying daily graphics projects in responsive iframes.
License: MIT License
Through fab?
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
Change ENVIRONMENT
to NPR
; change TESTSERVER
to false
Since these will be embedded on other pages, are we double-counting?
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.
Don't want to do it while it's hot, but we should deploy the new version
NB: Will require updating the embed code
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.
Might be causing IE issues?
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.
So we don't accidentally read NPR.org messages
Bower? Manually? With hammers?
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.)
See what Chris did on Papertrail (https://github.com/nprapps/papertrail). Related to #10
Used to be here:
Lines 462 to 468 in a251158
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
This will allow a preview of every project.
Workflow:
add_graphic:quiz-economy
to create a new graphicgraphic_config.py
fab update_copy:quiz-economy
— errorfab 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.'
parent.js
and child.js
as global js
We're unlikely to ever use these for daily projects and I want to simplify the docs
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.
Would prefer users not be able to deploy the whole repo by accident
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.
A workbook for each graphic
Some sort of app_config.py
equivalent
graphic.html becomes a template
These should probably be copied for each project or something :/
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
Related to #31
Nothing's broken — it's just annoying.
Low-pri
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?
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.'
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!"
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/
Renders parent.html
, puts /slug
's child.html
as iframe in parent.
graphic.js
or app.js
in the newly-created graphic's older, with this content to start?
$(document).ready(function() {
});
localhost:8000 is not consistently reflecting new projects when they're added to the daily graphics rig.
Inside folder:
child.html
, which is the iframejs
and less
folders if necessaryresponsive 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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.