nanyaks/.block

## .block
license: none

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  /*fill: steelblue; */
    fill: #ececec;
}

.x.axis path {
  display: none;
}

.stageGrp {
    border: 1px solid green;
}

.project {
    border: 1px solid #cccccc;
}

</style>
<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="stacked-chart.js"></script>
</body>

## stacked-chart.js
var containerWidth = document.querySelector("body").clientWidth;
var containerHeight = 500;
var margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = containerWidth - margin.left - margin.right,
    height = containerHeight - margin.top - margin.bottom;


var data = [
{
    stage: "Permit/Fence",
    projects: [
        {manager: "JP", project: {number: "ydfd"}},
        {manager: "JP", project: {number: "ooin"}},
        {manager: "JP", project: {number: "hdfs"}},
        {manager: "LO", project: {number: "hhdf"}},
    ]
},
{
    stage: "Prelift",
    projects: [
        {manager: "SO", project: {number: "uudf"}},
        {manager: "SO", project: {number: "hfn"}},
        {manager: "JP", project: {number: "iure"}},
        {manager: "LO", project: {number: "ihfd"}},
    ]
},
{
    stage: "Lift",
    projects: [
        {manager: "SO", project: {number: "uudf"}},
        {manager: "JP", project: {number: "hfn"}},
        {manager: "JP", project: {number: "iure"}},
        {manager: "LO", project: {number: "ihfd"}},
        {manager: "LO", project: {number: "fdhf"}},
        {manager: "LO", project: {number: "urhb"}},
    ]
},
{
    stage: "Demo",
    projects: [
        {manager: "SO", project: {number: "osdf"}},
        {manager: "LO", project: {number: "ydfd"}},
    ]
}
];


var projectTypes = [
    "Permit/Fenc",
    "Prelift",
    "Lift",
    "Demo",
    "Footings",
    "Pilings",
    "Foundation",
    "Sill Plates",
    "Set",
    "Reconnect",
    "Desk Steps",
    "Landscaping",
    "Punchlist"
];

var stageTypes = _.pluck(data, 'stage');
var x = d3.scale.ordinal()
    .domain(stageTypes)
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([0, height]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function (d) { return d; });

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right");


// create the svg container
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var layer = svg.selectAll(".stageGrp")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "stageGrp")
    .attr("transform", function (d) { return "translate(" + x(d.stage) + "," + margin.top + ")"; });

layer.append("text").text(function(d){ return d.stage; });
layer.append("rect").text(function(d){ return d.stage; });

// Trying to create rects
var rectHeight = 50;
var rect = layer.selectAll(".bar")
      .data(function (d){ return d.projects; })
      .enter().append("rect")
      .attr("stroke", "#222222")
      .attr("fill", "#ffffff")
      .attr("y", function (d, i){ return -25 })
      .attr("x", function (d, i){ return -25 })
      .attr("transform", function(d, i) { return "translate(" + 0 + "," + (rectHeight * i) + ")"; })
      .attr("height", function(d) { return rectHeight; })
      .attr("width", x.rangeBand());

var project = layer.selectAll(".project")
    .data(function (d) { return d.projects })
    .enter()
    .append("g")
    .append("text").text(function (d){ return d.project.number })
    .attr('y', function(d, i) { return i; } )
    .attr("class", "project")
    .attr("transform", function(d, i) { return "translate(" + 0 + "," + (rectHeight * i) + ")"; });
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	/fill: steelblue; /
	fill: #ececec;
	}

	.x.axis path {
	display: none;
	}

	.stageGrp {
	border: 1px solid green;
	}

	.project {
	border: 1px solid #cccccc;
	}

	</style>
	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

	<script src="stacked-chart.js"></script>
	</body>
	var containerWidth = document.querySelector("body").clientWidth;
	var containerHeight = 500;
	var margin = {top: 20, right: 50, bottom: 30, left: 50},
	width = containerWidth - margin.left - margin.right,
	height = containerHeight - margin.top - margin.bottom;


	var data = [
	{
	stage: "Permit/Fence",
	projects: [
	{manager: "JP", project: {number: "ydfd"}},
	{manager: "JP", project: {number: "ooin"}},
	{manager: "JP", project: {number: "hdfs"}},
	{manager: "LO", project: {number: "hhdf"}},
	]
	},
	{
	stage: "Prelift",
	projects: [
	{manager: "SO", project: {number: "uudf"}},
	{manager: "SO", project: {number: "hfn"}},
	{manager: "JP", project: {number: "iure"}},
	{manager: "LO", project: {number: "ihfd"}},
	]
	},
	{
	stage: "Lift",
	projects: [
	{manager: "SO", project: {number: "uudf"}},
	{manager: "JP", project: {number: "hfn"}},
	{manager: "JP", project: {number: "iure"}},
	{manager: "LO", project: {number: "ihfd"}},
	{manager: "LO", project: {number: "fdhf"}},
	{manager: "LO", project: {number: "urhb"}},
	]
	},
	{
	stage: "Demo",
	projects: [
	{manager: "SO", project: {number: "osdf"}},
	{manager: "LO", project: {number: "ydfd"}},
	]
	}
	];


	var projectTypes = [
	"Permit/Fenc",
	"Prelift",
	"Lift",
	"Demo",
	"Footings",
	"Pilings",
	"Foundation",
	"Sill Plates",
	"Set",
	"Reconnect",
	"Desk Steps",
	"Landscaping",
	"Punchlist"
	];

	var stageTypes = _.pluck(data, 'stage');
	var x = d3.scale.ordinal()
	.domain(stageTypes)
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.range([0, height]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickFormat(function (d) { return d; });

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("right");


	// create the svg container
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var layer = svg.selectAll(".stageGrp")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "stageGrp")
	.attr("transform", function (d) { return "translate(" + x(d.stage) + "," + margin.top + ")"; });

	layer.append("text").text(function(d){ return d.stage; });
	layer.append("rect").text(function(d){ return d.stage; });

	// Trying to create rects
	var rectHeight = 50;
	var rect = layer.selectAll(".bar")
	.data(function (d){ return d.projects; })
	.enter().append("rect")
	.attr("stroke", "#222222")
	.attr("fill", "#ffffff")
	.attr("y", function (d, i){ return -25 })
	.attr("x", function (d, i){ return -25 })
	.attr("transform", function(d, i) { return "translate(" + 0 + "," + (rectHeight * i) + ")"; })
	.attr("height", function(d) { return rectHeight; })
	.attr("width", x.rangeBand());

	var project = layer.selectAll(".project")
	.data(function (d) { return d.projects })
	.enter()
	.append("g")
	.append("text").text(function (d){ return d.project.number })
	.attr('y', function(d, i) { return i; } )
	.attr("class", "project")
	.attr("transform", function(d, i) { return "translate(" + 0 + "," + (rectHeight * i) + ")"; });