📑 D3 Workout 01: Scatter Plotting of 2D Projections

d3_01.html

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%html

2

<style>

3

.grid1 line,.grid1 path {stroke:slategray;stroke-opacity:.5;}

4

</style>

5

<svg id='d301svg04' style='background-color:black'/>

6

<script>

7

var url='https://olgabelitskaya.github.io/beethoven.csv';

8

d3.csv(url,d3.autoType).then((data)=>{

9

    var xmin=d3.min(data,function(d) {return d.y;}),

10

        xmax=d3.max(data,function(d) {return d.y;}); 

11

    var ymin=d3.min(data,function(d) {return d.z;}),

12

        ymax=d3.max(data,function(d) {return d.z;});

13

    var n=data.length;

14

    var m=20,margin={top:m,right:m,bottom:m,left:m},

15

        width=500-margin.left-margin.right,

16

        height=700-margin.top-margin.bottom;

17

    var xScale=d3.scaleLinear().domain([1.1*xmin,1.1*xmax])

18

                 .range([0,width]); 

19

    var yScale=d3.scaleLinear().domain([1.1*ymin,1.1*ymax])

20

                 .range([height,0]); 

21

    function make_x_gridlines() {

22

        return d3.axisBottom(xScale).ticks(11)}; 

23

    function make_y_gridlines() {

24

        return d3.axisLeft(yScale).ticks(11)}; 

25

    var pointColor=d3.scaleSequential().domain([0,n])

26

                     .interpolator(d3.interpolateRainbow); 

27

    var tr='translate('+margin.left+','+margin.top+')'; 

28

    var svg=d3.select('#d301svg04')

29

              .attr('width',width+margin.left+margin.right)

30

              .attr('height',height+margin.top+margin.bottom)

31

              .append('g').attr('transform',tr); 

32

    svg.append('g').attr('class','xaxis1')

33

       .call(d3.axisBottom(xScale).tickSize(.5))

34

       .attr('transform','translate(0,'+height+')'); 

35

    svg.append('g').attr('class','yaxis1')

36

       .call(d3.axisLeft(yScale).tickSize(.5)); 

37

    svg.append('g').attr('class','grid1')

38

       .attr('transform','translate(0,'+height+')')

39

       .call(make_x_gridlines().tickSize(-height).tickFormat('')); 

40

    svg.append('g').attr('class','grid1')

41

       .call(make_y_gridlines().tickSize(-width).tickFormat(''))

42

       .attr('stroke','#fff');

43

    svg.selectAll('.point').data(data).enter()

44

       .append('circle').attr('class','point')

45

       .attr('fill',function(d,i){

46

           return pointColor(i)}).attr('r',.7)

47

       .attr('stroke','#fff').attr('stroke-width',.07)

48

       .attr('cx',function(d) {return xScale(d.y)})

49

       .attr('cy',function(d) {return yScale(d.z)}); });

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages