Trying with D3.js

Trying with D3.js.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Trying D3.js</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <style>
      
      div.barChart {
        display: inline-block;
        width: 20px;
        height: 75px;
        background-color: powderblue;
        margin-right: 10px;
      };
      
      .axis path,
      .axis line {
        fill: none;
        stroke: powderblue;
        shape-rendering: crispEdges;
      }
      
      .axis text {
        font-family: monospace;
        font-size: 1rem;
      }

</style>
  </head>

<body>
      
    
    <script>
//////////////////////////////////////////////////////////      
      // # Exercise 3: Scaling the Scatterplot, and Adding axes
      
      var svgW3 = 600;
      var svgH3 = 400;
      
      var dataset3 = [
        [5, 20], 
        [480, 90],
        [250, 50],
        [100, 33],
        [330, 95],
        [410, 12],
        [475, 44],
        [25, 67],
        [85, 21],
        [220, 88],
        [1000, 150]
      ];
      
      
      var dynamicDataset = [];
      var numDataPoints = 50;
			var xRange = Math.random() * 1000;
			var yRange = Math.random() * 1000;

for (var i = 0; i < numDataPoints; i++) {
          var newNumber1 = Math.round(Math.random() * xRange);
          var newNumber2 = Math.round(Math.random() * yRange);
          dynamicDataset.push([newNumber1, newNumber2]);
      }
      
      
      // 1. create scales function      
      var padding = 30;
      
      // *** In D3 v4 it is no longer named d3.scale.linear(). Use d3.scaleLinear() instead.
      var xScale = d3.scaleLinear()
      							.domain([0, d3.max(dynamicDataset, function(d){ return d[0]; })])
      							.range([padding, svgW3 - padding * 3]);
      
      var yScale = d3.scaleLinear()
      							.domain([0, d3.max(dynamicDataset, function(d){ return d[1]; })])
      							.range([svgH3 - padding, padding]);
      
      var rScale = d3.scaleLinear()
      							.domain([0, d3.max(dynamicDataset, function(d){ return d[1]; })])
      							.range([2, 5])

//labeling!
      svg3.selectAll("text")
      		.data(dynamicDataset)
      		.enter()
      		.append("text")
      		
      		.text(function(d){
        		return d[0] + "," + d[1];
      })
      // 3. then fix the position (x & y)
      		.attr("x", function(d){
        		return xScale(d[0]);
      })
      		.attr("y", function(d){
        		return yScale(d[1]);
      })
      
      		.attr("font-family", "monospace")
      		.attr("font-size", "1rem")
      		.attr("fill", "lightsalmon");
      
      
      //** Adding Axes

// X Axis
      var xAxis = d3.axisBottom()
      							.scale(xScale)
      							.ticks(6); //set rough # of ticks      
      
      svg3.append("g")
      		.attr("class", "axis") //assign "axis" class
      		.attr("transform", "translate(0, "+ (svgH3 - padding) +")")
      		.call(xAxis);
      
      //Y Axis
      var yAxis = d3.axisLeft()
      							.scale(yScale)
      							.ticks(8);
      
      svg3.append("g")
      		.attr("class", "axis")
      		.attr("transform", "translate("+ padding +", 0)")
      		.call(yAxis);
      
      
      //** One more thing: Formatting Tick Labels
      var formatAsPercentage = d3.format(".1%");
      xAxis.tickFormat(formatAsPercentage);

//////////////////////////////////////////////////////////      
      // # Exercise 2: Making a scatterplot 
      
      //*Each of those “point” elements will be another array, with just two values: one for the x value, and one for y.
      //*With the row [5, 20], for example, we’ll use 5 as the x value, and 20 for the y.
//       var dataset2 = [
//         [5, 20], 
//         [480, 90],
//         [250, 50],
//         [100, 33],
//         [330, 95],
//         [410, 12],
//         [475, 44],
//         [25, 67],
//         [85, 21],
//         [220, 88]
//       ];      
      
//       var svgW2 = 500;
//       var svgH2 = 100;
      
//       var svg2 = d3.select("body")
//       						.append("svg")
//       						.attr("width", svgW2)
//       						.attr("height", svgH2);
      
//       svg2.selectAll("circle")
//       		.data(dataset2)
//       		.enter()
//       		.append("circle")
//       		.attr("cx", function(d){
//         					return d[0]; //the x in [x, y]
//       })
//       		.attr("cy", function(d){
//         					return d[1]; //the y in [x, y]
//       })
//       		.attr("r", function(d){
//         					return Math.sqrt(svgH2 - d[1]);
//       });
      
//       //*labeling!
//       svg2.selectAll("text")
//       		.data(dataset2)
//       		.enter()
//       		.append("text")
//       		.text(function(d){
//         		return d[0] + "," + d[1];
//       })
//       		.attr("x", function(d){
//         		return d[0];
//       })
//       		.attr("y", function(d){
//         		return d[1];
//       })
      
//       		.attr("font-family", "monospace")
//       		.attr("font-size", "1rem")
//       		.attr("fill", "coral");
      
      
      
//////////////////////////////////////////////////////////      
      // # Exercise 1: Types of Data + Making a bar chart      
//       var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
//                 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
      
