CODEWITHSUNDEEP
javascriptd3.jssvg
Edgar Kiljak
Edgar Kiljak

Reputation: 1190

d3.js interpolation doesn't work

As I'm progressing through freeCodCamp front-end track I'm currently working on Pomodoro clock(session length, break length). I have some design in mind, but for this I have to learn d3.js. I'm understand that I have to provide minimun and maximun and the start and end color and let the interpolation do the rest.

Using this plugin: https://github.com/d3/d3-interpolate

<!DOCTYPE html>
<html lang="eng">
    <head>
        <meta charset="utf-8">
        <title>D3 test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <script type="text/javascript" src="d3/d3-interpolate.js"></script>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
    <script type="text/javascript">



        var dataset = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
            14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
            24, 18, 25, 9, 3];


        var color = d3.scale.linear()
            .domain([3, 29])
            .range(["#FDFFCB", "#232942"])
            .interpolate(d3.interpolateHcl);


        d3.select("body").selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .attr("class", "bar")
            .style("height", function(d){
                var barHeight = d * 5;
                return barHeight + "px";
            });
            .style("color", function(d) {
                return color(d) });
        })




        console.log(d3.selectAll("div"))

    </script>

    </body>
</html>

This doesn't work. What am I doing wrong?

Upvotes: 1

Views: 717

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

That minilibrary is part of D3 v4.x, not D3 v3. As you can see in the page you linked:

You can also load directly from d3js.org, either as a standalone library or as part of D3 4.0. (emphasis mine)

Since you are using D3 v3.x you don't need that.

Also, change color to background-color when styling your divs.

Here is your working code with that change:

var dataset = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
  14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
  24, 18, 25, 9, 3
];

var color = d3.scale.linear()
  .domain([3, 29])
  .range(["#FDFFCB", "#232942"])
  .interpolate(d3.interpolateHcl);

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")
  .attr("class", "bar")
  .style("height", function(d) {
    var barHeight = d * 5;
    return barHeight + "px";
  })
  .style("background-color", function(d) {
    return color(d)
  });
<script src="https://d3js.org/d3.v3.min.js"></script>

Upvotes: 1

Related Questions