TestRepo/scales-cars.js at master · njw32/TestRepo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
let outerWidth = 600
let outerHeight = 400
let margins = { top: 30, bottom: 50, left: 50, right: 30 }
let innerWidth = outerWidth - margins.left - margins.right
let innerHeight = outerHeight - margins.top - margins.bottom

let scatterOuter = d3
  .select('svg#cars-scatter')
  .attr('width', outerWidth)
  .attr('height', outerHeight)

let scatterInner = scatterOuter
  .append('g')
  .attr('width', innerWidth)
  .attr('height', innerHeight)
  .attr('transform', 'translate(' + margins.left + ',' + margins.right + ')')

scatterOuter
  .append('rect')
  .attr('width', outerWidth)
  .attr('height', outerHeight)
  .attr('fill', 'transparent')
  .attr('stroke', 'black')

scatterInner.style('fill', 'skyblue').style('opacity', 0.8)

scatterInner
  .append('rect')
  .attr('width', innerWidth)
  .attr('height', innerHeight)
  .attr('fill', 'skyblue')
  .attr('fill-opacity', 0.2)

let xScale = d3
  .scaleLinear()
  .domain(d3.extent(cars.map(d => d.mpg)))
  .range([20, innerWidth - 20])
let xAxis = d3.axisBottom(xScale)

let yScale = d3
  .scaleLinear()
  .domain(d3.extent(cars.map(d => d.wt)))
  .range([20, innerHeight - 20].reverse())
let yAxis = d3.axisLeft(yScale).tickSize(-innerWidth)

let sizeScale = d3
  .scaleSqrt()
  .domain([0, Math.max(...cars.map(d => d.disp))])
  .range([5, 15])

let colorScale = d3
  .scaleOrdinal()
  .domain([4, 6, 8])
  .range(['red', 'green', 'blue'])

scatterInner
  .append('g')
  .attr('transform', 'translate(' + 0 + ', ' + innerHeight + ')')
  .attr('class', 'x-axis')
  .call(xAxis)

scatterInner
  .append('rect')
  .attr('width', innerWidth)
  .attr('height', innerHeight)
  .attr('fill', 'transparent')
  .attr('stroke', 'black')

scatterInner
  .append('g')
  .attr('class', 'y-axis')
  .call(yAxis)

scatterInner
  .selectAll('circle')
  .data(cars)
  .enter()
  .append('circle')
  .attr('cx', d => xScale(d.mpg))
  .attr('cy', d => yScale(d.wt))
  .style('fill', 'transparent')
  .style('stroke-width', 3)
  .attr('r', d => sizeScale(d.disp))
  .style('stroke', d => colorScale(d.cyl))