Using D3JS in a Windows 10/8 App Store application

This article shows how to use D3JS in a windows 10/8 app store application.

d3win10app

As we will see, there are only minor changes needed to get at nice interactive website build with D3 running in a windows 10/8 app store application. The website becomes completely local on the windows computer.

Here is my code example, I highlight the steps that are needed to convert this web page from Mike Bostock to a windows app store application below.

Using Visual Studio 2015 create a new windows app store Html5/JS project.

Open the source for the webpage and look for

http://d3/d3.js
http://d3/d3.geom.js
http://d3/d3.layout.js

these files will have to go into your js folder inside your windows app project and be included into the home.html page of the app store app.

<!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
 //Microsoft.WinJS.1.0/js/base.js
 //Microsoft.WinJS.1.0/js/ui.js
<link href="/css/default.css" rel="stylesheet" /> 
<link href="/pages/home/home.css" rel="stylesheet" /> 
http://../../js/d3.js 
http://../../js/geom.js 
http://../../js/layout.js
/pages/home/home.js

Into the home.js you insert the code from the websites script:

(function () {
 "use strict";

WinJS.UI.Pages.define("/pages/home/home.html", {
 // This function is called whenever a user navigates to this page. It
 // populates the page elements with the app's data.
 ready: function (element, options) {

/// insert your rendering code for the d3 visualization here

  }});})();

The website uses a body tag as target for the render operation; in your windows app the target is the section tag so you change from body to section in the select call:

var vis = d3.select("section").append("svg:svg").attr("width", w).attr("height", h);

The d3.json call pulls the data in and you can choose, if you want to use the data from the original source on github or copy the json file into your project too, so that the whole app runs from your windows box.

d3.json(    //”http://mbostock.github.com/d3/talk/20111116/flare.json&#8221:// enable this line to load // from the internet
“flare.json”// this assumes you have the flare.json file in the root of your windows app project
, function (json) {
root = json;
root.fixed = true;
root.x = w / 2;
root.y = h / 2 – 80;
update();
});

That is it!

Compile and run; when you run in the debugger it will be somewhat slow, but without the debugger its about the same speed that I see in Chrome or IE11.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s