DV_Final_Project_Streamgraph

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



<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body {
            margin: 0 auto;
        }

h1,
        h2,
        p {
            margin: 20px;
        }

svg {
            margin-left: 10px;
            margin-right: 80px;
            margin-top: 20px;
            display: block;
        }

.axis {
            font: 20px sans-serif;
        }

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

.tooltip {
            position: absolute;
            width: 150px;
            height: 35px;
            pointer-events: none;
        }

body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

.bar {
            fill: steelblue;
        }

.bar:hover {
            fill: brown;
        }

.label {
            fill: black;
            font: 20px sans-serif;
            text-anchor: middle;
        }
    </style>
    <h1 align="center">Ted Talk Timeline</h1>
</head>

<body>
    <script>
        var filteredData = [];

function addMissingValues(data) {
            var occupationList = ["Architect", "Artist", "Designer", "Engineer", "Entrepreneur", "Inventor", "Musician",
                "Photographer", "Writer"
            ];
            var presentYear = [];
            var yearList = ["2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016",
                "2017"
            ]
            for (var i = 0; i < occupationList.length; i++) {
                presentYear = [];
                for (var j = 0; j < data.length; j++) {
                    if (occupationList[i] == data[j].occupation) {
                        presentYear.push(data[j].year);
                    }
                }

for (var k = 0; k < yearList.length; k++) {
                    var flag = 0;
                    for (var l = 0; l < presentYear.length; l++) {
                        if (yearList[k] == presentYear[l]) {
                            flag = 1;
                        }
                    }
                    if (flag == 0) {
                        data.push({
                            occupation: occupationList[i],
                            year: yearList[k],
                            view: 0,
                            speaker: '',
                            comments: 0,
                            duration: 0
                        })
                    }
                }
            }
            return data;

}

d3.csv('newData.csv', function (err, inputData) {
            if (err) console.log(err);

var flatData = transformData(inputData);
            //  console.log(flatData);

filteredData1 = flatData.filter(function (data) {
                return data.occupation == "Architect" ||
                    data.occupation == "Artist" ||
                    data.occupation == "Designer" ||
                    data.occupation == "Engineer" ||
                    data.occupation == "Entrepreneur" ||
                    data.occupation == "Inventor" ||
                    data.occupation == "Musician" ||
                    data.occupation == "Photographer" ||
                    data.occupation == "Writer";
            });

// filteredData1 = flatData.filter(function (data) {
            //     return data.occupation == "CEO" ||
            //         data.occupation == "Entrepreneur"
            // });

filteredData = addMissingValues(filteredData1);

//console.log(filteredData1);

var nested_data = d3.nest()
                .key(function (d) {
                    return d.year;
                })
                .entries(filteredData);

var mqpdata = nested_data.map(function (d) {
                var obj = {
                    month: new Date(d.key, 0, 1)
                }

d.values.forEach(function (v) {
                    obj[v.occupation] = v.view;
                })

return obj;
            })
            //  console.log(mqpdata);

buildStreamGraph(mqpdata);

})

function drawBarChart(key) {
            console.log(key);
            selectData = filteredData.filter(function (data) {
                return data.occupation == key
            });
            console.log(selectData);

var margin = {
                    top: 30,
                    right: 20,
                    bottom: 200,
                    left: 80
                },
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

var x = d3.scaleBand()
                .range([0, width], .1);

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

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y)
                .ticks(10);

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 + ")");

x.domain(selectData.map(function (d) {
                    return d.speaker;
                }))
                .paddingInner(0.1)
                .paddingOuter(0.5);
            y.domain([0, d3.max(selectData, function (d) {
                return d.comments;
            })]);

svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", ".15em")
                .attr("font-family", "sans-serif")
                .attr("font-size", "15px")
                .attr("transform", "rotate(-45)");

svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)  
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .text("Comments")
                .style("text-anchor", "end")
                .selectAll("text")
                .attr("font-family", "sans-serif")
                .attr("font-size", "10px");

svg.selectAll(".bar")
                .data(selectData)
                .enter().append("rect")
                .attr("class", "bar")
                .attr("x", function (d) {
                    return x(d.speaker);
                })
                .attr("width", x.bandwidth())
                .attr("y", function (d) {
                    return y(d.comments);
                })
                .attr("height", function (d) {
                    return height - y(d.comments);
                });
        }

function buildStreamGraph(mqpdata) {
            //   console.log(mqpdata);
            var data = mqpdata;
            var stack = d3.stack()
                .keys(["Architect", "Artist", "Designer", "Engineer", "Entrepreneur", "Inventor", "Musician",
                    "Photographer", "Writer"
                ])
                .order(d3.stackOrderNone)
                .offset(d3.stackOffsetWiggle);

var series = stack(data);

// console.log(series);

var width = 1300,
                height = 500;

var x = d3.scaleTime()
                .domain(d3.extent(data, function (d) {
                    return d.month;
                }))
                .range([100, width]);

// setup axis
            var xAxis = d3.axisBottom(x);

var y = d3.scaleLinear()
                .domain([0, d3.max(series, function (layer) {
                    return d3.max(layer, function (d) {
                        return d[0] + d[1];
                    });
                })])
                .range([height / 2, -200]);

var color = d3.scaleLinear()
                .range(["#51D0D7", "#31B5BB"]);

var color = d3.scaleOrdinal(d3.schemeCategory20);

var tooltip = d3.select("body").append("div")
                .attr("class", "tooltip");

var svg = d3.select("body").append("svg")
                .attr("id", "the_SVG_ID")
                .attr("width", width)
                .attr("height", height);

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

var xAxisGroup = svg.append("g").call(xAxis);

svg.selectAll("path")
                .data(series)
                .enter().append("path")
                .attr("d", area)
                .style("fill", function () {
                    return color(Math.random());
                })
                .on('mouseover', function (d) {
                    d3.select(this).style('fill', d3.rgb(d3.select(this).style("fill")).brighter());
                    d3.select("#major").text(d.key);
                    tooltip.transition()
                        .duration(700)
                        .style("opacity", 1);
                    tooltip.html(d.key)
                        .style("left", (d3.event.pageX + 5) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
                })
                .on('mouseout', function (d) {
                    d3.select(this).style('fill',
                        d3.rgb(d3.select(this).style("fill")).darker());
                    d3.select("#major").text("Mouse over");
                    tooltip.transition()
                        .duration(700)
                        .style("opacity", 0);
                })
                .on('click', function (d) {
                    var selected = d.key;
                    // console.log(selected);
                    d3.select("#the_SVG_ID").remove();
                    drawBarChart(selected);
                })

// svg.append("g")
            //     .attr("class", "axis axis--x")
            //     .attr("transform", "translate(0," + (height) + ")")
            //     .call(xAxis);

// var xAxisGroup = svg.append("g").call(xAxis);
        }
    </script>
</body>

</html>

https://d3js.org/d3.v4.min.js