palewire/first-visual-story

A step-by-step guide to publishing a standalone story from a dataset.

first-visual-story's Issues

Writethrough the "Hello Map" chapter with some more details about what we're doing

Add a reference to Chartbuilder / DataWrapper if people are interested

Do we want to install dependencies as we go along?

Ie., using npm to install required libraries as we get to that point in the class. This would show people that these dependencies are flexible and can be adjusted to the needs of the project.

The downside is there might be hiccups if internet connections are wonky.

Plotly chart instructions

If our custom scss files start with an "_" should our JS ones also start with "_"?

Node.JS prerequisites instructions

Cards section in docs needs a little bit of writing between each snippet explaining what we're doing

Refactor the for loop in the charts section to use .forEach

Don't think we need sudo on the npm commands

sudo npm install -g yo gulp
sudo npm install -g generator-yeogurt

Fine tune the robotext sentence to whatever we'd like

D4 chart setup steps

Do our content block examples need to accrue code from the previous chapters over time?

I think maybe. At least the first time we drop something new in.

Does Ben need to change his CSS approach to match Armand's?

Add URL to homicide report page for each card

Each record includes a "slug" which can be converted a URL on the site so the slug "baby-blanche" can be inserted like so http://homicide.latimes.com/post/baby-blanche/

Charts need to be clear we are comparing Harvard Park to the *county*

Right now some of the docs talk about the city.

Could we label the pins on the map with the lines

Fix scrollWheelZoom so it is set on the map not the base layer

Make a chart first, then abstract it into a function?

Build discovery of Leaflet tools via its docs about how to start map into the class

We should cruise the web, find their starter code. Paste that in. Work off that. Better than us just giving it as the voice of God.

Use .forEach instead of a for loop in charts.js

Yeogurt setup questions

Figure we should have these addressed and outlined. How does this look?

project name: first-graphics-app
Javascript preprocessor: None (we could use Babel but no real need here)
Write styles: Sass
Sass syntax: SCSS (I don't think we'll be using this but going with what I'm familiar with)
Javascript testing framework: None (assuming we don't need this)

Write a subhed and chatter for all three subsections

We could use an arrow function in the chart, but is it too much?

I just pushed to change so you could consider it, @emamd.

var countyHomicides = annualTotals.map(a => a.homicides_total);
var harvardParkHomicides = annualTotals.map(a => a.homicides_harvard_park);
var years = annualTotals.map(a => a.year);

Refactor maps code to run in maps.js in the scripts folder

Screenshots throughout the entire tutorial

Save this work until we have a strong, finished draft

Tone down the chart subheds

Can the Leaflet example work with an npm install instead of pasting links into the head?

Cards section in docs needs code-block formatting for all the snippets

Writethrough the "Hello Framework" chapter with some more details about what we're doing

Look into refactoring the chart to use Vega

I know it's a hassle, but it seems much better and more applicable than plotly.

For the good of the people.

Default Gulp setup doesn't copy/serve the _data directory

This would be solved by a fix to the gulp task in copy.js, but would change things from the default Yeogurt setup, I believe. Also having trouble dissecting that regex.

The alternative is to request the data directly from the github repo, with the caveat that it could get super slow if the internet gets wonky.

Docs issue ... variable changes in example

There is a point in the docs when building charts that the layout variable changes to chartLayout in the example code:

var chartLayout = { //should be `layout`
    xaxis: {
        title: 'Year',
        fixedrange: true
    },
    yaxis: {
        fixedrange: true
    },
    // Add the margin here
    margin: {
        l: 45,
        r: 15,
        t: 45,
        b: 30
    },
    // Add a height parameter to the bottom of your file
    height: 250
};

If a student copy 'n' pastes the whole block, their variable will change and it won't work anymore.

npm prerequisites instructions

Writethrough the "Hello Data" chapter with some more details about what we're doing

hide minimap on mobile with built in css

Test the whole shebang on Windows 10 PC

Spotify playlist embed

• Feel like bustin loose
• Funking it up
• Do what you wanna
• Rubberband man

Do we like the docs as one super long page, or should we break it into separate pages?

That's what I did on firstpythonnotebook.org.

I'm on the fence about the tradeoff here but with all the images and GIFs our single page is getting real heavy.

Make any CSS tweaks to the cards we want

Send blast email to the students

Add a couple map options at the end of the chapter to tighten it up

• Scroll to zoom off for Armand
• Restrict how far back you can zoom

Add :emphasize-lines: bits to our code snippets in the docs

The charts chapter needs to add its subheadline and chatter yet

Writethrough the "Hello Internet" chapter with some more details about what we're doing

Could we use the homicide report orange dot?

Send blast email to CCDC mailing list

Should main.js come after the scripts block?

My thought is that we use the scripts block to write/include any data to the template, and then do all the charting/mapping/data manipulation inside of main.js.

For example,

{% block scripts %}
<script>
var homicides = {% include '_data/annual_totals.json' %}
</script>
{% endblock %}

and then inside of charts.js which is called from (or could be directly written into main.js) you can directly refer to the homicides variable which exists as a global on the template.

Rebuild and republish the site with `gulp --production` once the cards are done

Reconcile Bootstrap's CSS with our custom CSS to fix any bugs

Refactor the page to run at the root URL