Old school D3 from simpler times

All examples By author By category About

terpimost

Full window Github gist

JS Bin // source http://jsbin.com/fenahe

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
var data = [
  {
    "X": 26.9231,
    "Y": 60.3125
  },
  {
    "X": 26.1538,
    "Y": 63.774
  },
  {
    "X": 26.1538,
    "Y": 67.6202
  },
  {
    "X": 27.9487,
    "Y": 70.3125
  },
  {
    "X": 34.1026,
    "Y": 73.774
  },
  {
    "X": 30.7692,
    "Y": 72.6202
  },
  {
    "X": 36.6667,
    "Y": 76.4663
  },
  {
    "X": 40.7692,
    "Y": 76.4663
  },
  {
    "X": 46.1538,
    "Y": 76.4663
  },
  {
    "X": 27.9487,
    "Y": 58.774
  },
  {
    "X": 30,
    "Y": 57.2356
  },
  {
    "X": 33.3333,
    "Y": 56.4663
  },
  {
    "X": 31.7949,
    "Y": 56.851
  },
  {
    "X": 34.359,
    "Y": 56.851
  },
  {
    "X": 35.1282,
    "Y": 57.2356
  },
  {
    "X": 35.641,
    "Y": 57.6202
  },
  {
    "X": 38.9744,
    "Y": 58.3894
  },
  {
    "X": 44.8718,
    "Y": 58.3894
  },
  {
    "X": 47.1795,
    "Y": 57.6202
  },
  {
    "X": 47.1795,
    "Y": 54.5433
  },
  {
    "X": 46.9231,
    "Y": 54.1587
  },
  {
    "X": 43.3333,
    "Y": 51.4663
  },
  {
    "X": 40.5128,
    "Y": 50.3125
  },
  {
    "X": 38.4615,
    "Y": 49.9279
  },
  {
    "X": 35.8974,
    "Y": 49.5433
  },
  {
    "X": 34.1026,
    "Y": 49.5433
  },
  {
    "X": 32.0513,
    "Y": 49.1587
  },
  {
    "X": 32.0513,
    "Y": 38.774
  },
  {
    "X": 33.5897,
    "Y": 37.2356
  },
  {
    "X": 37.4359,
    "Y": 34.1587
  },
  {
    "X": 41.0256,
    "Y": 34.1587
  },
  {
    "X": 43.3333,
    "Y": 34.1587
  },
  {
    "X": 50.7692,
    "Y": 34.1587
  },
  {
    "X": 52.3077,
    "Y": 34.1587
  },
  {
    "X": 55.641,
    "Y": 34.1587
  },
  {
    "X": 46.4103,
    "Y": 78.3894
  },
  {
    "X": 48.4615,
    "Y": 83.3894
  },
  {
    "X": 51.5385,
    "Y": 86.851
  },
  {
    "X": 52.0513,
    "Y": 87.6202
  },
  {
    "X": 52.8205,
    "Y": 87.6202
  },
  {
    "X": 54.8718,
    "Y": 89.5433
  },
  {
    "X": 57.1795,
    "Y": 89.9279
  },
  {
    "X": 58.9744,
    "Y": 89.9279
  },
  {
    "X": 60.7692,
    "Y": 89.1587
  },
  {
    "X": 60.7692,
    "Y": 89.1587
  },
  {
    "X": 62.3077,
    "Y": 87.6202
  },
  {
    "X": 62.3077,
    "Y": 84.5433
  },
  {
    "X": 63.5897,
    "Y": 76.0817
  },
  {
    "X": 62.8205,
    "Y": 82.6202
  },
  {
    "X": 65.641,
    "Y": 68.3894
  },
  {
    "X": 67.9487,
    "Y": 57.2356
  },
  {
    "X": 68.7179,
    "Y": 51.0817
  },
  {
    "X": 71.7949,
    "Y": 41.4663
  },
  {
    "X": 80.7692,
    "Y": 24.9279
  },
  {
    "X": 57.9487,
    "Y": 33.0048
  },
  {
    "X": 67.1795,
    "Y": 27.6202
  },
  {
    "X": 60.7692,
    "Y": 32.2356
  },
  {
    "X": 62.5641,
    "Y": 29.5433
  },
  {
    "X": 69.7436,
    "Y": 27.6202
  },
  {
    "X": 72.3077,
    "Y": 25.6971
  },
  {
    "X": 72.3077,
    "Y": 25.6971
  },
  {
    "X": 48.9744,
    "Y": 72.2356
  },
  {
    "X": 49.2308,
    "Y": 69.5433
  },
  {
    "X": 50.7692,
    "Y": 71.851
  },
  {
    "X": 50,
    "Y": 78.0048
  },
  {
    "X": 49.2308,
    "Y": 75.6971
  },
  {
    "X": 51.5385,
    "Y": 71.851
  },
  {
    "X": 50.7692,
    "Y": 74.5433
  },
  {
    "X": 29.2308,
    "Y": 68.3894
  },
  {
    "X": 28.7179,
    "Y": 66.4663
  },
  {
    "X": 29.7436,
    "Y": 66.4663
  },
  {
    "X": 30.5128,
    "Y": 55.3125
  },
  {
    "X": 30.5128,
    "Y": 53.3894
  },
  {
    "X": 33.3333,
    "Y": 51.851
  },
  {
    "X": 33.3333,
    "Y": 53.0048
  },
  {
    "X": 73.5897,
    "Y": 37.6202
  },
  {
    "X": 75.641,
    "Y": 34.1587
  }
]

