GerardoFurtado/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from GerardoFurtado's block: fresh block

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

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

<script src="https://d3js.org/d3.v4.js"></script>
<script>
    var parseDate = d3.timeParse("%Y-%m-%d");

    function type2(d, i, columns) {
        d.date = parseDate(d.date);
        return d;
    }

    function type(d, i, columns) {
        d.date = parseDate(d.date);
        for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100;
        return d;
    }

    function drawGraph(error, data, selector, width, height) {
        console.log(data);

        var svg = d3.select(selector).append("svg")
                .attr("width", width)
                .attr("height", height),
            margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = svg.attr("width") - margin.left - margin.right,
            height = svg.attr("height") - margin.top - margin.bottom;


        var x = d3.scaleTime().range([0, width]),
            y = d3.scaleLinear().range([height, 0]),
            z = d3.scaleOrdinal(d3.schemeCategory10);

        var stack = d3.stack();

        var area = d3.area()
            .x(function (d, i) {
                return x(d.data.date);
            })
            .y0(function (d) {
                return y(d[0]);
            })
            .y1(function (d) {
                return y(d[1]);
            });

        var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var keys = data.columns.slice(1);

        x.domain(d3.extent(data, function (d) {
            return d.date;
        }));

        z.domain(keys);
        stack.keys(keys);

      console.log(stack(data))

        var layer = g.selectAll(".layer")
            .data(stack(data))
            .enter().append("g")
            .attr("class", "layer");

        layer.append("path")
            .attr("class", "area")
            .style("fill", function (d) {
                return z(d.key);
            })
            .attr("d", area);

        layer.filter(function (d) {
            return d[d.length - 1][1] - d[d.length - 1][0] > 0.01;
        })
            .append("text")
            .attr("x", width - 6)
            .attr("y", function (d) {
                return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2);
            })
            .attr("dy", ".35em")
            .style("font", "10px sans-serif")
            .style("text-anchor", "end")
            .text(function (d) {
                return d.key;
            });

        g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        g.append("g")
            .attr("class", "axis axis--y")
            .call(d3.axisLeft(y).ticks(10, "%"));
    }

    d3.csv("market_shares.csv", type2, function (error, data) {
        let stackedByDate = {}
        let drugSet = new Set();
        let defaultDrugMarketShareProp = {};
        let newData = []

        data.forEach(function (item, index) {
            drugSet.add(item.drug);
            stackedByDate[item.date] = {};
        });

        let drugNames = [...drugSet];

        drugNames.forEach(function (item, index) {
            defaultDrugMarketShareProp[item] = 0;
        });

        data.forEach(function (item, index) {
            stackedByDate[item.date] = Object.assign({}, defaultDrugMarketShareProp);
        });

        data.forEach(function (item, index) {
            stackedByDate[item.date][item.drug] = item.market_share;
        });

        Object.keys(stackedByDate).forEach(function (key) {
            hash = {}
            hash['date'] = new Date(key);
            Object.keys(stackedByDate[key]).forEach(function (innerKey) {
                hash[innerKey] = stackedByDate[key][innerKey]
            });
            newData.push(hash);
        });

        newData.columns = drugNames;
        newData.columns.unshift('date');

        drawGraph(error, newData, "#div2", 960, 500);
    });

</script>

