Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>D3 Example</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  <p> The following is the D3 example of Scatter Plot</p>
  <script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var dataset = [
           [ 1,   10 ],
           [ 2,   20 ],
           [ 3,   30 ],
           [ 4,   40 ],
           [ 5,   50 ],
           [ 6,   60 ],
           [ 7,   70 ],
           [ 8,   80 ],
           [ 9,   90 ],
           [ 10,  100]
       ];
var w = 500;
var h = 100;
​
​
var xScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) { return d[0]; })])
        .range([0, w]);
​
var yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) { return d[1]; })])
        .range([0, h]);
​
var svg = d3.select("body")
      .append("svg")
      .attr("height", h)
      .attr("width", w);
​
      svg.selectAll("circle")
         .data(dataset)
         .enter()
         .append("circle")
         .attr("cx", function (d) {
             return xScale(d[0]);
         })
         .attr("cy", function(d) {
             return yScale(d[1]);
         })
         .attr("r", function (d) {
             return 2;
             return Math.sqrt(h-(d[1]));
         });
​
      svg.selectAll("text")
         .data(dataset)
         .enter()
         .append("text")
         .text(function (d) {
             return d[0]+","+d[1];
         })
         .attr("x", function (d) {
             return xScale(d[0]);
         })
         .attr("y", function (d) {
             return yScale(d[1]);
         })
         .attr("font-size", "11px")
         .attr("fill", "red");
​
​
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
HungryGeneralpro
0viewers