You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
function myScatterPlot() {
|
|
var dataset = [[10, 15], [20, 20], [5, 20], [7, 4], [22, 6]];
|
|
console.log("entering...");
|
|
|
|
//debugger;
|
|
// for D3.js v5 and above, d3.csv() use promise design pattern
|
|
const myPromise = d3.csv("./dataset.csv");
|
|
|
|
myPromise.then((data) => {
|
|
//debugger;
|
|
console.log("callback...")
|
|
|
|
var i = 0;
|
|
var csvDataset = new Array(data.length);
|
|
for (var ii = 0; ii < csvDataset.length; ii++) {
|
|
csvDataset[ii] = new Array(2);
|
|
}
|
|
//
|
|
data.forEach(d => {
|
|
d.x = +d.x;
|
|
d.y = +d.y;
|
|
//
|
|
csvDataset[i][0] = d.x;
|
|
csvDataset[i][1] = d.y;
|
|
i++;
|
|
});
|
|
|
|
// plot to view
|
|
plot(csvDataset);
|
|
})
|
|
.catch(error => {
|
|
alert(`dataset error : ${error.message}`)
|
|
});
|
|
|
|
}
|
|
|
|
/* Plot the scatter plot graph given the dataset */
|
|
function plot(dataset) {
|
|
// constants
|
|
const WIDTH = 600;
|
|
const HEIGHT = 600;
|
|
const PADDING = 20;
|
|
|
|
// setup data scaling to fit view
|
|
// x-scale
|
|
var xScale = d3.scaleLinear()
|
|
.domain([0, d3.max(dataset, d => d[0])])
|
|
.range([PADDING, WIDTH - PADDING]);
|
|
|
|
// y-scale
|
|
var yScale = d3.scaleLinear()
|
|
.domain([0, d3.max(dataset, d => d[1])])
|
|
.range([HEIGHT - PADDING, PADDING]); // reverse the range as view coordinate start from top-left
|
|
|
|
|
|
// 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")
|
|
.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", "11px")
|
|
.attr("fill", "red");
|
|
|
|
// draw axes
|
|
// x axis : transform drawing from top to bottom
|
|
svg.append("g")
|
|
.attr("transform", `translate(0,${HEIGHT - PADDING})`)
|
|
.call(d3.axisBottom()
|
|
.scale(xScale));
|
|
// y axis : transform the drawing to display the scale number
|
|
svg.append("g")
|
|
.attr("transform", `translate(${PADDING},0)`)
|
|
.call(d3.axisLeft()
|
|
.scale(yScale));
|
|
} |