var margin = {
  left:30,
  right:10,
  top:10,
  bottom:40
}

var fullWidth = 500
var width = fullWidth - margin.left - margin.right
var fullHeight = 500
var height = fullHeight - margin.top - margin.bottom

var xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, width])

var yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([height, 0])

var color = d3.scaleLinear()
  .domain([0, 100])
  .range(['#500', '#F00'])

var xAxis = d3.axisBottom()
  .scale(xScale)

var yAxis = d3.axisLeft()
  .scale(yScale)

var group =d3.select('body') //создание групы
  .append('svg')
  .attr('width', fullWidth).attr('height', fullHeight)
  .append('g')
  .attr('transform','translate(' + margin.left + ',' + margin.top + ')')

group
  .append('g')
  .call(yAxis)

group
  .append('g')
  .call(xAxis)
  .attr('transform','translate(0,' + height + ')')

//использование переменной группы
group
// General Update Pattern
  .selectAll('circle')
  .data(data)
  .enter()
  .append('circle')

.attr('r', 5)
  .attr('cx', function(d,i){
    return xScale(d.X)
  })
  .attr('cy', function(d,i){
    return yScale(d.Y)
  })
</script>

<script id="jsbin-source-javascript" type="text/javascript">var data = [
  {
    "X": 26.9231,
    "Y": 60.3125
  },
  {
    "X": 26.1538,
    "Y": 63.774
  },
  {
    "X": 26.1538,
    "Y": 67.6202
  },
  {
    "X": 27.9487,
    "Y": 70.3125
  },
  {
    "X": 34.1026,
    "Y": 73.774
  },
  {
    "X": 30.7692,
    "Y": 72.6202
  },
  {
    "X": 36.6667,
    "Y": 76.4663
  },
  {
    "X": 40.7692,
    "Y": 76.4663
  },
  {
    "X": 46.1538,
    "Y": 76.4663
  },
  {
    "X": 27.9487,
    "Y": 58.774
  },
  {
    "X": 30,
    "Y": 57.2356
  },
  {
    "X": 33.3333,
    "Y": 56.4663
  },
  {
    "X": 31.7949,
    "Y": 56.851
  },
  {
    "X": 34.359,
    "Y": 56.851
  },
  {
    "X": 35.1282,
    "Y": 57.2356
  },
  {
    "X": 35.641,
    "Y": 57.6202
  },
  {
    "X": 38.9744,
    "Y": 58.3894
  },
  {
    "X": 44.8718,
    "Y": 58.3894
  },
  {
    "X": 47.1795,
    "Y": 57.6202
  },
  {
    "X": 47.1795,
    "Y": 54.5433
  },
  {
    "X": 46.9231,
    "Y": 54.1587
  },
  {
    "X": 43.3333,
    "Y": 51.4663
  },
  {
    "X": 40.5128,
    "Y": 50.3125
  },
  {
    "X": 38.4615,
    "Y": 49.9279
  },
  {
    "X": 35.8974,
    "Y": 49.5433
  },
  {
    "X": 34.1026,
    "Y": 49.5433
  },
  {
    "X": 32.0513,
    "Y": 49.1587
  },
  {
    "X": 32.0513,
    "Y": 38.774
  },
  {
    "X": 33.5897,
    "Y": 37.2356
  },
  {
    "X": 37.4359,
    "Y": 34.1587
  },
  {
    "X": 41.0256,
    "Y": 34.1587
  },
  {
    "X": 43.3333,
    "Y": 34.1587
  },
  {
    "X": 50.7692,
    "Y": 34.1587
  },
  {
    "X": 52.3077,
    "Y": 34.1587
  },
  {
    "X": 55.641,
    "Y": 34.1587
  },
  {
    "X": 46.4103,
    "Y": 78.3894
  },
  {
    "X": 48.4615,
    "Y": 83.3894
  },
  {
    "X": 51.5385,
    "Y": 86.851
  },
  {
    "X": 52.0513,
    "Y": 87.6202
  },
  {
    "X": 52.8205,
    "Y": 87.6202
  },
  {
    "X": 54.8718,
    "Y": 89.5433
  },
  {
    "X": 57.1795,
    "Y": 89.9279
  },
  {
    "X": 58.9744,
    "Y": 89.9279
  },
  {
    "X": 60.7692,
    "Y": 89.1587
  },
  {
    "X": 60.7692,
    "Y": 89.1587
  },
  {
    "X": 62.3077,
    "Y": 87.6202
  },
  {
    "X": 62.3077,
    "Y": 84.5433
  },
  {
    "X": 63.5897,
    "Y": 76.0817
  },
  {
    "X": 62.8205,
    "Y": 82.6202
  },
  {
    "X": 65.641,
    "Y": 68.3894
  },
  {
    "X": 67.9487,
    "Y": 57.2356
  },
  {
    "X": 68.7179,
    "Y": 51.0817
  },
  {
    "X": 71.7949,
    "Y": 41.4663
  },
  {
    "X": 80.7692,
    "Y": 24.9279
  },
  {
    "X": 57.9487,
    "Y": 33.0048
  },
  {
    "X": 67.1795,
    "Y": 27.6202
  },
  {
    "X": 60.7692,
    "Y": 32.2356
  },
  {
    "X": 62.5641,
    "Y": 29.5433
  },
  {
    "X": 69.7436,
    "Y": 27.6202
  },
  {
    "X": 72.3077,
    "Y": 25.6971
  },
  {
    "X": 72.3077,
    "Y": 25.6971
  },
  {
    "X": 48.9744,
    "Y": 72.2356
  },
  {
    "X": 49.2308,
    "Y": 69.5433
  },
  {
    "X": 50.7692,
    "Y": 71.851
  },
  {
    "X": 50,
    "Y": 78.0048
  },
  {
    "X": 49.2308,
    "Y": 75.6971
  },
  {
    "X": 51.5385,
    "Y": 71.851
  },
  {
    "X": 50.7692,
    "Y": 74.5433
  },
  {
    "X": 29.2308,
    "Y": 68.3894
  },
  {
    "X": 28.7179,
    "Y": 66.4663
  },
  {
    "X": 29.7436,
    "Y": 66.4663
  },
  {
    "X": 30.5128,
    "Y": 55.3125
  },
  {
    "X": 30.5128,
    "Y": 53.3894
  },
  {
    "X": 33.3333,
    "Y": 51.851
  },
  {
    "X": 33.3333,
    "Y": 53.0048
  },
  {
    "X": 73.5897,
    "Y": 37.6202
  },
  {
    "X": 75.641,
    "Y": 34.1587
  }
]

var margin = {
  left:30,
  right:10,
  top:10,
  bottom:40
}

var fullWidth = 500
var width = fullWidth - margin.left - margin.right
var fullHeight = 500
var height = fullHeight - margin.top - margin.bottom

var xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, width])

var yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([height, 0])

var color = d3.scaleLinear()
  .domain([0, 100])
  .range(['#500', '#F00'])

var xAxis = d3.axisBottom()
  .scale(xScale)

var yAxis = d3.axisLeft()
  .scale(yScale)

var group =d3.select('body') //создание групы
  .append('svg')
  .attr('width', fullWidth).attr('height', fullHeight)
  .append('g')
  .attr('transform','translate(' + margin.left + ',' + margin.top + ')')

group
  .append('g')
  .call(yAxis)

group
  .append('g')
  .call(xAxis)
  .attr('transform','translate(0,' + height + ')')

//использование переменной группы
group
// General Update Pattern
  .selectAll('circle')
  .data(data)
  .enter()
  .append('circle')

.attr('r', 5)
  .attr('cx', function(d,i){
    return xScale(d.X)
  })
  .attr('cy', function(d,i){
    return yScale(d.Y)
  })
  </script></body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js