## market_shares.csv

          
            date
            drug
            market_share

            
              2016-01-01
              insulin lispro
              .01

            
              2016-01-01
              alogliptin
              0.001323754341

            
              2016-01-01
              sitagliptin
              .01

            
              2016-01-01
              canagliflozin
              0.02842158621

            
              2016-01-01
              glimepiride
              0.05668845799

            
              2016-01-01
              repaglinide
              0.0005768749342

            
              2016-01-01
              insulin glargine
              .01

            
              2016-01-01
              metformin
              0.4972895171

            
              2016-01-01
              mifepristone
              .02

            
              2016-01-01
              exenatide
              .02

            
              2016-01-01
              bromocriptine
              0.0002109506723

            
              2016-01-01
              pioglitazone
              0.02324500184

            
              2016-01-01
              metformin hydrochloride
              0.392074889

            
              2016-02-01
              saxagliptin
              .02

            
              2016-02-01
              pioglitazone
              0.02247815103

            
              2016-02-01
              exenatide
              0.03

            
              2016-02-01
              repaglinide
              0.0006204220565

            
              2016-02-01
              metformin hydrochloride
              0.394153624

            
              2016-02-01
              sitagliptin
              .08

            
              2016-02-01
              insulin lispro
              .05

            
              2016-02-01
              canagliflozin
              0.02907988245

            
              2016-02-01
              metformin
              0.4933502396

            
              2016-02-01
              insulin glargine
              .02

            
              2016-02-01
              bromocriptine
              0.0002076549233

            
              2016-02-01
              mifepristone
              .02

            
              2016-02-01
              alogliptin
              0.001364306972

            
              2016-02-01
              glimepiride
              0.05857620484

            
              2016-03-01
              canagliflozin
              0.02908102306

            
              2016-03-01
              bromocriptine
              0.000195238081

            
              2016-03-01
              metformin
              0.4966376769

            
              2016-03-01
              alogliptin
              0.00133532899

            
              2016-03-01
              insulin glargine
              .03

            
              2016-03-01
              sitagliptin
              .04
	<!DOCTYPE html>
	<meta charset="utf-8">

	<body>
	<div id="div1"></div>
	<div id="div2"></div>
	</body>

	<script src="https://d3js.org/d3.v4.js"></script>
	<script>
	var parseDate = d3.timeParse("%Y-%m-%d");

	function type2(d, i, columns) {
	d.date = parseDate(d.date);
	return d;
	}

	function type(d, i, columns) {
	d.date = parseDate(d.date);
	for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100;
	return d;
	}

	function drawGraph(error, data, selector, width, height) {
	console.log(data);

	var svg = d3.select(selector).append("svg")
	.attr("width", width)
	.attr("height", height),
	margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = svg.attr("width") - margin.left - margin.right,
	height = svg.attr("height") - margin.top - margin.bottom;


	var x = d3.scaleTime().range([0, width]),
	y = d3.scaleLinear().range([height, 0]),
	z = d3.scaleOrdinal(d3.schemeCategory10);

	var stack = d3.stack();

	var area = d3.area()
	.x(function (d, i) {
	return x(d.data.date);
	})
	.y0(function (d) {
	return y(d[0]);
	})
	.y1(function (d) {
	return y(d[1]);
	});

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var keys = data.columns.slice(1);

	x.domain(d3.extent(data, function (d) {
	return d.date;
	}));

	z.domain(keys);
	stack.keys(keys);

	console.log(stack(data))

	var layer = g.selectAll(".layer")
	.data(stack(data))
	.enter().append("g")
	.attr("class", "layer");

	layer.append("path")
	.attr("class", "area")
	.style("fill", function (d) {
	return z(d.key);
	})
	.attr("d", area);

	layer.filter(function (d) {
	return d[d.length - 1][1] - d[d.length - 1][0] > 0.01;
	})
	.append("text")
	.attr("x", width - 6)
	.attr("y", function (d) {
	return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2);
	})
	.attr("dy", ".35em")
	.style("font", "10px sans-serif")
	.style("text-anchor", "end")
	.text(function (d) {
	return d.key;
	});

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	g.append("g")
	.attr("class", "axis axis--y")
	.call(d3.axisLeft(y).ticks(10, "%"));
	}

	d3.csv("market_shares.csv", type2, function (error, data) {
	let stackedByDate = {}
	let drugSet = new Set();
	let defaultDrugMarketShareProp = {};
	let newData = []

	data.forEach(function (item, index) {
	drugSet.add(item.drug);
	stackedByDate[item.date] = {};
	});

	let drugNames = [...drugSet];

	drugNames.forEach(function (item, index) {
	defaultDrugMarketShareProp[item] = 0;
	});

	data.forEach(function (item, index) {
	stackedByDate[item.date] = Object.assign({}, defaultDrugMarketShareProp);
	});

	data.forEach(function (item, index) {
	stackedByDate[item.date][item.drug] = item.market_share;
	});

	Object.keys(stackedByDate).forEach(function (key) {
	hash = {}
	hash['date'] = new Date(key);
	Object.keys(stackedByDate[key]).forEach(function (innerKey) {
	hash[innerKey] = stackedByDate[key][innerKey]
	});
	newData.push(hash);
	});

	newData.columns = drugNames;
	newData.columns.unshift('date');

	drawGraph(error, newData, "#div2", 960, 500);
	});

	</script>
date	drug	market_share
2016-01-01	insulin lispro	.01
2016-01-01	alogliptin	0.001323754341
2016-01-01	sitagliptin	.01
2016-01-01	canagliflozin	0.02842158621
2016-01-01	glimepiride	0.05668845799
2016-01-01	repaglinide	0.0005768749342
2016-01-01	insulin glargine	.01
2016-01-01	metformin	0.4972895171
2016-01-01	mifepristone	.02
2016-01-01	exenatide	.02
2016-01-01	bromocriptine	0.0002109506723
2016-01-01	pioglitazone	0.02324500184
2016-01-01	metformin hydrochloride	0.392074889
2016-02-01	saxagliptin	.02
2016-02-01	pioglitazone	0.02247815103
2016-02-01	exenatide	0.03
2016-02-01	repaglinide	0.0006204220565
2016-02-01	metformin hydrochloride	0.394153624
2016-02-01	sitagliptin	.08
2016-02-01	insulin lispro	.05
2016-02-01	canagliflozin	0.02907988245
2016-02-01	metformin	0.4933502396
2016-02-01	insulin glargine	.02
2016-02-01	bromocriptine	0.0002076549233
2016-02-01	mifepristone	.02
2016-02-01	alogliptin	0.001364306972
2016-02-01	glimepiride	0.05857620484
2016-03-01	canagliflozin	0.02908102306
2016-03-01	bromocriptine	0.000195238081
2016-03-01	metformin	0.4966376769
2016-03-01	alogliptin	0.00133532899
2016-03-01	insulin glargine	.03
2016-03-01	sitagliptin	.04