* {

box-sizing: border-box;

.row {

display: flex;

.column {

padding: 5px;

<h4 style="text-align:left; font-family:sans-serif">Legislation restricting voting rights has increased dramatically over the past decade</h4>

<font size = 2 style="text-align:left; font-family:sans-serif;">The number of <font color= "#4D688C">bills introduced</font> and <font color= "#D9737B">bills passed</font> to restrict voting have both <strong>increased over 300% since 2013</strong></h6>

<div class = "column">

<div class = "row">

${plot1}

</div>

<br>

<div class="row">

</div>

</div>

plot1 =

var margin = {top: 60, right: 20, bottom: 30, left: 50},

width = 700 - margin.left - margin.right,

height = 365 - margin.top - margin.bottom;

const svg = d3.select(DOM.svg(width, height));

let x = d3.scaleLinear() //changed from scaleTime to scaleLinear

.domain(d3.extent([{date: 2013, value: 92}, {date: 2014, value: 83}, {date: 2015, value: 113}, {date:2016, value: 77}, {date:2017, value: 99}, {date:2018, value: 70}, {date:2019, value: 61}, {date:2020, value: 56}, {date:2021, value: 440}], d => d.date))

.range([margin.left, width - margin.right])

let y = d3.scaleLinear() //changed from scaleTime to scaleLinear

.domain([0, d3.max([{date: 2013, value: 92}, {date: 2014, value: 83}, {date: 2015, value: 113}, {date:2016, value: 77}, {date:2017, value: 99}, {date:2018, value: 70}, {date:2019, value: 61}, {date:2020, value: 56}, {date:2021, value: 440}], d => d.value)]).nice()

.range([height - margin.bottom, margin.top])

let xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(d3.format("d")))//changed the tick format to allow the scale to display correctly

let yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y))

.call(g => g.select(".domain").remove())

.call(g => g.select(".tick:last-of-type text").clone()

.attr("x", 3)

.attr("text-anchor", "start")

.attr("font-weight", "bold")

.text([{date: 2013, value: 92}, {date: 2014, value: 83}, {date: 2015, value: 113}, {date:2016, value: 77}, {date:2017, value: 99}, {date:2018, value: 70}, {date:2019, value: 61}, {date:2020, value: 56}, {date:2021, value: 440}].y))

//creating line parameters

let line = d3.line()

.defined(d => !isNaN(d.value))

.x(d => x(d.date))

.y(d => y(d.value))

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

let path = svg.append("path")

.attr("d", line([{date: 2013, value: 92}, {date: 2014, value: 83}, {date: 2015, value: 113}, {date:2016, value: 77}, {date:2017, value: 99}, {date:2018, value: 70}, {date:2019, value: 61}, {date:2020, value: 56}, {date:2021, value: 440}]))

.attr("stroke", "#4D688C")

.attr("stroke-width", "3") //changed the width of the line

.attr("class", "line")

.attr("fill", "none");

let path2 = svg.append("path") //created a new line to represent votes passed

.attr("d", line([{date: 2013, value: 9}, {date: 2014, value: 4}, {date: 2015, value: 1}, {date:2016, value: 14}, {date:2017, value: 5}, {date:2018, value: 6}, {date:2019, value: 7}, {date:2020, value: 6}, {date:2021, value: 34}]))

.attr("stroke", "#D9737B")

.attr("stroke-width", "3") //changed the width of the line

.attr("class", "line")

.attr("fill", "none");

var totalLength = path.node().getTotalLength()

//animate first line

d3.select("#startLine").on("click", function() {

path

.attr("stroke-dasharray", totalLength + " " + totalLength)

.attr("stroke-dashoffset", totalLength)

.transition()

.duration(10000) //i changed this section to slow down the animation

.ease(d3.easeLinear)

.attr("stroke-dashoffset", 0)

//animate second line. my creation

path2

.attr("stroke-dasharray", totalLength + " " + totalLength)

.attr("stroke-dashoffset", totalLength)

.transition()

.duration(10000) //changed this section to slow down the animation

.ease(d3.easeLinear)

.attr("stroke-dashoffset", 0)

})

return svg.node();

}