syl apps stats

_.md

[ Launch: force directed symbols ] 8758745 by DeBraid
[ Launch: force directed symbols ] 8465993 by DeBraid

config.json

{"description":"syl apps stats","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/qTC1e9p.png"}

data.json

[
    {
        "Season": "1936-37",
        "Age": "22",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "48",
        "G": "16",
        "A": "29",
        "PTS": "45",
        "GC": "19",
        "+/-": "0",
        "PIM": "10",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1937-38",
        "Age": "23",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "47",
        "G": "21",
        "A": "29",
        "PTS": "50",
        "GC": "21",
        "+/-": "0",
        "PIM": "9",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1938-39",
        "Age": "24",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "44",
        "G": "15",
        "A": "25",
        "PTS": "40",
        "GC": "16",
        "+/-": "0",
        "PIM": "4",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1939-40",
        "Age": "25",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "27",
        "G": "13",
        "A": "17",
        "PTS": "30",
        "GC": "13",
        "+/-": "0",
        "PIM": "5",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1940-41",
        "Age": "26",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "41",
        "G": "20",
        "A": "24",
        "PTS": "44",
        "GC": "19",
        "+/-": "0",
        "PIM": "6",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1941-42",
        "Age": "27",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "38",
        "G": "18",
        "A": "23",
        "PTS": "41",
        "GC": "17",
        "+/-": "0",
        "PIM": "0",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1942-43",
        "Age": "28",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "29",
        "G": "23",
        "A": "17",
        "PTS": "40",
        "GC": "18",
        "+/-": "0",
        "PIM": "2",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1945-46",
        "Age": "31",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "40",
        "G": "24",
        "A": "16",
        "PTS": "40",
        "GC": "21",
        "+/-": "0",
        "PIM": "2",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1946-47",
        "Age": "32",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "54",
        "G": "25",
        "A": "24",
        "PTS": "49",
        "GC": "23",
        "+/-": "0",
        "PIM": "6",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    },
    {
        "Season": "1947-48",
        "Age": "33",
        "Tm": "TOR",
        "Lg": "NHL",
        "GP": "55",
        "G": "26",
        "A": "27",
        "PTS": "53",
        "GC": "23",
        "+/-": "0",
        "PIM": "12",
        "EV": "0",
        "PP": "0",
        "SH": "0",
        "GW": "0",
        "S": "0",
        "S%": "",
        "TOI": "0",
        "ATOI": "0:00"
    }
]

inlet.js

var height = 800,
    width = 500;   

var data = tributary.data;

var canvas = d3.select("svg").append("g").attr("id", "canvas");

var goals = canvas.selectAll("rect.goals")
          .data(data)
          .enter()
          .append("rect")
          .attr({
            "x": function(d,i) { return 100; },
            "y": function(d,i) { return i*20 + 100; },
            "height": function(d,i) { return d.G; },
            "width": function (d,i) { return 10; },
            "class": "goals"
          });

var assists = canvas.selectAll("rect.assists")
          .data(data)
          .enter()
          .append("rect")
          .attr({
            "x": function(d,i) { return 150; },
            "y": function(d,i) { return i*20 + 100; } ,
            "height": function(d,i) { return d.A; },
            "width": function (d,i) { return 10; },
            "class": "assists"
          });

var points = canvas.selectAll("rect.points")
          .data(data)
          .enter()
          .append("rect")
          .attr({
            "x": function(d,i) { return 200; },
            "y": function(d,i) { return i*20 + 100; } ,
            "height": function(d,i) { return d.PTS; },
            "width": function (d,i) { return 10; },
            "class": "points"
          });

style.css

.goals {
	fill: blue;
}

.assists {
	fill: red;
}

.points {
	fill: orange;
}