nus-fintech-sg
/
DevToolKit1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update Q2 scatter plot

Browse Source
main
yikth 5 years ago
parent 52aa184656
commit c74d3751e9
2 changed files with 45 additions and 61 deletions
Show Stats Download Patch File Download Diff File

17
Day1Exercise/Q2/scatter.html
Unescape Escape View File

@ -5,27 +5,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scatter Plot</title> <title>Scatter Plot</title>
<script src="https://d3js.org/d3.v5.min.js" defer></script> <script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-scale.v3.min.js" defer></script>
<script src="https://d3js.org/d3-axis.v2.min.js" defer></script>
<script src="scatterPlot.js"></script> <script src="scatterPlot.js"></script>
</head> </head>
<body> <body>
<button onclick="myScatterPlot()">Plot</button> <button onclick="myScatterPlot()">Plot</button>
<!-- <svg width=600 height=600>
<circle cx="10" cy="15" r="1" fill="blue"
transform="scale(10)" />
<circle cx="20" cy="20" r="1" fill="blue"
transform="scale(10)" />
<circle cx="5" cy="20" r="1" fill="blue"
transform="scale(10)" />
<circle cx="7" cy="4" r="1" fill="blue"
transform="scale(10)" />
<circle cx="22" cy="6" r="1" fill="blue"
transform="scale(10)" />
</svg> -->
</body> </body>
</html> </html>

89
Day1Exercise/Q2/scatterPlot.js
Unescape Escape View File

@ -1,56 +1,55 @@
function myScatterPlot() { function myScatterPlot() {
var dataset = [[10, 15], [20, 20], [5, 20], [7, 4], [22, 6]]; var dataset = [[10, 15], [20, 20], [5, 20], [7, 4], [22, 6]];
const WIDTH = 600;
var svg = d3.select("body") const HEIGHT = 600;
.append('svg') const PADDING = 20;
.attr("width", 600)
.attr("height", 600); // setup data scaling to fit view
var xScale = d3.scaleLinear() var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) { return d[0]; })]) .domain([0, d3.max(dataset, d => d[0])])
.range([0, 600]); .range([PADDING, WIDTH - PADDING]);
var yScale = d3.scaleLinear() var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) { return d[1]; })]) .domain([0, d3.max(dataset, d => d[1])])
.range([0, 600]); .range([HEIGHT - PADDING, PADDING]);
var rScale = d3.scaleLinear() // Create SVG element
.domain([0, d3.max(dataset, function (d) { return d[1]; })]) var svg = d3.select("body")
.range([2, 5]); .append("svg")
.attr('width', WIDTH)
// https://alignedleft.com/tutorials/d3/making-a-scatterplot .attr("height", HEIGHT);
svg.selectAll("circle").data(dataset).enter().append("circle")
/* .attr("transform", function (d, i) { return "scale(10)" }) */ // create circle dot datapoint
.attr("fill", "blue") svg.selectAll("circle")
.attr("cx", function (d) { return xScale(d[0]); }) .data(dataset)
.attr("cy", function (d) { return yScale(d[1]); }) .enter()
.attr("r", rScale(1)); .append("circle")
.attr("cx", pt => xScale(pt[0]))
// print text next to the point .attr("cy", pt => yScale(pt[1]))
.attr("r", 5);
// create label for each point
svg.selectAll("text") svg.selectAll("text")
.data(dataset) .data(dataset)
.enter() .enter()
.append("text") .append("text")
/* .attr("transform", function (d, i) { return "scale(10)" }) */ .text(pt => `${pt[0]},${pt[1]}`)
.text(function (d) { .attr("x", pt => xScale(pt[0]))
return d[0] + "," + d[1]; .attr("y", pt => yScale(pt[1]))
})
.attr("x", function (d) {
return d[0] + 1;
})
.attr("y", function (d) {
return d[1];
})
.attr("font-family", "sans-serif") .attr("font-family", "sans-serif")
.attr("font-size", "1px") .attr("font-size", "11px")
.attr("fill", "red"); .attr("fill", "red");
// create axes
// setup axis // x axis
//var xAxis = svg.append('g').call(d3.axisBottom()); svg.append("g")
.attr("transform", `translate(0,${HEIGHT-PADDING})`)
/* <circle cx="0" cy="0" r="10" fill="blue" .call(d3.axisBottom()
transform="scale(4)" /> .scale(xScale));
*/ // y axis
svg.append("g")
.attr("transform", `translate(${PADDING},0)`)
.call(d3.axisLeft()
.scale(yScale));
} }
Write Preview
Loading…
Cancel
Save