Skip to content

Samples

Jump to bottom
va barbosa edited this page Jul 5, 2017 · 4 revisions


Sample Visualization with HTML Data Attribute

Visualizations can be rendered directly from HTML tags by providing specific HTML data attributes. See the API and visualization documentation for more info.

  • Bubble Chart from URL (with data transformation and on click call back)

     <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
   <title>simpledatavis</title>
   
   <script src="d3.v4.min.js" charset="utf-8"></script>
 
   <script type="text/javascript" src="../simpledatavis.js"></script>
   <script type="text/javascript" src="../vis/simpledatavis-bubblechart.js"></script>
 
   <script type="text/javascript">
     function gotCultureOnData (data) {
       var culture = []
       for (var g in data.counts.culture) {
         culture.push({ key: g, value: data.counts.culture[g] })
       }
       culture.sort(function(a, b) { return a.value < b.value })
       return culture
     }
 
     function bubbleClicked (d) {
       console.log(d, 'has been clicked')
     }
   </script>
 </head>
 
 <body>
   <h1>
     <mark>Sample Data Visualizations</mark> // Bubble Chart from URL
   </h1>
   <figure>
     <p>Bubble Chart from Simple Search Service API (with callback to modify/transform initial data and callback for clicking on bubble)</p>
     <p><strong>Number of <i>Game of Thrones</i> characters in each culture</strong></p>
     <div data-vis="http://sss-got.mybluemix.net/search?q=*:*"
       data-vis-type="bubble-chart"
       data-vis-onclick="bubbleClicked"
       data-vis-ondata="gotCultureOnData"></div>
   </figure>
 </body>
 </html>

Sample Visualization with JavaScript

Visualizations can be initiated with JavaScript and rendered in provided node (CSS selector). See the API and visualization documentation for more info.

  • Range Bar Chart from JSON Array (with custom tooltip message)

     <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
   <title>simpledatavis</title>
   
   <script src="d3.v4.min.js" charset="utf-8"></script>
 
   <script type="text/javascript" src="../simpledatavis.js"></script>
   <script type="text/javascript" src="../vis/simpledatavis-rangebarchart.js"></script>
 
   <script type="text/javascript">
     var rangedata = [
       { 'key': 'Openness', 'value': { 'max': 0.775234103203, 'min': 0.77354580164 } },
       { 'key': 'Conscientiousness', 'value': { 'min': 0.716913402081, 'max': 0.735594511032 } },
       { 'key': 'Extraversion', 'value': { 'min': 0.58776807785, 'max': 0.642059385777 } },
       { 'key': 'Agreeableness', 'value': { 'min': 0.757775902748, 'max': 0.822334706783 } },
       { 'key': 'Emotional', 'value': { 'min': 0.564635515213, 'max': 0.583389163017 } }
     ]
 
     window.addEventListener('DOMContentLoaded', function () {
       SimpleDataVis(rangedata)
         .attr('type', 'range-bar-chart')
         .attr('tooltip', function (d) {
           return d.key + ' (' + d.value.min.toFixed(3) + ' to ' + d.value.max.toFixed(3) + ')'
         })
         .render('#datavischart')
     })
   </script>
 </head>
 
 <body>
   <h1>
     <mark>Sample Data Visualizations</mark> // Range Bar Chart from JSON
   </h1>
   <figure>
     <p>Range Bar Chart from JSON Array Data (with customized tooltip message)</p>
     <p><strong>Personality Insight Scores</strong></p>
     <div id="datavischart"></div>
   </figure>
 </body>
 </html>

Sample Visualization with Node.js

Visualizations can be rendered server side and the SVG returned to the client. See the API and visualization documentation for more info.

  • Donut Chart from Cloudant view

    HTML

     <img src="https://mynodeapp.mybluemix.net/chart" />

    Node.js

     var express = require('express')
 var app = express()
 var http = require('http').Server(app)
 var appEnv = cfenv.getAppEnv()
 var SimpleDataVis = require('simple-data-vis')
 
 var dataUrl = 'https://myaccount.cloudant.com/mydb/_design/myddoc/_view/myview?group=true'
 
 app.use(express.static(path.join(__dirname, '/public')))
 
 app.get('/chart', function (req, res) {
   SimpleDataVis(dataUrl)
 	.attr('type', 'pie-chart')
 	.attr('donut', true)
 	.on('end', function (data, selection) {
 		res.setHeader('Content-Type', 'image/svg+xml')
 		var svghtml = selection.node().outerHTML
 		res.send(svghtml)
 	})
 	.on('fail', function (error) {
 		res.send({ success: false, message: error })
 	})
 	.render(null)
 })
 
 http.listen(appEnv.port, '0.0.0.0', function () {
   // print a message when the server starts listening
   console.log('server starting on ' + appEnv.url)
 })

More Info

Clone this wiki locally