Skip to content

Instantly share code, notes, and snippets.

@terpimost

terpimost/index.html

Created December 9, 2017 16:40
Show Gist options
  • Save terpimost/922a3b3c87379acb00ce0457d50c2421 to your computer and use it in GitHub Desktop.
Save terpimost/922a3b3c87379acb00ce0457d50c2421 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/fenahe
Raw
index.html
<!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>
Raw
jsbin.fenahe.js
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)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment