d3 notes

Submitted by code_admin on Wed, 08/28/2019 - 15:48

https://github.com/d3/d3
https://observablehq.com/@d3/force-directed-graph
https://thecodingtutorials.blogspot.com/2012/07/introduction-to-d3.html

Some messing around with animation

  1. <html>
  2.  
  3. <head>
  5.  
  6. <script type="text/javascript">
  7. window.onload = function()
  8. {
  9.  //Create the SVG graph.
  10.  var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");
  11.  
  12.  
  13.  
  14.  //Add data to the graph and call enter.
  15.  var dataEnter = svg.selectAll("rect").data([8, 22, 31, 36, 48, 17, 25]).enter();
  16.  
  17.  
  18.  
  19.  //The height of the graph (without text).
  20.  var graphHeight = 450;
  21.  
  22.  //The width of each bar.
  23.  var barWidth = 80;
  24.  
  25.  //The distance between each bar.
  26.  var barSeparation = 10;
  27.  
  28.  //The maximum value of the data.
  29.  var maxData = 50;
  30.  
  31.  
  32.  
  33.  //The actual horizontal distance from drawing one bar rectangle to drawing the next.
  34.  var horizontalBarDistance = barWidth + barSeparation;
  35.  
  36.  
  37.  //The horizontal and vertical ofsvg.selectAll("rect")fsets of the text that displays each bar's value.
  38.  var textXOffset = horizontalBarDistance / 2 - 12;
  39.  var textYOffset = 20;
  40.  
  41.  
  42.  //The value to multiply each bar's value by to get its height.
  43.  var barHeightMultiplier = graphHeight / maxData;
  44.  
  45.  //The actual Y position of every piece of text.
  46.  var textYPosition = graphHeight + textYOffset;
  47.  
  48.  
  49.  //Draw the bars.
  50.  dataEnter.append("rect").attr("x", function(d, i)
  51.  {
  52.   return i * horizontalBarDistance;
  53.  }).attr("y", function(d)
  54.  {
  55.   return graphHeight - d * barHeightMultiplier;
  56.  }).attr("width", function(d)
  57.  {
  58.   return barWidth;
  59.  }).attr("height", function(d)
  60.  {
  61.   return d * barHeightMultiplier;
  62. }).attr("id", function(d, i)
  63.  {
  64.   return "dd" + i;
  65.  });
  66.  
  67.  
  68.  
  69.  //Draw the text.
  70.  dataEnter.append("text").text(function(d)
  71.  {
  72.   return d;
  73.  }).attr("x", function(d, i)
  74.  {
  75.   return i * horizontalBarDistance + textXOffset;
  76.  }).attr("y", textYPosition);
  77.  
  78.  var mySquare=svg.append("rect")
  79.   .attr("x",60)
  80.   .attr("y",60)
  81.   .attr("width",60)
  82.   .attr("height",60)
  83.   .attr("id",function(d, i)
  84.   {
  85.    console.log('d',i)
  86.    return "dd7";
  87.   });
  88.  
  89.   mySquare
  90.     .transition()
  91.     .attr("x",320)
  92.  
  93.     mySquare
  94.       .transition()
  95.       .attr("width",120); // will make it bigger
  96.  
  97.     mySquare
  98.       .style("fill","blue") // if the fill is originally left blank and comes
  99.                              //  from a style sheet, it will start as black
  100.       .transition()
  101.       .style("fill","blue");
  102.  
  103.     mySquare
  104.       .transition()
  105.       .style("opacity",0.3);
  106.  
  107.     var right = [false,false,false,false,false,false,false,false,false,false]
  108.  
  109.     var mof = function(cur, i) {
  110.       console.log(cur, i)
  111.       var d = 0
  112.       var w = 100
  113.       if (right[i]) {
  114.         d = 320 + (i * w)
  115.       } else {
  116.         d = 0 + (i * w)
  117.       }
  118.       right[i] = !right[i]
  119.       svg.select("#dd" + i).transition().attr("x",d);
  120.       // mySquare.transition().attr("x",d);
  121.     }
  122.  
  123.     svg.selectAll("rect").on("mouseover", mof)
  124.  
  125. }
  126.  
  127.  
  128.  
  129.  
  130.  
  131. </script>
  132.  
  133. </head>
  134.  
  135. <body>
  136.  
  137. </body>
  138.  
  139. </html>

Tags

RJM Article Type
Work Notes