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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scatter Plot</title>
<script src="https://d3js.org/d3.v5.min.js" defer></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="https://d3js.org/d3.v6.min.js"></script>
<script src="scatterPlot.js"></script>
</head>
<body>
<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>
</html>

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

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