Built with blockbuilder.org
forked from Raj-Joshi-dev's block: Cartesian Graph
Last active
May 6, 2020 10:58
-
-
Save gordonwoodhull/474cf83037dae72270d7bfbbc89fd405 to your computer and use it in GitHub Desktop.
Cartesian Graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script data-require="[email protected]" data-semver="3.5.17" | |
| src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> | |
| <style> | |
| body { | |
| font: 15px Arial; | |
| } | |
| path { | |
| stroke: steelblue; | |
| stroke-width: 2; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: grey; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div align="center"> | |
| <div id="graph"></div> | |
| </div> | |
| <script> | |
| // graph dimensions | |
| var width = 750, | |
| height = 750, | |
| padding = 70; | |
| // svg container | |
| var vis = d3.select("#graph") | |
| .append("svg:svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var xScale = d3.scale.linear().domain([1, -1]).range([width - padding, padding]); | |
| var yScale = d3.scale.linear().domain([-1, 1]).range([height - padding, padding]); | |
| // y axis | |
| var yAxis = d3.svg.axis() | |
| .orient("left") | |
| .tickValues([]) | |
| .scale(yScale); | |
| // x axis | |
| var xAxis = d3.svg.axis() | |
| .orient("bottom") | |
| .tickValues([]) | |
| .scale(xScale); | |
| var xAxisPlot = vis.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + (height / 2) + ")") | |
| .call(xAxis) //.tickSize(-height, 0)); | |
| var yAxisPlot = vis.append("g") | |
| .attr("class", "axis axis--y") | |
| .attr("transform", "translate(" + (width / 2) + ",0)") | |
| .call(yAxis) //.tickSize(-width, 0)); | |
| var data = [ | |
| { | |
| x: -0.75, | |
| y: 0.25 | |
| }, { | |
| x: 0.50, | |
| y: -0.50 | |
| }, { | |
| x: 0.50, | |
| y: 0.50 | |
| } ,{ | |
| x: -0.50, | |
| y: -0.50 | |
| } | |
| ]; | |
| vis.selectAll(".xaxis text") // select all the text elements for the xaxis | |
| .attr("transform", function (d) { | |
| return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)"; | |
| }); | |
| vis.append("text") | |
| .attr("text-anchor", "midde") | |
| .attr("transform", "translate(30,370)") | |
| .text("Geminsnn"); | |
| vis.append("text") | |
| .attr("text-anchor", "midde") | |
| .attr("transform", "translate(345,700)") | |
| .text("Flexibilität"); | |
| vis.append("text") | |
| .attr("text-anchor", "midde") | |
| .attr("transform", "translate(345,60)") | |
| .text("Stabilität"); | |
| vis.append("text") | |
| .attr("text-anchor", "midde") | |
| .attr("transform", "translate(650,370)") | |
| .text("Selbswichlung"); | |
| vis.selectAll(".point") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "point") | |
| .attr("r", 5) | |
| .style("fill", "steelblue") | |
| .attr("cx", function (d) { | |
| return xScale(d.x); | |
| }) | |
| .attr("cy", function (d) { | |
| return yScale(d.y); | |
| }); | |
| vis.append('path') | |
| .datum(data) | |
| .attr('fill', 'red') | |
| .attr('stroke', '#69b3a2') | |
| .attr('stroke-width', 1.5) | |
| .attr('d', d => d3.svg.line() | |
| .x(d => xScale(d.x)) | |
| .y(d => yScale(d.y))(d) + 'Z') | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment