function chart(data, yaxis, size, program) { var speed = 0 var svg = d3.select("#chart"), margin = {top: 50, left: 50, bottom: 5, right: -15}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; svg.append("text") .attr("class", "text") .attr("transform", "translate(" + ((width/2+50)) + "," + (950) + ")") .style("text-anchor", "middle") .style("font-size", "15px") .text("Episode Airing"); //some extra formatting variables var parseDate = d3.utcParse("%m/%d/%y") var Dec31 = parseDate("12/31/19") var Jan1 = parseDate("01/01/19") var tooltip = d3.select("body").append("div").attr("class", "toolTip").style("opacity", 0); var formatMonth = d3.timeFormat("%B") //scales for top graph var x = d3.scaleUtc() .range([1.5*margin.left, width - margin.right]) var y = d3.scaleLog() .range([height/2, margin.top]) var size_scatter = d3.scaleLinear() // What's in the data .range([ 3, 50]) var colorScale = d3.scaleOrdinal() .range(d3.schemeCategory10); //axis for top graph var xAxis = g => g .attr("transform", `translate(0,${height/2})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .selectAll("text") .attr("dy", ".35em") .attr("y", 10) .attr("x", 0) var yAxis = g => g .attr("transform", `translate(${75},0)`) .call(d3.axisLeft(y).ticks(10, ",.2r")); var yGrid = g => g .attr("transform", "translate(" + margin.left + ",0)") .call(d3.axisLeft(y).tickSize(-width + margin.right)) .call(g => g.selectAll("text").remove()) svg.append("g") .attr("class", "x-axis") svg.append("circle").attr("class", "block") .attr("cx", 0) .attr("cy", 0 + margin.top) .attr("r", 1); svg.append("g") .attr("class", "y-axis") .append("text") //.attr("transform", "rotate(-90)") .attr("y", height/2) .attr("x",600) .attr("dy", "1em") .style("text-anchor", "middle") .text(yaxis); // keeps default graph from overfilling var program = data3.filter(function(d){return d.programtitle=="Game of Thrones"}) // initial axis for second graph var xscale2 = d3.scaleBand() .range([75, width + 15]) .padding(0.1) var yScale_scatter2 = d3.scaleLog() .range([920,550]); var yAxis2 = d3.axisLeft().scale(yScale_scatter2).ticks(10, ",.2r"); var ya = svg.append("g").attr("class", "y-axis2").attr("transform", "translate(75, -20)").call(yAxis2); var xAxis2 = g => g .attr("class", "x-axis2") .attr("transform", `translate(-3,${900})`) .call(d3.axisBottom(xscale2).tickSizeOuter(1).tickFormat(d3.timeFormat("%b %d"))) .selectAll("text") .attr("dy", ".35em") .attr("y", 11) .attr("x", 5) .attr("transform", "rotate(20)"); svg.append("g").attr("class", "x-axis2"); //update update(data, yaxis, size, program); function update(data, yaxis, size, program) { //updated scales and axes for noth graphs x.domain([Jan1, Dec31]) xscale2.domain(program.map(d=>parseDate(d.date_est))) svg.selectAll(".x-axis").transition().duration(speed) .call(xAxis); svg.selectAll(".x-axis2").transition().duration(speed) .call(xAxis2); y.domain(d3.extent(data, d=> parseFloat(d[yaxis]))).nice() yScale_scatter2.domain(d3.extent(program, d=> parseFloat(d[yaxis]))).nice() svg.selectAll(".y-axis").transition().duration(speed) .call(yAxis); svg.selectAll(".y-axis2").transition().duration(speed) .call(yAxis2); svg.selectAll(".y-grid").transition().duration(speed) .call(yGrid); size_scatter.domain(d3.extent(data, d=> parseInt(d[size]))).nice() colorScale.domain(data.map(d => d.networktype)) //hovers for first graph var mouseover = function(d) { tooltip .style("opacity", 1) .delay(1000) tooltip.html("Program: "+d.programtitle+"
"+"Number of Episodes: " + d["Number of Episodes"] + "
Network: "+d.networkname +"
" + size + ": " +d3.format(",")(d[size])) .style("left", d3.event.pageX +70 + "px") .style("top", d3.event.pageY -90+ "px") d3.select(this) .attr("r", function(d) {return size_scatter(parseInt(d[size]))+10}) .style("stroke", "black") .style("opacity", .5) } var mousemove = function(d) { tooltip .html("Program: "+d.programtitle+"
"+"Number of Episodes: " + d["Number of Episodes"] + "
Network: "+d.networkname +"
" + size + ": " +d3.format(",")(d[size])) .style("left", d3.event.pageX + 70 + "px") .style("top", d3.event.pageY - 90 + "px") .style("display", "inline-block") d3.select(this) .attr("r", function(d) {return 1.1*size_scatter(parseInt(d[size]))+10}) .style("stroke", "black") .style("opacity", .5) } var mouseout = function(d) { tooltip .style("opacity", 0) d3.select(this) .style("stroke", "none") .style("opacity", 1) .attr("r", function(d) {return size_scatter(parseInt(d[size]))}) } //updated first graph var circle = svg.selectAll(".circle") .data(data, d => d.programtitle) circle.exit().remove(); circle = circle .enter().insert("g", ".block") .append("circle") .attr("class", "circle") .attr("fill", "#052B48") .merge(circle) circle.transition().duration(speed) .attr("cx", function(d) {return x(parseDate(d.date_est))}) // add accessor to horizontal scale .attr("cy", function(d) {return y(parseFloat(d[yaxis]))}) // add accessor function to vertical scale .attr("r", function(d) {return size_scatter(parseInt(d[size]))}) .attr("fill", d => colorScale(d.networktype)) .attr("fill-opacity", 0.4) svg.selectAll("circle") .on('mouseover', mouseover) .on('mousemove', mousemove) .on('mouseout', mouseout) //hovers for second graph var mouseover2 = function(d) { tooltip .style("opacity", 1) .html("Episode: "+d.episode+"
" + "Date Aired: " + d.date_est + "
Airing: "+d.airingtitle+"
"+"" + yaxis + ": " +d3.format(",")(d[yaxis])) .style("left", d3.event.pageX +90 + "px") .style("top", d3.event.pageY -300+ "px") //.style("display", "inline-block") d3.select(this) .style("stroke", "black") .style("opacity", .5) } var mousemove2 = function(d) { tooltip .style("opacity", 1) .html("Episode: "+d.episode+"
" + "Date Aired: " + d.date_est + "
Airing: "+d.airingtitle+"
"+"" + yaxis + ": " +d3.format(",")(d[yaxis])) .style("left", d3.event.pageX +50 + "px") .style("top", d3.event.pageY - 150 + "px") // .style("display", "inline-block") d3.select(this) .style("stroke", "black") .style("opacity", .5) } var mouseout2 = function(d) { tooltip .style("opacity", 0) d3.select(this) .style("stroke", "none") .style("opacity", 1) } //updated second graph var rects = svg.selectAll(".rect") .data(program) rects = rects .enter().insert("g", ".block") .append("rect") .attr("fill", "#004F6E") .merge(rects) .attr("x", (d,i) => xscale2(parseDate(d.date_est))) .attr("y", d => yScale_scatter2(parseFloat(d[yaxis]))) .attr("height", function(d) { return 900 - yScale_scatter2(parseFloat(d[yaxis]))}) .attr("width", xscale2.bandwidth()) .on('mouseover', mouseover2) .on('mousemove', mousemove2) .on('mouseout', mouseout2) var chart2 = circle.on('click', function(d) { d3.selectAll("rect").remove() d3.select("#title").remove() program = d.programtitle; var program_data = data3.filter(function(d){return d.programtitle==program}) chart.update(data, yaxis, size, program_data); svg.append("text") .attr("id", "title") .attr("class", "text") .attr("transform", "translate(" + ((width/2+50)) + "," + (height/2+60) + ")") .style("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold") .text(program) }) //handles updates on toggle var current_y = d3.select(".opt2").property("value") var current_size = d3.select(".opt").property("value") var opt = d3.select(".opt").on("change", function() { chart.update(data, current_y, this.value,program); }); var opt2 = d3.select(".opt2").on("change", function() { d3.selectAll("rect").remove(); chart.update(data, this.value, current_size, program); }); speed = 750 //speed for updates chart.update = update; } }