Cartesian Graph

forked from Raj-Joshi-dev's block: Cartesian Graph

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" data-semver="3.5.17"
    src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <style>
    body {
      font: 15px Arial;
    }

path {
      stroke: steelblue;
      stroke-width: 2;
    }

.axis path,
    .axis line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }
  </style>
</head>

// graph dimensions
    var width = 750,
      height = 750,
      padding = 70;

// svg container
    var vis = d3.select("#graph")
      .append("svg:svg")
      .attr("width", width)
      .attr("height", height);

var xScale = d3.scale.linear().domain([1, -1]).range([width - padding, padding]);
    var yScale = d3.scale.linear().domain([-1, 1]).range([height - padding, padding]);

// y axis
    var yAxis = d3.svg.axis()
      .orient("left")
      .tickValues([])
      .scale(yScale);

// x axis
    var xAxis = d3.svg.axis()
      .orient("bottom")
      .tickValues([])
      .scale(xScale);

var xAxisPlot = vis.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + (height / 2) + ")")
      .call(xAxis) //.tickSize(-height, 0));

var yAxisPlot = vis.append("g")
      .attr("class", "axis axis--y")
      .attr("transform", "translate(" + (width / 2) + ",0)")
      .call(yAxis) //.tickSize(-width, 0));

var data = [
      {
        x: -0.75,
        y: 0.25
      }, {
        x: 0.50,
        y: -0.50
      }, {
        x: 0.50,
        y: 0.50
      } ,{
        x: -0.50,
        y: -0.50
      }
    ];

vis.selectAll(".xaxis text")  // select all the text elements for the xaxis
      .attr("transform", function (d) {
        return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";
      });

vis.append("text")
      .attr("text-anchor", "midde")
      .attr("transform", "translate(30,370)")
      .text("Geminsnn");

vis.append("text")
      .attr("text-anchor", "midde")
      .attr("transform", "translate(345,700)")
      .text("Flexibilität");

vis.append("text")
      .attr("text-anchor", "midde")
      .attr("transform", "translate(345,60)")
      .text("Stabilität");

vis.append("text")
      .attr("text-anchor", "midde")
      .attr("transform", "translate(650,370)")
      .text("Selbswichlung");

vis.selectAll(".point")
      .data(data)
      .enter().append("circle")
      .attr("class", "point")
      .attr("r", 5)
      .style("fill", "steelblue")
      .attr("cx", function (d) {
        return xScale(d.x);
      })
      .attr("cy", function (d) {
        return yScale(d.y);
      });

vis.append('path')
    	.datum(data)
      .attr('fill', 'red')
      .attr('stroke', '#69b3a2')
      .attr('stroke-width', 1.5)
      .attr('d', d => d3.svg.line()
           .x(d => xScale(d.x))
           .y(d => yScale(d.y))(d) + 'Z')

</script>
</body>

</html>