Ledragon/.gitignore

## .gitignore
node_modules
*.xlsx
typings

## readme.md

      
    Raw
  

              readme.md
            
          
    #Make over monday 24

  
## app.js
(function () {
    'use strict';
    var chart = d3.chart(d3.select('#container'), 800, 600);
    var chart2015 = d3.chart(d3.select('#container2015'), 800, 600);

    d3.csv('Female Corporate Talent Pipeline.csv',
        function (d) {
            return {
                year: +d.Year,
                level: d.Level,
                female: +d.Female.replace('%', '') / 100,
                male: +d.Male.replace('%', '') / 100
            }
        }, function (error, data) {
            if (error) {
                console.error(error);
            } else {
                var byYear = d3.nest()
                    .key(d => d.year)
                    .entries(data);
                chart.update(byYear[0].values);
                chart2015.update(byYear[1].values);
            }
        })
} ());

## chart.js
(function () {
    'use strict';
    d3.chart = function (container, width, height) {
        var marginBottom = 50;
        var marginTop = 20;
        var marginLeft = 50;
        var marginRight = 50;
        var plotMargin = {
            top: 50,
            left: 0,
            right: 0,
            bottom: 0
        };
        var chartGroup = container
            .append('g')
            .attr('transform', `translate(${marginLeft},${marginTop})`);
        var chartWidth = width - marginLeft - marginRight;
        var chartHeight = height - marginTop - marginBottom;
        var plotGroup = chartGroup
            .append('g')
            .attr('transform', `translate(${plotMargin.left},${plotMargin.top})`);
        var plotWidth = chartWidth - plotMargin.left - plotMargin.right;
        var plotHeight = chartHeight - plotMargin.top - plotMargin.bottom;

        var xAxisGroup = plotGroup.append('g')
            .classed('axis', true)
            .attr('transform', `translate(${0},${plotHeight})`);
        var xScale = d3.scale.ordinal()
            .rangeBands([0, plotWidth]);
        var xAxis = d3.svg.axis()
            .orient('bottom')
            .scale(xScale);

        var yScale = d3.scale.linear()
            .domain([0, 1])
            .range([plotHeight, 0]);
        var yAxis = d3.svg.axis()
            .orient('left')
            .tickFormat(d3.format('%'))
            .scale(yScale);
        var yAxisGroup = plotGroup.append('g')
            .classed('axis', true)
            .call(yAxis);
        return {
            update: function (data) {
                xScale.domain(data.map(d => d.level));
                xAxisGroup.call(xAxis);

                var seriesGroup = plotGroup.append('g')
                    .classed('series', true);
                var items = seriesGroup.selectAll('.item')
                    .data(data)
                    .enter()
                    .append('g')
                    .classed('item', true);
                items.append('rect')
                    .style('fill', 'pink')
                    .attr({
                        'x': d => xScale(d.level),
                        'y': d => yScale(d.female),
                        'width': xScale.rangeBand(),
                        height: d => plotHeight - yScale(d.female)
                    });
                items.append('rect')
                    .style('fill', 'lightblue')
                    .attr({
                        'x': d => xScale(d.level),
                        'y': 0,
                        'width': xScale.rangeBand(),
                        height: d => yScale(d.female)
                    });
            }
        }
    }
} ());

## Female Corporate Talent Pipeline.csv

          
            Year
            Level
            Female
            Male

            
              2012
              Entry Level
              42%
              58%

            
              2015
              Entry Level
              45%
              55%

            
              2012
              Manager
              33%
              67%

            
              2015
              Manager
              37%
              63%

            
              2012
              Senior Manager / Director
              28%
              72%

            
              2015
              Senior Manager / Director
              32%
              68%

            
              2012
              Vice President
              23%
              77%

            
              2015
              Vice President
              27%
              73%

            
              2012
              Senior Vice President
              20%
              80%

            
              2015
              Senior Vice President
              23%
              77%

            
              2012
              C-Suite
              16%
              84%

            
              2015
              C-Suite
              17%
              83%

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Makeover Monday 24</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
</head>

<body>
    <svg width="800" height="600" id="container">

    </svg>
    <svg width="800" height="600" id="container2015">

    </svg>
    <script src="chart.js">    </script>
    <script src="app.js">    </script>

</body>

</html>

## package.json
{
  "name": "make-over-monday-24",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve":"live-server"
  },
  "author": "Hugues Stefanski",
  "license": "MIT",
  "devDependencies": {
    "live-server": "^1.0.0"
  }
}

## snippets.ts

      
    Raw
  

              snippets.ts
            
          
## styles.css
body{
    /*font-family: 'Raleway', sans-serif;*/
    font-family: 'Karla', sans-serif;
}
.axis .tick text{
    font-size:.8em;
}
.tick line{
    stroke:darkgray;
}
.domain{
    fill:transparent;
    stroke:darkgray;
}
.title{
    text-anchor: middle;
    font-size: 1.2em;
}
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
circle{
    fill:transparent;
    stroke: black;
}
	(function () {
	'use strict';
	var chart = d3.chart(d3.select('#container'), 800, 600);
	var chart2015 = d3.chart(d3.select('#container2015'), 800, 600);

	d3.csv('Female Corporate Talent Pipeline.csv',
	function (d) {
	return {
	year: +d.Year,
	level: d.Level,
	female: +d.Female.replace('%', '') / 100,
	male: +d.Male.replace('%', '') / 100
	}
	}, function (error, data) {
	if (error) {
	console.error(error);
	} else {
	var byYear = d3.nest()
	.key(d => d.year)
	.entries(data);
	chart.update(byYear[0].values);
	chart2015.update(byYear[1].values);
	}
	})
	} ());
	(function () {
	'use strict';
	d3.chart = function (container, width, height) {
	var marginBottom = 50;
	var marginTop = 20;
	var marginLeft = 50;
	var marginRight = 50;
	var plotMargin = {
	top: 50,
	left: 0,
	right: 0,
	bottom: 0
	};
	var chartGroup = container
	.append('g')
	.attr('transform', `translate(${marginLeft},${marginTop})`);
	var chartWidth = width - marginLeft - marginRight;
	var chartHeight = height - marginTop - marginBottom;
	var plotGroup = chartGroup
	.append('g')
	.attr('transform', `translate(${plotMargin.left},${plotMargin.top})`);
	var plotWidth = chartWidth - plotMargin.left - plotMargin.right;
	var plotHeight = chartHeight - plotMargin.top - plotMargin.bottom;

	var xAxisGroup = plotGroup.append('g')
	.classed('axis', true)
	.attr('transform', `translate(${0},${plotHeight})`);
	var xScale = d3.scale.ordinal()
	.rangeBands([0, plotWidth]);
	var xAxis = d3.svg.axis()
	.orient('bottom')
	.scale(xScale);

	var yScale = d3.scale.linear()
	.domain([0, 1])
	.range([plotHeight, 0]);
	var yAxis = d3.svg.axis()
	.orient('left')
	.tickFormat(d3.format('%'))
	.scale(yScale);
	var yAxisGroup = plotGroup.append('g')
	.classed('axis', true)
	.call(yAxis);
	return {
	update: function (data) {
	xScale.domain(data.map(d => d.level));
	xAxisGroup.call(xAxis);

	var seriesGroup = plotGroup.append('g')
	.classed('series', true);
	var items = seriesGroup.selectAll('.item')
	.data(data)
	.enter()
	.append('g')
	.classed('item', true);
	items.append('rect')
	.style('fill', 'pink')
	.attr({
	'x': d => xScale(d.level),
	'y': d => yScale(d.female),
	'width': xScale.rangeBand(),
	height: d => plotHeight - yScale(d.female)
	});
	items.append('rect')
	.style('fill', 'lightblue')
	.attr({
	'x': d => xScale(d.level),
	'y': 0,
	'width': xScale.rangeBand(),
	height: d => yScale(d.female)
	});
	}
	}
	}
	} ());
Year	Level	Female	Male
2012	Entry Level	42%	58%
2015	Entry Level	45%	55%
2012	Manager	33%	67%
2015	Manager	37%	63%
2012	Senior Manager / Director	28%	72%
2015	Senior Manager / Director	32%	68%
2012	Vice President	23%	77%
2015	Vice President	27%	73%
2012	Senior Vice President	20%	80%
2015	Senior Vice President	23%	77%
2012	C-Suite	16%	84%
2015	C-Suite	17%	83%
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Makeover Monday 24</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<link rel="stylesheet" href="styles.css">
	<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<svg width="800" height="600" id="container">

	</svg>
	<svg width="800" height="600" id="container2015">

	</svg>
	<script src="chart.js"> </script>
	<script src="app.js"> </script>

	</body>

	</html>
	{
	"name": "make-over-monday-24",
	"version": "1.0.0",
	"description": "",
	"main": "app.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"serve":"live-server"
	},
	"author": "Hugues Stefanski",
	"license": "MIT",
	"devDependencies": {
	"live-server": "^1.0.0"
	}
	}
	body{
	/font-family: 'Raleway', sans-serif;/
	font-family: 'Karla', sans-serif;
	}
	.axis .tick text{
	font-size:.8em;
	}
	.tick line{
	stroke:darkgray;
	}
	.domain{
	fill:transparent;
	stroke:darkgray;
	}
	.title{
	text-anchor: middle;
	font-size: 1.2em;
	}
	.brush .extent {
	stroke: #fff;
	fill-opacity: .125;
	shape-rendering: crispEdges;
	}
	circle{
	fill:transparent;
	stroke: black;
	}