Home/ Questions/Q 6881443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:06:29+00:00

I am trying to write a tutorial about d3 and I found couple websites

  • 0

I am trying to write a tutorial about d3 and I found couple websites that can help but with not enough details.

I have the following code that outputs a bar chart: 

<html>
<head>
<div id="mainGraph">
        </div>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<script type="text/javascript">

var t = 1, // start time (seconds since epoch)
    v = 0, // start value (subscribers)
    data = d3.range(33).map(next); // starting dataset

 function next() {
   return {
    time: ++t,
     value: v = ~~Math.max(10, Math.min(80, v + 3 *( Math.random() - .5))
   };
}
setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

  var w = 40,
      h = 100;

  var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);

  var y = d3.scale.linear()
      .domain([0, 100])
     .rangeRound([0, h]);

     var chart = d3.select("body")
     .append("svg:svg")
     .attr("class", "chart")
     .attr("width", w * data.length + 10)
     .attr("height", h);

     chart.selectAll("rect")
     .data(data)
    .enter().append("svg:rect")
     .attr("x", function(d, i) { return x(i) + 5; })
     .attr("y", function(d) { return h - y(d.value) + 5; })
     .attr("width", w)
     .attr("height", function(d) { return y(d.value); });

     chart.append("svg:line")
     .attr("x1", 0)
     .attr("x2", w * data.length)
     .attr("y1", h + 5)
     .attr("y2", h + 5)
     .attr("stroke", "#000");





    </script>           
    </body>
    </html>

the problem that I am facing now is when I try to change the set of data so i am trying to put v in function of t like v = Math.exp (t)
this is not working and its giving me a black line only even though I changed the interval of max and min.
Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

    setInterval makes the code run every 1.5 seconds

       data.shift();

    Removes the first element of array data (which is filled with random numbers)

       data.push(next());

    Inserts a new random value at the end of the array. next() is a function that generates random numbers.

    So, in summary, data.push(next()); inserts a new random value at the end of array data

    • 0