Skip to content

Instantly share code, notes, and snippets.

@ddonatien

ddonatien/.block

Last active January 17, 2020 16:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ddonatien/57c4c2b3bb97f309cc6a51eafafc7229 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ddonatien/57c4c2b3bb97f309cc6a51eafafc7229 to your computer and use it in GitHub Desktop.
Download ZIP
Tuto 2.1
Raw
.block
license: mit
Raw
index.html
<!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; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var margin = {top: 60, right: 60, bottom: 60, left: 60};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var padding = {h: 15, v: 15}
// TAILLE DE LA MATRICE. CHOISIR ENTRE 1 ET 4
var demiNbCols = 2
d3.csv('iris.csv', function(error, data) {
if (error) {
console.log(error)
}
else {
data.columnsNum = data.columns.filter(d => { return +data[0][d] == data[0][d]})
let xScale = d3.scaleBand()
.domain(data.columnsNum.slice(0,demiNbCols))
.range([0, width])
let yScale = d3.scaleBand()
.domain(data.columnsNum.slice(-demiNbCols))
.range([0, height])
let tScale = d3.scaleLinear()
.domain([1, 4])
.range([14, 8])
let rScale = d3.scaleLinear()
.domain([5, 10])
.range([4, 1])
data.columnsNum.slice(0,demiNbCols).forEach( function (d1, i) {
data.columnsNum.slice(-demiNbCols).forEach( function (d2, j) {
scatterplot(data, d1, d2, 'sepal_length', 'species', margin.left + i * xScale.bandwidth(), margin.top + j * yScale.bandwidth(), xScale.bandwidth(), yScale.bandwidth(), padding.v, padding.h, tScale(demiNbCols), rScale(demiNbCols))
})
})
}
})
var scatterplot = function(data, x, y, r, c, _xStart, _yStart, _width, _height, _vPad, _hPad, _tSize, _maxR) {
let xScale = d3.scaleLinear()
.domain(d3.extent(data, function (d) { return d[x] }))
.range([0, _width - 2 * _vPad])
let yScale = d3.scaleLinear()
.domain(d3.extent(data, function (d) { return d[y] }))
.range([_height - 2 * _hPad, 0])
let rScale = d3.scaleSqrt()
.domain(d3.extent(data, function (d) { return d[r] }))
.range([1, _maxR])
let cScale = d3.scaleOrdinal(d3.schemeCategory20)
.domain(d3.extent(data, function (d) { return d[c] }))
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
let g = svg.append('g')
g.append("text")
.text(`${x} vs ${y} | size : ${r}`)
.attr('x', _xStart + _vPad)
.attr('y', _yStart + _hPad)
.attr("font-size", `${_tSize}px`)
.attr("font-family", "monospace")
g.selectAll('circle')
.data(data)
.enter()
.append('circle')
.style('fill', function(d) { return cScale(d[c]) })
.style('stroke', 'gray')
.attr('cx', function(d) { return _xStart + _vPad + xScale(d[x])})
.attr('cy', function(d) { return _yStart + _hPad + yScale(d[y])})
.style('opacity', '0.3')
.on('mouseover', function(e) {
d3.selectAll('circle')
.style('opacity', function(d) {
if (d===e){
return '1'
} else {
return '0.3'
}
})
})
.on('mouseout', function(e) {
d3.selectAll('circle')
.style('opacity', '0.3')
})
.transition()
.duration(500)
.attr('r', function(d) { return rScale(d[r]) })
g.append("g")
.attr("class", "x axis")
.attr("transform", `translate(${_xStart + _vPad},${_yStart + _height - _hPad})`)
.style("font-size", `${_tSize}px`)
.style("font-family", "monospace")
.call(xAxis)
g.append("g")
.attr("class", "y axis")
.attr("transform", `translate(${_xStart + _vPad},${_yStart + _hPad})`)
.style("font-size", `${_tSize}px`)
.style("font-family", "monospace")
.call(yAxis)
}
</script>
</body>
Raw
iris.csv
sepal_length sepal_width petal_length petal_width species
5.1 3.5 1.4 0.2 setosa
4.9 3 1.4 0.2 setosa
4.7 3.2 1.3 0.2 setosa
4.6 3.1 1.5 0.2 setosa
5 3.6 1.4 0.2 setosa
5.4 3.9 1.7 0.4 setosa
4.6 3.4 1.4 0.3 setosa
5 3.4 1.5 0.2 setosa
4.4 2.9 1.4 0.2 setosa
4.9 3.1 1.5 0.1 setosa
5.4 3.7 1.5 0.2 setosa
4.8 3.4 1.6 0.2 setosa
4.8 3 1.4 0.1 setosa
4.3 3 1.1 0.1 setosa
5.8 4 1.2 0.2 setosa
5.7 4.4 1.5 0.4 setosa
5.4 3.9 1.3 0.4 setosa
5.1 3.5 1.4 0.3 setosa
5.7 3.8 1.7 0.3 setosa
5.1 3.8 1.5 0.3 setosa
5.4 3.4 1.7 0.2 setosa
5.1 3.7 1.5 0.4 setosa
4.6 3.6 1 0.2 setosa
5.1 3.3 1.7 0.5 setosa
4.8 3.4 1.9 0.2 setosa
5 3 1.6 0.2 setosa
5 3.4 1.6 0.4 setosa
5.2 3.5 1.5 0.2 setosa
5.2 3.4 1.4 0.2 setosa
4.7 3.2 1.6 0.2 setosa
4.8 3.1 1.6 0.2 setosa
5.4 3.4 1.5 0.4 setosa
5.2 4.1 1.5 0.1 setosa
5.5 4.2 1.4 0.2 setosa
4.9 3.1 1.5 0.1 setosa
5 3.2 1.2 0.2 setosa
5.5 3.5 1.3 0.2 setosa
4.9 3.1 1.5 0.1 setosa
4.4 3 1.3 0.2 setosa
5.1 3.4 1.5 0.2 setosa
5 3.5 1.3 0.3 setosa
4.5 2.3 1.3 0.3 setosa
4.4 3.2 1.3 0.2 setosa
5 3.5 1.6 0.6 setosa
5.1 3.8 1.9 0.4 setosa
4.8 3 1.4 0.3 setosa
5.1 3.8 1.6 0.2 setosa
4.6 3.2 1.4 0.2 setosa
5.3 3.7 1.5 0.2 setosa
5 3.3 1.4 0.2 setosa
7 3.2 4.7 1.4 versicolor
6.4 3.2 4.5 1.5 versicolor
6.9 3.1 4.9 1.5 versicolor
5.5 2.3 4 1.3 versicolor
6.5 2.8 4.6 1.5 versicolor
5.7 2.8 4.5 1.3 versicolor
6.3 3.3 4.7 1.6 versicolor
4.9 2.4 3.3 1 versicolor
6.6 2.9 4.6 1.3 versicolor
5.2 2.7 3.9 1.4 versicolor
5 2 3.5 1 versicolor
5.9 3 4.2 1.5 versicolor
6 2.2 4 1 versicolor
6.1 2.9 4.7 1.4 versicolor
5.6 2.9 3.6 1.3 versicolor
6.7 3.1 4.4 1.4 versicolor
5.6 3 4.5 1.5 versicolor
5.8 2.7 4.1 1 versicolor
6.2 2.2 4.5 1.5 versicolor
5.6 2.5 3.9 1.1 versicolor
5.9 3.2 4.8 1.8 versicolor
6.1 2.8 4 1.3 versicolor
6.3 2.5 4.9 1.5 versicolor
6.1 2.8 4.7 1.2 versicolor
6.4 2.9 4.3 1.3 versicolor
6.6 3 4.4 1.4 versicolor
6.8 2.8 4.8 1.4 versicolor
6.7 3 5 1.7 versicolor
6 2.9 4.5 1.5 versicolor
5.7 2.6 3.5 1 versicolor
5.5 2.4 3.8 1.1 versicolor
5.5 2.4 3.7 1 versicolor
5.8 2.7 3.9 1.2 versicolor
6 2.7 5.1 1.6 versicolor
5.4 3 4.5 1.5 versicolor
6 3.4 4.5 1.6 versicolor
6.7 3.1 4.7 1.5 versicolor
6.3 2.3 4.4 1.3 versicolor
5.6 3 4.1 1.3 versicolor
5.5 2.5 4 1.3 versicolor
5.5 2.6 4.4 1.2 versicolor
6.1 3 4.6 1.4 versicolor
5.8 2.6 4 1.2 versicolor
5 2.3 3.3 1 versicolor
5.6 2.7 4.2 1.3 versicolor
5.7 3 4.2 1.2 versicolor
5.7 2.9 4.2 1.3 versicolor
6.2 2.9 4.3 1.3 versicolor
5.1 2.5 3 1.1 versicolor
5.7 2.8 4.1 1.3 versicolor
6.3 3.3 6 2.5 virginica
5.8 2.7 5.1 1.9 virginica
7.1 3 5.9 2.1 virginica
6.3 2.9 5.6 1.8 virginica
6.5 3 5.8 2.2 virginica
7.6 3 6.6 2.1 virginica
4.9 2.5 4.5 1.7 virginica
7.3 2.9 6.3 1.8 virginica
6.7 2.5 5.8 1.8 virginica
7.2 3.6 6.1 2.5 virginica
6.5 3.2 5.1 2 virginica
6.4 2.7 5.3 1.9 virginica
6.8 3 5.5 2.1 virginica
5.7 2.5 5 2 virginica
5.8 2.8 5.1 2.4 virginica
6.4 3.2 5.3 2.3 virginica
6.5 3 5.5 1.8 virginica
7.7 3.8 6.7 2.2 virginica
7.7 2.6 6.9 2.3 virginica
6 2.2 5 1.5 virginica
6.9 3.2 5.7 2.3 virginica
5.6 2.8 4.9 2 virginica
7.7 2.8 6.7 2 virginica
6.3 2.7 4.9 1.8 virginica
6.7 3.3 5.7 2.1 virginica
7.2 3.2 6 1.8 virginica
6.2 2.8 4.8 1.8 virginica
6.1 3 4.9 1.8 virginica
6.4 2.8 5.6 2.1 virginica
7.2 3 5.8 1.6 virginica
7.4 2.8 6.1 1.9 virginica
7.9 3.8 6.4 2 virginica
6.4 2.8 5.6 2.2 virginica
6.3 2.8 5.1 1.5 virginica
6.1 2.6 5.6 1.4 virginica
7.7 3 6.1 2.3 virginica
6.3 3.4 5.6 2.4 virginica
6.4 3.1 5.5 1.8 virginica
6 3 4.8 1.8 virginica
6.9 3.1 5.4 2.1 virginica
6.7 3.1 5.6 2.4 virginica
6.9 3.1 5.1 2.3 virginica
5.8 2.7 5.1 1.9 virginica
6.8 3.2 5.9 2.3 virginica
6.7 3.3 5.7 2.5 virginica
6.7 3 5.2 2.3 virginica
6.3 2.5 5 1.9 virginica
6.5 3 5.2 2 virginica
6.2 3.4 5.4 2.3 virginica
5.9 3 5.1 1.8 virginica
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment