xxxxxxxxxx<meta charset="utf-8"><html><!-- Example Based on https://blockbuilder.org/f94f/5554bf0a6874a64f46deacf3448ee5c8 --><!-- Example Based on https://bl.ocks.org/adgramigna/cd9fecfd898e3aa760fbc6f6e0fe01b7 --><!-- Example Based on https://bl.ocks.org/jo6gauri/7b011dea8417e5f995ed685899a84e25 --><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 transformData(data) { var newData = []; data.forEach(function (d) { newData.push({ occupation: d.key, year: d.year, view: +d.value, speaker: d.main_speaker, comments: +d.comments, duration: +d.duration_min }); }) return newData; } 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 area = d3.area() .x(function (d) { // console.info('in area function', d); return x(d.data.month); }) .y0(function (d) { return y(d[0]); }) .y1(function (d) { return y(d[1]); }) .curve(d3.curveBasis); 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