This is the recreate a example of Marks and Channels with a button to create new line.
Built with blockbuilder.org
Last active
September 26, 2017 02:54
-
-
Save YouthBread/58164d9f0da135df3e9e58ccc416bd33 to your computer and use it in GitHub Desktop.
Recreate Marks and Channels
This file contains hidden or 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 hidden or 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| circle:hover { | |
| fill: #F012BE; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 150px; | |
| height: 30px; | |
| vertical-align: middle; | |
| line-height: 30px; | |
| font-family:'Open Sans', sans-serif; | |
| background: #FFDC00; | |
| border: 0px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="option"> | |
| <input name="updateButton" | |
| type="button" | |
| value="New Line" | |
| onclick="draw_line()" /> | |
| </div> | |
| <script> | |
| const xValue = d => d.x; | |
| const yValue = d => d.y; | |
| const dxValue = d => d.dx; | |
| const dyValue = d => d.dy; | |
| const Name = d => d.sName; | |
| const xScale = d3.scaleLinear(); | |
| const yScale = d3.scaleLinear(); | |
| const svg = d3.select("body").append("svg") | |
| .attr("width", 1000) | |
| .attr("height", 500); | |
| var temp = d3.select('body').append('div') | |
| .attr('class', 'tooltip') | |
| .style('opacity', 0); | |
| const margin = { left: 120, right: 120, top: 20, bottom: 120 }; | |
| const width = svg.attr('width'); | |
| const height = svg.attr('height'); | |
| const innerWidth = width - margin.left - margin.right; | |
| const innerHeight = height - margin.top - margin.bottom; | |
| const g = svg.append('g') | |
| .attr('transform', `translate(${margin.left},${margin.top})`); | |
| const xAxisG = g.append('g') | |
| .attr('transform', `translate(0, ${innerHeight+50})`); | |
| const yAxisG = g.append('g') | |
| .attr('transform', `translate(0, 50)`); | |
| const data = [ | |
| {x: 0, y: 0, name: 'A',}, | |
| {x: 1, y: 0, name: 'B',}, | |
| {x: 2, y: 0, name: 'C',}, | |
| {x: 3, y: 0, name: 'D',}, | |
| {x: 0, y: 1, name: 'E',}, | |
| {x: 1, y: 1, name: 'F',}, | |
| {x: 2, y: 1, name: 'G',}, | |
| {x: 3, y: 1, name: 'H',}, | |
| ]; | |
| xScale | |
| .domain(d3.extent(data, xValue)) | |
| .range([0, innerWidth]) | |
| .nice(); | |
| yScale | |
| .domain(d3.extent(data, yValue)) | |
| .range([innerHeight, 0]) | |
| .nice(); | |
| g.selectAll('circle').data(data) | |
| .enter().append('circle') | |
| .attr('cx', d => xScale(xValue(d))) | |
| .attr('cy', d => yScale(yValue(d))+50) | |
| .attr('r', 20) | |
| .attr('fill', 'black') | |
| .attr('fill-opacity', 0.6) | |
| .on("mouseover", function(d) { | |
| temp.transition() | |
| .duration(200) | |
| .style("opacity", 1); | |
| temp.html(d.name) | |
| .style("left", (d3.event.pageX - 60) + "px") | |
| .style("top", (d3.event.pageY + 20) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| temp.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| function draw_line() { | |
| g.selectAll("line") | |
| .filter(function() { return this.style.stroke == "red"; }) | |
| .remove() | |
| var xrandom = Math.floor(d3.randomUniform(0, 4)()); | |
| var yrandom = Math.floor(d3.randomUniform(0, 2)()); | |
| var xrandom_d = Math.floor(d3.randomUniform(0, 4)()); | |
| var yrandom_d = Math.floor(d3.randomUniform(0, 2)()); | |
| while (xrandom == xrandom_d && yrandom==yrandom_d) { | |
| var xrandom_d = Math.floor(d3.randomUniform(0, 4)()); | |
| var yrandom_d = Math.floor(d3.randomUniform(0, 2)()); | |
| } | |
| g.append('line') | |
| .style("stroke", "red") | |
| .style("stroke-linecap", "round") | |
| .style("stroke-width", 10) | |
| .attr("x1", xScale(xrandom)) | |
| .attr("y1", yScale(yrandom)+50) | |
| .attr("x2", xScale(xrandom_d)) | |
| .attr("y2", yScale(yrandom_d)+50); | |
| } | |
| g.append('line') | |
| .style("stroke", "black") | |
| .style("stroke-linecap", "round") | |
| .style("stroke-width", 10) | |
| .attr("x1", xScale(0)) | |
| .attr("y1", yScale(0)+50) | |
| .attr("x2", xScale(1)) | |
| .attr("y2", yScale(1)+50); | |
| g.append('line') | |
| .style("stroke", "black") | |
| .style("stroke-linecap", "round") | |
| .style("stroke-width", 10) | |
| .attr("x1", xScale(2)) | |
| .attr("y1", yScale(0)+50) | |
| .attr("x2", xScale(1)) | |
| .attr("y2", yScale(1)+50); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment