D3 experiments

Learning D3.js

Experimental area.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
  body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 960px; height: 500px; position: relative;}
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
<p>Velit sit commodo consequat irure consequat ut esse veniam ut elit
proident labore est ullamco est.</p>

<p>Officia Lorem ad dolore cillum ipsum adipisicing veniam ad esse aute ad
adipisicing exercitation enim sit. Exercitation velit do
exercitation deserunt pariatur nostrud eu officia sint est commodo
reprehenderit do ipsum.</p>

<p>Aliqua sunt nostrud enim ut non sint nulla eiusmod nostrud anim consequat
tempor qui. Ex reprehenderit ex consectetur elit aliquip proident irure
cupidatat.</p>

<p>Incididunt sint sunt pariatur esse proident elit esse amet dolor dolore sit.
Ea consectetur cillum esse aliqua duis ullamco ex laboris
eiusmod excepteur id pariatur proident incididunt eu consequat magna.</p>
  
 <script>
  var p = d3.select("body")
    .selectAll("p")
    .data([12, 14, 18, 24, 36])
    .style("font-size", function(d) {return d + "px";})
    .text(function(d) {return d;});
  
  p.enter().append("p")
    .text(function(d) {return d;});
  
  p.exit().remove();
  
  d3.select("body")
    .transition()
    .duration(750)
    .delay(1000)
    .style("background-color", "lightgray");
</script>

https://d3js.org/d3.v4.min.js