Standards

The TIME interactives team aspires to write clean, exciting Javascript that is a joy to work with and improve. To that end, there are some rules that Chris would like his minions to follow.

##ids Each project has a unique id that is both the name of its Git repository and the id of the <div> where the interactive will self-assemble. There are a few conventions for these:

• All words are separated with underscores, not hyphens. Besides consistency, this allows us to use the dot prefix when the id inevitably ends up as a property of an object.
• Be descriptive and precise. hr83_2014_votes is much better than congress_votes or even congress_budget_votes (unless you are, in fact, building an app that visualizes every congressional budget vote in history).
• Don't use words like "interactive" or "app" or "viz." We already know that's what you're building, so use the space to tell me what it's about. "Map" and "chart" are okay at the end of the id string, particularly if there's another app about the same topic told with a different visualization type.

##variable names Your variable names should likewise be descriptive and enriching. To that end:

• Lowercase. We reserve uppercase identifiers for objects that require a new operator, per Crockford.
• No numbers. I never, ever want to see chart2 or map3. Surely the second chart and third map have some distinguishing characteristic, like chart_projections or map_per_capita. The uglification will take care of those long variable names, so go to town. The only exception is years or other cases where the numbers actually convey information. I can live with map_2013 or profits_Q2.
• Real words. We all have a tendency to abbreviate variable names, but this merely decreases the likelihood that someone else will understand their purpose. I want to see real English words in the variable names. That means radius instead of rad, position instead of pos, year instead of y. The only exception is for short-lived variables when there is a clear convention to use single letters, such as in the .attr("cx", function(d, i) { return scale(d.earnings); }) callbacks that are common in D3.