Skip to content

Instantly share code, notes, and snippets.

@mef

mef/pre-render.js

Last active May 20, 2022 16:56
Show Gist options
  • Save mef/7044786 to your computer and use it in GitHub Desktop.
Save mef/7044786 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mef revised this gist Oct 18, 2013. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions pre-render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,20 +12,21 @@ jsdom.env({

    var el = window.document.querySelector('#dataviz-container')
    , body = window.document.querySelector('body')
    , circleId = 'a2324' // say, this value was dynamically retrieved from some database

    // generate the dataviz
    d3.select(el)
    .append('svg:svg')
    .attr('width', 600)
    .attr('height', 300)
    .append('circle')
    .attr('id', 'a2324') // say, this value was dynamically retrieved from some database
    .attr('cx', 300)
    .attr('cy', 150)
    .attr('r', 30)
    .attr('fill', '#26963C')
    .attr('fill', '#26963c')
    .attr('id', circleId) // say, this value was dynamically retrieved from some database

    // make the client-side script manipulate the circle: transition fill color
    // make the client-side script manipulate the circle at client side)
    var clientScript = "d3.select('#" + circleId + "').transition().delay(1000).attr('fill', '#f9af26')"

    d3.select(body)
    @@ -42,4 +43,5 @@ jsdom.env({
    }
    })
    } // end jsDom done callback
    })
    })
    // no semi-column was harmed during this development
  2. mef revised this gist Oct 18, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions pre-render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,10 +23,10 @@ jsdom.env({
    .attr('cx', 300)
    .attr('cy', 150)
    .attr('r', 30)
    .attr('fill', 'blue')
    .attr('fill', '#26963C')

    // make the client-side script manipulate the circle at client side)
    var clientScript = "d3.select('#" + circleId + "').transition().delay(1000).attr('fill', 'red')"
    // make the client-side script manipulate the circle: transition fill color
    var clientScript = "d3.select('#" + circleId + "').transition().delay(1000).attr('fill', '#f9af26')"

    d3.select(body)
    .append('script')
  3. mef revised this gist Oct 18, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion pre-render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,6 @@ var d3 = require('d3')
    jsdom.env({
    features : { QuerySelector : true }
    , html : htmlStub
    // , scripts : ['client-script.js']
    , done : function(errors, window) {
    // this callback function pre-renders the dataviz inside the html document, then export result into a static file

  4. mef created this gist Oct 18, 2013.
    46 changes: 46 additions & 0 deletions pre-render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    // pre-render d3 charts at server side
    var d3 = require('d3')
    , jsdom = require('jsdom')
    , fs = require('fs')
    , htmlStub = '<html><head></head><body><div id="dataviz-container"></div><script src="js/d3.v3.min.js"></script></body></html>'

    jsdom.env({
    features : { QuerySelector : true }
    , html : htmlStub
    // , scripts : ['client-script.js']
    , done : function(errors, window) {
    // this callback function pre-renders the dataviz inside the html document, then export result into a static file

    var el = window.document.querySelector('#dataviz-container')
    , body = window.document.querySelector('body')

    // generate the dataviz
    d3.select(el)
    .append('svg:svg')
    .attr('width', 600)
    .attr('height', 300)
    .append('circle')
    .attr('id', 'a2324') // say, this value was dynamically retrieved from some database
    .attr('cx', 300)
    .attr('cy', 150)
    .attr('r', 30)
    .attr('fill', 'blue')

    // make the client-side script manipulate the circle at client side)
    var clientScript = "d3.select('#" + circleId + "').transition().delay(1000).attr('fill', 'red')"

    d3.select(body)
    .append('script')
    .html(clientScript)

    // save result in an html file, we could also keep it in memory, or export the interesting fragment into a database for later use
    var svgsrc = window.document.innerHTML
    fs.writeFile('index.html', svgsrc, function(err) {
    if(err) {
    console.log('error saving document', err)
    } else {
    console.log('The file was saved!')
    }
    })
    } // end jsDom done callback
    })