JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script>

JavaScript

var dataSet = [ [4,4], [-4,4], [-4,-4], [4,-4] ];

var w = 200,
    h = 200;

// calculate max/min for x and y here if necessary

var xScale = d3.scale.linear()
             .domain([-5, 5])
             .range([0,w]);

var yScale = d3.scale.linear()
             .domain([5, -5])
             .range([0,h]);
                     
var svg = d3.select("body")
    .append("svg")
    .attr("width", w + 100)
    .attr("height",h + 100)
  .append('svg:g')
    .attr('transform', 'translate(15,15)');

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",4); 

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .tickSize(1);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('left')
    .tickSize(1);

svg.append("svg:g")
    .attr("class", "xaxis")
    .attr("transform", "translate(0," + h + ")")
    .call(xAxis);

svg.append("svg:g")
    .attr("class", "yaxis")
    .call(yAxis);