timeline = { const width = 900; const height = 2050; const font = "Futura" const svg = d3.select(DOM.svg(width,height)); var lastYear = '1969'; var arr = []; var eras = ["Foundation", "Golden", "Millenial", "Zoomer"]; const chartBackground = svg.append("rect") .attr("id", "chart-background") .attr("fill", "#edf3fa") // fallback for CSS .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); svg.append('text') .attr("x", width/8) .attr("y", 70) .text("Hip-Hop in the United States") .attr("font-family", font) .style("font-size", "30px") .attr("font-weight", "bold"); svg.append('text') .attr("x", width/8) .attr("y", 105) .text("A Brief Timeline") .attr("font-family", font) .style("fill", "gray") .style("font-size", "22px"); svg.append('line') .attr("x1", width/4) .attr("y1", 167) .attr("x2", width/4) .attr("y2", height - 142) .attr("stroke-width", ".3px") .style("stroke", "#828a94"); for (var i = 0; i lastYear) { svg.append("text") .attr("x", width/4 - 50) .attr("y", 193+(20*i)) .text(csv[i]["Date"]) .attr("font-family", font) .style("font-size", "12px"); lastYear = csv[i]["Date"]; if (lastYear == "1978" || lastYear == "1989" || lastYear == "1999" || lastYear == "2013" || lastYear == "2020"){ arr.push(193+(20*i)) } } svg.append("text") .attr("x", width/4 + 20) .attr("y", 193+(20*i)) .attr("class", "hover") .attr("id", "event".concat(String(i))) .text(csv[i]["Event"]) .attr("font-family", font) .style("font-size", "9px"); } arr.push(height-142); for (var i = 0; i<4; i++) { svg.append("line") .attr("x1", (5/6)*width) .attr("y1", arr[i]) .attr("x2", (5/6)*width) .attr("y2", arr[i+1] - 10) .attr("id", "eraLine".concat(String(i))) .style("stroke", "#446285"); svg.append("text") .attr("x", (5/6)*width + 5) .attr("y", arr[i] + 14) .style("stroke", colors_final[i]) .attr("font-size", "14px") .attr("font-weight", "bold") .attr("font-family", font) .attr("class", "era".concat(String(i))) .text(eras[i]); for(var j = 0; j<10; j++) { if (i == 0) { svg.append("text") .attr("x", (5/6)*width + 5) .attr("y", arr[i] + 28 + 12*j) .attr("font-size", "10px") .attr("font-family", font) .attr("class", "era".concat(String(i))) .text(foundation[j]); } else if (i == 1) { svg.append("text") .attr("x", (5/6)*width + 5) .attr("y", arr[i] + 28 + 12*j) .attr("font-family", font) .attr("font-size", "10px") .attr("class", "era".concat(String(i))) .text(golden[j]); } else if (i == 2) { svg.append("text") .attr("x", (5/6)*width + 5) .attr("y", arr[i] + 28 + 12*j) .attr("font-family", font) .attr("font-size", "10px") .attr("class", "era".concat(String(i))) .text(millenial[j]); } else if (i == 3) { svg.append("text") .attr("x", (5/6)*width + 5) .attr("y", arr[i] + 28 + 12*j) .attr("font-family", font) .attr("font-size", "10px") .attr("class", "era".concat(String(i))) .text(zoomer[j]); } } } var indexx; svg.selectAll('.hover') .on("mouseover", function(d) { d3.select(this) .attr("fill", "gray"); if ((this.id).includes("event")) { d3.select("#".concat((this.id).replace("event", "circle"))) .attr("fill", "gray"); console.log("ok") indexx = parseInt(this.id.replace("event", '')) } else { d3.select("#".concat((this.id).replace("circle", "event"))) .attr("fill", "gray"); console.log("yippie") indexx = parseInt(this.id.replace("circle", '')) } if (csv[indexx]["Date"] <= "1988" && csv[indexx]["Date"] >= "1979" ){ d3.selectAll(".era0") .attr("fill", colors_final[0]); d3.select("#eraLine0") .style("stroke", "lavender"); } else if (csv[indexx]["Date"] <= "1998" && csv[indexx]["Date"] >= "1989" ){ d3.selectAll(".era1") .attr("fill", colors_final[1]); d3.select("#eraLine1") .style("stroke", "lavender"); } else if (csv[indexx]["Date"] <= "2012" && csv[indexx]["Date"] >= "1999" ){ d3.selectAll(".era2") .attr("fill", colors_final[2]); d3.select("#eraLine2") .style("stroke", "lavender"); } else if (csv[indexx]["Date"] >= "2013"){ d3.selectAll(".era3") .attr("fill", colors_final[3]); d3.select("#eraLine3") .style("stroke", "lavender"); } var xpos = parseFloat(d3.select(this).attr("x")) ; var ypos = parseFloat(d3.select(this).attr("y")); // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") // .attr("width", "160px") // .attr("height", "22px") // .attr("fill", "#f7f7f7") // tgrp.append("text") // .attr("x", 5) // .attr("y", 14) // .attr("text-anchor", "left") // .attr("font-family", "Times") // .attr("font-weight", "bold") // .attr("font-size", "11px") // .attr("fill", "black") // .text(function() { // // if (csv[indexx]["Date"] <= "1988" && csv[indexx]["Date"] >= "1979" ){ // // return "Foundation" // // } // // else if (csv[indexx]["Date"] <= "1998" && csv[indexx]["Date"] >= "1989" ){ // // return "Golden" // // } // // else if (csv[indexx]["Date"] <= "2012" && csv[indexx]["Date"] >= "1999" ){ // // return "Millenial" // // } // // else if (csv[indexx]["Date"] >= "2013"){ // // return "Zoomer" // // } // return csv[indexx]["Event Description"] //}) }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); d3.select(this) // see note above .transition().duration(1);// try changing these if ((this.id).includes("event")) { d3.select("#".concat((this.id).replace("event", "circle"))) .attr("fill", "#446285"); console.log("ok") d3.select(this) .attr("fill", "black"); } else if ((this.id).includes("circle")) { d3.select("#".concat((this.id).replace("circle", "event"))) .attr("fill", "black"); console.log("ok") d3.select(this) .attr("fill", "#446285"); } if (csv[indexx]["Date"] <= "1988" && csv[indexx]["Date"] >= "1979" ){ d3.selectAll(".era0") .attr("fill", "black"); d3.select("#eraLine0") .style("stroke", "#446285"); } else if (csv[indexx]["Date"] <= "1998" && csv[indexx]["Date"] >= "1989" ){ d3.selectAll(".era1") .attr("fill", "black"); d3.select("#eraLine1") .style("stroke", "#446285"); } else if (csv[indexx]["Date"] <= "2012" && csv[indexx]["Date"] >= "1999" ){ d3.selectAll(".era2") .attr("fill", "black"); d3.select("#eraLine2") .style("stroke", "#446285"); } else if (csv[indexx]["Date"] >= "2013"){ d3.selectAll(".era3") .attr("fill", "black"); d3.select("#eraLine3") .style("stroke", "#446285"); } // svg.selectAll('rect').remove(); // .attr("fill", function(d) { // if (+d.percent_change >= 0) { // if (checkbox_states.includes(d.Jurisdiction_2020)) { // if (checkbox_color == 1) { // return d.party; // } // else {return "#6ab89b" }// green // } // else { // //return "#ccebdb" // light green // return "#ededed" // } // } else { // if (checkbox_states.includes(d.Jurisdiction_2020)){ // if (checkbox_color == 1) { // return d.party; // } // else {return "#fc8181"} // red // } // else { // //return "#fadcdc" // light red // return "#ededed" // } // } }) return svg.node(); }