Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/index.html

Last active August 29, 2015 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tonyfast/71671fde80f53236958e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tonyfast/71671fde80f53236958e to your computer and use it in GitHub Desktop.
Download ZIP
Moving Scientific Data to the Web Using Javascript and Existing Tools
Raw
readme.md

How do you get started?

So you have some data and you need to make a webpage... How do you start?

If we are data minded then we know the information that needs to be on a webpage. In spite of that, it's really hard to get data on a webpage. The following steps boil these steps down into a simple interative process. We can boil the ocean this way.

Efficient Steps for Moving Data to the Web

  1. Have Data

Have data in structured JSON context

  1. Get that data on the page

Get the data on the page fast. Containers around JS or Javascript objects suffice as a minimal presentation of the data.
D3 and JQuery can do this very fast.

  1. Structure the DOM for the Data

Use Templates to style some of the data. Templates are reusable pieces of code. Javascript functions, d3 functions, Handlebars, and Riot/React are all potential templating tools. d3 functions and Riot/React have the added advantage of controlly interaction. Name important DOM nodes for reuse later.

  1. Style to DOM

Use existing CSS/SASS/LESS frameworks to style components. Bootstrap and Foundation provide a lot of usability right out of the box.

Don't over-style because your code will be less modular. Use external style sheets for added style control and leave it out of the Javascript.

  1. Iteraction

At this point, a static interpretation of the data should have been presented. Now scroll listener events and transitions can be added to augment the visualization. D3 and riot provide nice integrations to isolate interaction.

  1. Iterate

Avoid changing the data during the design, in fact a successful iteration should yield comments on the data's API.
Head back to Step (1), change what data needs to be seen and then the cycle repeat. Complete each step before moving forward. The data to user design flow streamlines coding and naming in development. Each piece of the previous iteration should be reusable.

A Miniminalist Stack for this Process - In my opinion, the CSS framework Bootstrap and the Javsascript libraries D3 and coffeescript write the shortest, most modular and readable code to iterate through this stack the first time.

Raw
index.html
<head>
<script src="//cdn.jsdelivr.net/g/d3js,coffeescript">
</script>
<style>
@import "http://bootswatch.com/superhero/bootstrap.min.css";
</style>
</head>
<body>
<script type="text/coffeescript">
init = '71671fde80f53236958e'
colors = d3.scale.category20()
make = ( id ) ->
d3.json 'https://api.github.com/gists/'+ id , (d) ->
console.log d
d = d3.entries d
d3.select 'body'
.insert 'div'
.classed 'container', true
.selectAll '.ul'
.classed 'list-group-item', true
.data d3.range(d.length)
.call (s) ->
s.enter()
.append 'li'
.classed 'list-group-item', true
.style 'background-color', (i) -> colors (i)
.each (i) ->
d3.select this
.append 'h3'
d3.select this
.append 'span'
s.exit()
.remove()
.each (i) ->
d3.select this
.select 'h3'
.text d[i]['key']
d3.select this
.select 'span'
.text d[i]['value']
make( init )
</script>
</body>
@wd15

wd15 commented Feb 24, 2015

Copy link
Copy Markdown

A very trivial example to get started

<!DOCTYPE html>
<html>
  <head>
    <script src="//cdn.jsdelivr.net/g/d3js,coffeescript"></script>
    <script type="text/coffeescript" src="d3test.coffee"></script>
  </head>
  <body>
  </body>
</html>

and a file called d3test.coffee

theData = [ 1, 2, 3 ]

d3.select("body").selectAll("p")
    .data(theData)
    .enter()
    .append("p")
    .text((d) -> d)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment