diff --git a/Day1Exercise/Q2/scatter.html b/Day1Exercise/Q2/scatter.html index 1221ae0..682c103 100644 --- a/Day1Exercise/Q2/scatter.html +++ b/Day1Exercise/Q2/scatter.html @@ -5,27 +5,12 @@ Scatter Plot - - - + - - \ No newline at end of file diff --git a/Day1Exercise/Q2/scatterPlot.js b/Day1Exercise/Q2/scatterPlot.js index 8cb8b9e..ffc0fb9 100644 --- a/Day1Exercise/Q2/scatterPlot.js +++ b/Day1Exercise/Q2/scatterPlot.js @@ -1,56 +1,55 @@ function myScatterPlot() { var dataset = [[10, 15], [20, 20], [5, 20], [7, 4], [22, 6]]; - - - var svg = d3.select("body") - .append('svg') - .attr("width", 600) - .attr("height", 600); - + + const WIDTH = 600; + const HEIGHT = 600; + const PADDING = 20; + + // 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)); - - // print text next to the point + .domain([0, d3.max(dataset, d => d[1])]) + .range([HEIGHT - PADDING, PADDING]); + + // 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()); - - /* - */ + + // 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)); } \ No newline at end of file