//       d3.select("body").selectAll("div")
//       	.data(dataset)
//       	.enter()
//       	.append("div")
//       	.attr("class", "barChart")
//       	.style("height", function(d) {
//         	var barHeight = d * 5;
//         	return barHeight + "px";
//       });
      
      
//       //*create SVG element!
//       var svgW = 500;
//       var svgH = 200;
//       var barPadding = 1;
      
      
//       var svg = d3.select("body")
//       						.append("svg")
//       						.attr("width", svgW)
//       						.attr("height", svgH);
      
//       //*Weird, yes, but stay with me. With D3, you always have to first select whatever it is you’re about to act on, even if that selection is momentarily empty.
//       //*create bars!
//       svg.selectAll("rect")
//       	.data(dataset)
//       	.enter()
//       	.append("rect")
//       	.attr("x", function(barHeight, barOrder){ //usually people write it as (d, i)
//         // return barOrder * 21; //Bar width of 20 plus 1 for padding
//         return barOrder * (svgW / dataset.length);
//       })
//       	.attr("y", function(barHeight){
//         	return svgH - (barHeight * 4);
//       })
//       	.attr("width", svgW / dataset.length - barPadding)
//       	.attr("height", function(barHeight){
//         	return barHeight * 4;
//       })
//       	.attr("fill", function(barColor){
//         	return "rgb(255, 200, " + (barColor * 10) +")";
//       });
      
//       //*create labels!
//       svg.selectAll("text")
//       	.data(dataset)
//       	.enter()
//       	.append("text")
//       	.text(function(d){
//         	return d;
//       })
//       	.attr("x", function(d, i){
//         	return i * (svgW / dataset.length) + (svgW / dataset.length - barPadding) / 2;
//       })
//       	.attr("y", function (d){
//         	return svgH - (d * 4) + 14;
//       })
//       	.attr("font-family", "monospace")
//       	.attr("font-size", "1rem")
//       	.attr("fill", "cornsilk")
//       //*centering the text in the label, then changing x and y
//       	.attr("text-anchor", "middle"); 
      
      
      
//////////////////////////////////////////////////////////      
      // # An SVG Primer + Drawing SVGs
//       var w = 500;
//       var h = 50;
      
//       var svvg = d3.select("body")
//       	.append("svg")
//       	.attr("width", w)
//       	.attr("height", h);
      
//       var dataset = [5, 10, 15, 20, 25];
      
//       var circles = svvg.selectAll("circle")
//       	.data(dataset)
//       	.enter()
//       	.append("circle");
      
//       circles.attr("cx", function(d, i){
//         return (i * 50) + 25;
//       })
//       .attr("cy", h/2)
//       .attr("r", function(d){
//         return d;
//       })
//       .attr("fill", "powderblue")
//       .attr("stroke", "peachpuff")
//       .attr("stroke-width", function(d) {
//         return d * 0.5;
//       });

//////////////////////////////////////////////////////////
//       // # The Power of data()
//       // for example, random data:
//       var dataset = [];
//       for (var i = 0; i < 25; i++) {
//         var newNumber = Math.round(Math.random() * 30);
//         dataset.push(newNumber);
//       };
      
//       d3.select("body").selectAll("div")
//       	.data(dataset)
//       	.enter()
//       	.append("div")
//       	.attr("class", "barChart")
//       	.style("height", function(d){
//         	var d2 = d * 5;
//         	return d2 + "px";
//       });
      
      
      
//////////////////////////////////////////////////////////
// ### Checking Point:
// 1. Preparing the data
// 2. d3 and select and selectAll
// 3. enter() — magic!
// 4. append() --> create the element you want
// 5. attr(), and / or style() it.
 
//////////////////////////////////////////////////////////
//       // # Drawing divs
//       var AMADataset = [45, 10, 15, 20, 25, 34, 2, 44, 32];
//       // *Remember: yes, "div" doesn't exist (yet). 
// 			// *Because we have enter(), a truly magical method.
//       d3.select("body").selectAll("div")
//       	.data(AMADataset)
//       	.enter()
//       	.append("div")
//       	.attr("class", "barChart")
//       	.style("height", function(LetsGetANewHeight){
//         	var andGetHigher = LetsGetANewHeight * 5;
//         	return andGetHigher + "px";
//       });
      
      
      
//////////////////////////////////////////////////////////
//       // # Using your data
//       var dataset = [5, 10, 15, 20, 25];
      
//       d3.select("body").selectAll("p")
//       	.data(dataset)
//       	.enter()
//       	.append("p")
//       	// *anonymous function
//       	.text(function(showMeTheData) {
//               return "Meowy, " + showMeTheData;
//               })     
//       	// *The reason for this syntax is that .text(), attr(), and many other D3 methods take a function as an argument. 
      
//       	// and it's not only text()...
//       	// you can change the color like this:
// //       	.style("color", "salmon");
//       	// or this:
// 				.style("color", function(showMeTheData){
//         if (showMeTheData > 15) {
//           return "salmon";
//         } else {
//           return "gold";
//         }
//       });
      
      
//////////////////////////////////////////////////////////
//       // # Binding Data
//       var dataset = [5, 10, 15, 20, 25];
      
//       d3.select("body").selectAll("p")
//       	.data(dataset)
//       	.enter()
//       	.append("p")
//       	.text("I am a new paragraph!:3");
      
//////////////////////////////////////////////////////////      
// // # Try it out      
//       d3.select("body")
//       	.append("p")
//       	.text("I am so new!")
//       	.style("color", "salmon");

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

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