Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">

  <script src="https://d3js.org/d3.v6.min.js" charset="utf-8"></script>
</head>

<body>
<svg id="chart"></svg>
  <script type="text/javascript">
    const width = 1000

    const data = [{
        "date": "1990-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 1500,
        "category": "OLIVIA"
      },
      {
        "date": "1990-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 1500,
        "category": "ELIZABETH"
      },
      {
        "date": "1990-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1500,
        "category": "JUSTIN"
      },
      {
        "date": "1990-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 1500,
        "category": "CHARLIE"
      },
      {
        "date": "1991-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 1200,
        "category": "OLIVIA"
      },
      {
        "date": "1991-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 1400,
        "category": "ELIZABETH"
      },
      {
        "date": "1991-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1300,
        "category": "JUSTIN"
      },
      {
        "date": "1991-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 1340,
        "category": "CHARLIE"
      },
      {
        "date": "1992-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 1000,
        "category": "OLIVIA"
      },
      {
        "date": "1992-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 1400,
        "category": "ELIZABETH"
      },
      {
        "date": "1992-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1120,
        "category": "JUSTIN"
      },
      {
        "date": "1992-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 1340,
        "category": "CHARLIE"
      },
      {
        "date": "1993-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 800,
        "category": "OLIVIA"
      },
      {
        "date": "1993-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 1374,
        "category": "ELIZABETH"
      },
      {
        "date": "1993-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1060,
        "category": "JUSTIN"
      },
      {
        "date": "1993-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 990,
        "category": "CHARLIE"
      },
      {
        "date": "1994-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 586,
        "category": "OLIVIA"
      },
      {
        "date": "1994-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 1224,
        "category": "ELIZABETH"
      },
      {
        "date": "1994-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1060,
        "category": "JUSTIN"
      },
      {
        "date": "1994-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 970,
        "category": "CHARLIE"
      },
      {
        "date": "1995-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 306,
        "category": "OLIVIA"
      },
      {
        "date": "1995-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 1224,
        "category": "ELIZABETH"
      },
      {
        "date": "1995-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1060,
        "category": "JUSTIN"
      },
      {
        "date": "1995-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 650,
        "category": "CHARLIE"
      },
      {
        "date": "1996-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 276,
        "category": "OLIVIA"
      },
      {
        "date": "1996-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 974,
        "category": "ELIZABETH"
      },
      {
        "date": "1996-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1040,
        "category": "JUSTIN"
      },
      {
        "date": "1996-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 390,
        "category": "CHARLIE"
      },
      {
        "date": "1997-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 176,
        "category": "OLIVIA"
      },
      {
        "date": "1997-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 774,
        "category": "ELIZABETH"
      },
      {
        "date": "1997-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1040,
        "category": "JUSTIN"
      },
      {
        "date": "1997-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 250,
        "category": "CHARLIE"
      },
      {
        "date": "1998-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 176,
        "category": "OLIVIA"
      },
      {
        "date": "1998-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 514,
        "category": "ELIZABETH"
      },
      {
        "date": "1998-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1028,
        "category": "JUSTIN"
      },
      {
        "date": "1998-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 254,
        "category": "CHARLIE"
      },
      {
        "date": "1999-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 84,
        "category": "OLIVIA"
      },
      {
        "date": "1999-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 504,
        "category": "ELIZABETH"
      },
      {
        "date": "1999-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 1028,
        "category": "JUSTIN"
      },
      {
        "date": "1999-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 242,
        "category": "CHARLIE"
      },
      {
        "date": "2000-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 84,
        "category": "OLIVIA"
      },
      {
        "date": "2000-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 514,
        "category": "ELIZABETH"
      },
      {
        "date": "2000-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 848,
        "category": "JUSTIN"
      },
      {
        "date": "2000-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 254,
        "category": "CHARLIE"
      },
      {
        "date": "2001-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 56,
        "category": "OLIVIA"
      },
      {
        "date": "2001-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 492,
        "category": "ELIZABETH"
      },
      {
        "date": "2001-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 828,
        "category": "JUSTIN"
      },
      {
        "date": "2001-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 290,
        "category": "CHARLIE"
      },
      {
        "date": "2002-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 76,
        "category": "OLIVIA"
      },
      {
        "date": "2002-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 492,
        "category": "ELIZABETH"
      },
      {
        "date": "2002-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 842,
        "category": "JUSTIN"
      },
      {
        "date": "2002-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 140,
        "category": "CHARLIE"
      },
      {
        "date": "2003-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 76,
        "category": "OLIVIA"
      },
      {
        "date": "2003-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 92,
        "category": "ELIZABETH"
      },
      {
        "date": "2003-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 834,
        "category": "JUSTIN"
      },
      {
        "date": "2003-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 118,
        "category": "CHARLIE"
      },
      {
        "date": "2004-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2004-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 94,
        "category": "ELIZABETH"
      },
      {
        "date": "2004-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 118,
        "category": "CHARLIE"
      },
      {
        "date": "2005-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2005-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 94,
        "category": "ELIZABETH"
      },
      {
        "date": "2005-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 894,
        "category": "JUSTIN"
      },
      {
        "date": "2006-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 78,
        "category": "ELIZABETH"
      },
      {
        "date": "2006-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 774,
        "category": "JUSTIN"
      },
      {
        "date": "2006-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 118,
        "category": "CHARLIE"
      },
      {
        "date": "2007-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 182,
        "category": "ELIZABETH"
      },
      {
        "date": "2007-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 554,
        "category": "JUSTIN"
      },
      {
        "date": "2007-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 104,
        "category": "CHARLIE"
      },
      {
        "date": "2008-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2008-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 182,
        "category": "ELIZABETH"
      },
      {
        "date": "2008-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 546,
        "category": "JUSTIN"
      },
      {
        "date": "2008-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 116,
        "category": "CHARLIE"
      },
      {
        "date": "2009-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2009-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 176,
        "category": "ELIZABETH"
      },
      {
        "date": "2009-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 166,
        "category": "CHARLIE"
      },
      {
        "date": "2010-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2011-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2011-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 154,
        "category": "ELIZABETH"
      },
      {
        "date": "2011-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 546,
        "category": "JUSTIN"
      },
      {
        "date": "2011-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 188,
        "category": "CHARLIE"
      },
      {
        "date": "2012-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2012-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 154,
        "category": "ELIZABETH"
      },
      {
        "date": "2012-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 346,
        "category": "JUSTIN"
      },
      {
        "date": "2012-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 174,
        "category": "CHARLIE"
      },
      {
        "date": "2013-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2013-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 154,
        "category": "ELIZABETH"
      },
      {
        "date": "2013-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 340,
        "category": "JUSTIN"
      },
      {
        "date": "2013-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 174,
        "category": "CHARLIE"
      },
      {
        "date": "2014-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2014-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2014-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 542,
        "category": "JUSTIN"
      },
      {
        "date": "2014-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 152,
        "category": "CHARLIE"
      },
      {
        "date": "2015-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2015-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2015-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 742,
        "category": "JUSTIN"
      },
      {
        "date": "2015-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 152,
        "category": "CHARLIE"
      },
      {
        "date": "2016-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2016-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2016-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 130,
        "category": "CHARLIE"
      },
      {
        "date": "2017-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2017-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 746,
        "category": "JUSTIN"
      },
      {
        "date": "2017-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 130,
        "category": "CHARLIE"
      },
      {
        "date": "2018-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2018-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2018-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 664,
        "category": "JUSTIN"
      },
      {
        "date": "2019-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2019-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2019-01-01T00:00:00.000Z",
        "name": "JUSTIN",
        "value": 462,
        "category": "JUSTIN"
      },
      {
        "date": "2019-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 124,
        "category": "CHARLIE"
      },
      {
        "date": "2020-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2020-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 124,
        "category": "CHARLIE"
      },
      {
        "date": "2021-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2021-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 146,
        "category": "CHARLIE"
      },
      {
        "date": "2022-01-01T00:00:00.000Z",
        "name": "OLIVIA",
        "value": 0,
        "category": "OLIVIA"
      },
      {
        "date": "2022-01-01T00:00:00.000Z",
        "name": "ELIZABETH",
        "value": 0,
        "category": "ELIZABETH"
      },
      {
        "date": "2022-01-01T00:00:00.000Z",
        "name": "CHARLIE",
        "value": 146,
        "category": "CHARLIE"
      }
    ]

    const duration = 250

    const n = 4

    const names = new Set(data.map(d => d.name))

    datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => d.name))
      .map(([date, data]) => [new Date(date), data])
      .sort(([a], [b]) => d3.ascending(a, b))

    function rank(value) {
      const data = Array.from(names, name => ({
        name,
        value: value(name)
      }));
      data.sort((a, b) => d3.descending(a.value, b.value));
      const zero_count = data.filter(d => (d.value <= 0 | d.value == undefined)).length
      for (let i = 0; i < data.length; ++i) {
        if (data[i].value <= 0 | data[i].value == undefined) {
          data[i].rank = n + n - zero_count - i - 1;
        } else {
          data[i].rank = i;
        }
      }
      return data;
    }

    const k = 10;

    function make_keyframes() {
      const keyframes = [];
      let ka, a, kb, b;
      for ([
          [ka, a],
          [kb, b]
        ] of d3.pairs(datevalues)) {
        for (let i = 0; i < k; ++i) {
          const t = i / k;
          keyframes.push([
            new Date(ka * (1 - t) + kb * t),
            rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)
          ]);
        }
      }
      // keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);
      return keyframes;
    }

    keyframes = make_keyframes()

    const nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)

    prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))

    next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))

    function color(d) {
      const scale = d3.scaleOrdinal(d3.schemeTableau10);
      if (data.some(d => d.category !== undefined)) {
        const categoryByName = new Map(data.map(d => [d.name, d.category]))
        scale.domain(Array.from(categoryByName.values()));
        return d => scale(categoryByName.get(d.name));
      }
      return d => scale(d.name);
    }

    function bars(svg) {
      let bar = svg.append("g")
        .attr("fill-opacity", 0.6)
        .selectAll("rect");

      return ([date, data], transition) => bar = bar
        .data(data.slice(0, n), d => d.name)
        .join(
          enter => enter.append("rect")
          .attr("fill", color(data))
          .attr("height", y.bandwidth())
          .attr("x", x(0))
          .attr("y", d => y((prev.get(d) || d).rank))
          .attr("width", d => x((prev.get(d) || d).value) - x(0)),
          update => update,
          exit => exit.transition(transition).remove()
          .attr("y", d => y((next.get(d) || d).rank))
          .attr("width", d => x((next.get(d) || d).value) - x(0))
        )
        .call(bar => bar.transition(transition)
          .attr("y", d => y(d.rank))
          .attr("width", d => x(d.value) - x(0)));
    }

    const currency_x_shift = 80
    const currency_y_shift = "0em"
    const company_x_shift = -10
    const company_y_shift = "0.4em"

    function labels(svg) {
      let label = svg.append("g")
        .style("font", "bold 26px var(--sans-serif)")
        .style("font-variant-numeric", "tabular-nums")
        .attr("text-anchor", "end")
        .selectAll("text");
      return ([date, data], transition) => label = label
        .data(data.slice(0, n), d => d.name)
        .join(
          enter => enter.append("text")
          .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`)
          .attr("y", y.bandwidth() / 2)
          .attr("x", company_x_shift)
          .attr("dy", company_y_shift)
          .text(d => d.name)
          .call(text => text.append("tspan")
            .attr("fill-opacity", 0.7)
            .attr("font-weight", "bold")
            .attr("x", currency_x_shift)
            .attr("dy", currency_y_shift)),
          update => update,
          exit => exit.transition(transition).remove()
          .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`)
          .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value)))
        )
        .call(bar => bar.transition(transition)
          .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`)
          .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value))))
    }

    function textTween(a, b) {
      const i = d3.interpolateNumber(a, b);
      return function(t) {
        this.textContent = formatNumber(i(t));
      };
    }

    formatNumber = d3.format("$,d")

    function axis(svg) {
      const g = svg.append("g")
        .attr("transform", `translate(0,${margin.top})`);

      const axis = d3.axisTop(x)
        .ticks(width / 160)
        .tickSizeOuter(0)
        .tickSizeInner(-barSize * (n + y.padding()));

      return (_, transition) => {
        g.transition(transition).call(axis);
        g.select(".tick:first-of-type text").remove();
        g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "white");
        g.select(".domain").remove();
      };
    }

    formatDate = d3.utcFormat("%Y")
    const barSize = 48
    const margin = ({
      top: 16,
      right: 6,
      bottom: 6,
      left: 0
    })
    const height = margin.top + barSize * n + margin.bottom
    const x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
    const y = d3.scaleBand()
      .domain(d3.range(n + 1))
      .rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])
      .padding(0.1)

    async function* chart() {
      console.log("Chart function has run")
      const svg = d3.select("#chart").attr("viewBox", [-150, 0, width + currency_x_shift + 150, height]);

      const updateBars = bars(svg);
      const updateAxis = axis(svg);
      const updateLabels = labels(svg);
      // const updateTicker = ticker(svg);

      yield svg.node();
      console.log("After the yield")
      for (const keyframe of keyframes) {
        const transition = svg.transition()
          .duration(duration)
          .ease(d3.easeLinear);

        // Extract the top bar’s value.
        x.domain([0, keyframe[1][0].value]);

        updateAxis(keyframe, transition);
        updateBars(keyframe, transition);
        updateLabels(keyframe, transition);
        // updateTicker(keyframe, transition);


        invalidation.then(() => svg.interrupt());
        await transition.end();
      }
      console.log("After the for")
    }
    console.log('Before chart')
    chart()
    console.log('After chart')

    const generatorObject = chart();
    generatorObject.next()
    generatorObject.next()

  </script>

</body>

</html>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console