D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #FFFDD0;
            font-weight: bold;
            font-family: "Times New Roman", Gadget, serif
        }
    </style>
</head>
​
<body>
    <script>
        // Feel free to change or delete any of the code you see in this editor!
        d3.csv("data.csv",function(data){
          
          data.forEach(function(d){
            d[0] = +d['x']
            d[1] = +d['y']
            d[2] = d['url']
          })
          
          console.log(data)
​
          var margin = {
                  top: 20,
                  right: 15,
                  bottom: 60,
                  left: 60
              },
              width = window.innerWidth - margin.left - margin.right,
              height = window.innerHeight - margin.top - margin.bottom;
​
          var x = d3.scaleLinear()
              .domain([0, (d3.max(data, function(d) {
                  return d[0];
              }) + 3)])
              .range([0, width]);
​
          var y = d3.scaleLinear()
              .domain([0, (d3.max(data, function(d) {
                  return d[1];
              }) + 3)])
              .range([height, 0]);
​
          var chart = d3.select('body')
              .append('svg:svg')
              .attr('width', width + margin.right + margin.left)
              .attr('height', height + margin.top + margin.bottom)
              .attr('class', 'chart')
​
          var main = chart.append('g')
              .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
              .attr('width', width)
              .attr('height', height)
              .attr('class', 'main')
​
          // draw the x axisd3.axisBottom(xRange)
          var xAxis = d3.axisBottom(x);
​
          main.append('g')
              .attr('transform', 'translate(0,' + height + ')')
              .attr('class', 'main axis date')
              .call(xAxis);
​
          // draw the y axis
          var yAxis = d3.axisLeft(y);
​
          main.append('g')
              .attr('transform', 'translate(0,0)')
              .attr('class', 'main axis date')
              .call(yAxis);
​
          var g = main.append("svg");
​
          var imgs = g.selectAll("image").data(data);
​
          var imgSize = {
              width: 50,
              height: 50
          }
​
          imgs.enter()
              .append("svg:image")
              .attr("xlink:href", function(d) {
                  return d[2]
              })
              .attr("x", function(d, i) {
                  return x((d[0])) - (imgSize.width / 2);
              })
              .attr("y", function(d) {
                  return y((d[1])) - (imgSize.height / 2);
              })
              .attr("width", imgSize.width)
              .attr("height", imgSize.height)
              .on("mouseover", function(d) {
​
                  g.append("title")
                      .html("<div style='text-align:center;'>Title <br>=========<br> X : XValue <br> Y : YValue <br> URL : URLValue</div>");
​
                  g.append("circle")
                      .attr("class", "test_circle")
                      .style("stroke", "black")
                      .style("fill", "transparent")
                      .style("pointer-events", "none")
                      .style("stroke-dasharray", ("3, 3"))
                      .attr("cx",x(d[0]))
                      .attr("cy",y(d[1]))
                      .attr("r",d3.max([imgSize.height, imgSize.width]));
​
                  g.append("line") // attach a line
                      .attr("class", "test_line")
                      .style("stroke", "black") // colour the line
                      .style("pointer-events", "none")
                      .attr("x1", x(0)) // x position of the first end of the line
                      .attr("y1", y(d[1])) // y position of the first end of the line
                      .attr("x2", x(d[0])) // x position of the second end of the line
                      .attr("y2", y(d[1])) // y position of the second end of the line
                      .style("stroke-dasharray", ("3, 3"));
​
                  g.append("line") // attach a line
                      .attr("class", "test_line")
                      .style("stroke", "black") // colour the line
                      .style("pointer-events", "none")
                      .attr("x1", x(d[0])) // x position of the first end of the line
                      .attr("y1", y(0)) // y position of the first end of the line
                      .attr("x2", x(d[0])) // x position of the second end of the line
                      .attr("y2", y(d[1])) // y position of the second end of the line
                      .style("stroke-dasharray", ("3, 3"));
              })
              .on("mouseout", function(d) {
                  g.selectAll(".test_line").remove();
                  g.selectAll(".test_circle").remove();
              })
        })
        console.clear();
    </script>
</body>
    