Using d3 with Windows 8 JavaScript (WinJS) to parse a CSV file to Create a Scatter Plot

This is example of getting started with d3 to build a Windows 8 app using JavaScript. I will go step by step to create d3 scatter plot in Windows 8.  I added how to parse a CSV and to use that data to create a scatter plot.

Screenshot (21)

Import the files (d3.js and csv file) into the solution:

Screenshot (19)


Link to the d3.js in the html(either default.html or you page.html)

<!DOCTYPE html>
<meta charset=”utf-8″ />

<!– WinJS references –>
<link href=”//Microsoft.WinJS.2.0/css/ui-light.css” rel=”stylesheet” />
<script src=”//Microsoft.WinJS.2.0/js/base.js”></script>
<script src=”//Microsoft.WinJS.2.0/js/ui.js”></script>

<script src=”/js/d3.js”></script>

<link href=”/css/default.css” rel=”stylesheet” />
<link href=”/pages/home/home.css” rel=”stylesheet” />
<script src=”/pages/home/home.js”></script>
<div id=’scatter-load’>

Parse the CSV file

/*** call this method with the column name as strings ***/
            function parse(label, color, X, Y) {  
                d3.csv("/data/hygxyz.csv", function (stars) {
                    data = (d) {
                    /** Use plus for numbers **/
                        d.label = d[label];     //label
                        d.color = +d[color]; // color
                        d.x = +d[X];   //X   
                        d.y = +d[Y];  // Y
                        return { "label": d.label, "color": d.color, "x": d.x, "y": d.y };
                  scatterPlot(data);  // lets use that data

Create the Scatter Plot

I found this on a site but I can not remember where.

  function scatterPlot(data) {
                // just to have some space around items.        
                var margins = {
                    "left": 80,
                    "right": 30,
                    "top": 20,
                    "bottom": 20

                var width = 1300;
                var height = 700;
                // this will be our colour scale. An Ordinal scale.
                var colors = d3.scale.category10();

                // we add the SVG component to the scatter-load div
                var svg ="#scatter-load").append("svg").attr("width", "100%").attr("height", "100%").append("g")
                    .attr("transform", "translate(" + margins.left + "," + + ")");

                // this sets the scale that we're using for the X axis. 
                // the domain define the min and max variables to show. In this case, it's the min and max prices of items.
                // this is made a compact piece of code due to d3.extent which gives back the max and min of the price variable within the dataset
                var x = d3.scale.linear()
                    .domain(d3.extent(data, function (d) {
                        return d.x;
                // the range maps the domain to values from 0 to the width minus the left and right margins (used to space out the visualization)
                  .range([0, width - margins.left - margins.right]);

                // this does the same as for the y axis but maps from the rating variable to the height to 0. 
                var y = d3.scale.linear()
                      .domain(d3.extent(data, function (d) {
                        return d.y;
                // Note that height goes first due to the weird SVG coordinate system
                .range([height - - margins.bottom, 0]);

                // we add the axes SVG component. At this point, this is just a placeholder. The actual axis will be added in a bit
                svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + y.range()[0] + ")");
                svg.append("g").attr("class", "y axis");

                // this is our X axis label. Nothing too special to see here.
                    .attr("fill", "#414241")
                    .attr("text-anchor", "end")
                    .attr("x", width / 2)
                    .attr("y", height - 35)
                    .text("Star X");

                // this is the actual definition of our x and y axes. The orientation refers to where the labels appear - for the x axis, below or above the line, and for the y axis, left or right of the line. Tick padding refers to how much space between the tick and the label. There are other parameters too - see for more information
                var xAxis = d3.svg.axis().scale(x).orient("bottom").tickPadding(2);
                var yAxis = d3.svg.axis().scale(y).orient("left").tickPadding(2);

                // this is where we select the axis we created a few lines earlier. See how we select the axis item. in our svg we appended a g element with a x/y and axis class. To pull that back up, we do this svg select, then 'call' the appropriate axis object for rendering.    

                // now, we can get down to the data part, and drawing stuff. We are telling D3 that all nodes (g elements with class node) will have data attached to them. The 'key' we use (to let D3 know the uniqueness of items) will be the name. Not usually a great key, but fine for this example.
                var chocolate = svg.selectAll("g.node").data(data, function (d) {
                    return d.label;

                // we 'enter' the data, making the SVG group (to contain a circle and text) with a class node. This corresponds with what we told the data it should be above.
                var chocolateGroup = chocolate.enter().append("g").attr("class", "node")
                // this is how we set the position of the items. Translate is an incredibly useful function for rotating and positioning items 
                .attr('transform', function (d) {
                    return "translate(" + x(d.x) + "," + y(d.y) + ")";

                    // we add our first graphics element! A circle! 
                        .filter(function (d) { return (d.x < xScaleMax && d.x >xScaleMin && d.y < yScaleMax && d.y > yScaleMin ); })
                        .attr("r", 5)
                        .attr("class", "dot")
                        .on('click', function (d, i) {
                        .style("fill", function (d) {
                            // remember the ordinal scales? We use the colors scale to get a colour for our manufacturer. Now each node will be coloured
                            // by who makes the chocolate. 
                        return colors(d.color);
                // now we add some text, so we can see what each item is.
                    .style("text-anchor", "middle")
                    .attr("dy", -10)
                    .text(function (d) {
                        // this shouldn't be a surprising statement.
                        return d.label;


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Graveyard Database Logo

Has everything you want to know about grave yards. Plus has many celebrites and world leaders graves. Pssst it is my other site

Google + Profile
Check out Android Photo Mapping, its a app/site I been working on
Fabulou wholesale Petr Mrazek jersey is back. Best choice to get the wholesale Petr Mrazek jersey is suitable for all style of people.