| license: mit |
This is a simple line graph demonstrating the addition of scatterplot points to a line graph. This was written using d3.js v4 and is a follow on to the simple graph example here.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
forked from d3noob's block: Scatterplot with v4
| [ | |
| { | |
| "question": "Activity One", | |
| "answer": "Some answer", | |
| "value": 5, | |
| "consequence": 1 | |
| }, | |
| { | |
| "question": "Activity Two", | |
| "answer": "Some answer", | |
| "value": 4, | |
| "consequence": 1 | |
| }, | |
| { | |
| "question": "Activity Three", | |
| "answer": "Another answer", | |
| "value": 4, | |
| "consequence": 2 | |
| }, | |
| { | |
| "question": "Activity Four", | |
| "answer": "Another answer", | |
| "value": 5, | |
| "consequence": 4 | |
| }, | |
| { | |
| "question": "Activity Five", | |
| "answer": "Another answer", | |
| "value": 4, | |
| "consequence": 5 | |
| }, | |
| { | |
| "question": "Activity Six", | |
| "answer": "Another answer", | |
| "value": 1, | |
| "consequence": 1 | |
| }, | |
| { | |
| "question": "Activity Seven", | |
| "answer": "Another answer", | |
| "value": 1, | |
| "consequence": 5 | |
| } | |
| ] |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { font-family: Arial;} | |
| .axis, .axis path { | |
| fill: none; | |
| stroke: #ACB849; | |
| } | |
| text { | |
| stroke: none; | |
| fill: #666666; | |
| } | |
| </style> | |
| <body> | |
| <svg id="scatter" width="500" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("#scatter"), | |
| margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| domainwidth = width - margin.left - margin.right, | |
| domainheight = height - margin.top - margin.bottom; | |
| var x = d3.scaleLinear() | |
| .domain(padExtent([1,5])) | |
| .range(padExtent([0, domainwidth])); | |
| var y = d3.scaleLinear() | |
| .domain(padExtent([1,5])) | |
| .range(padExtent([domainheight, 0])); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.top + "," + margin.top + ")"); | |
| g.append("rect") | |
| .attr("width", width - margin.left - margin.right) | |
| .attr("height", height - margin.top - margin.bottom) | |
| .attr("fill", "#F6F6F6"); | |
| d3.json("data.json", function(error, data) { | |
| if (error) throw error; | |
| data.forEach(function(d) { | |
| d.consequence = +d.consequence; | |
| d.value = +d.value; | |
| }); | |
| g.selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 7) | |
| .attr("cx", function(d) { return x(d.consequence); }) | |
| .attr("cy", function(d) { return y(d.value); }) | |
| .style("fill", function(d) { | |
| if (d.value >= 3 && d.consequence <= 3) {return "#60B19C"} // Top Left | |
| else if (d.value >= 3 && d.consequence >= 3) {return "#8EC9DC"} // Top Right | |
| else if (d.value <= 3 && d.consequence >= 3) {return "#D06B47"} // Bottom Left | |
| else { return "#A72D73" } //Bottom Right | |
| }); | |
| g.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + y.range()[0] / 2 + ")") | |
| .call(d3.axisBottom(x).ticks(5)); | |
| g.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + x.range()[1] / 2 + ", 0)") | |
| .call(d3.axisLeft(y).ticks(5)); | |
| }); | |
| function padExtent(e, p) { | |
| if (p === undefined) p = 1; | |
| return ([e[0] - p, e[1] + p]); | |
| } | |
| </script> | |
| </body> |
working example in codepen https://codepen.io/DilwoarH/pen/MWzRjXw