This article shows how to use D3JS in a windows 10/8 app store application.
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”:// 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.
FavoriteSoftThings 