Skip to content

Instantly share code, notes, and snippets.

@YouthBread

YouthBread/.block

Last active September 26, 2017 02:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save YouthBread/58164d9f0da135df3e9e58ccc416bd33 to your computer and use it in GitHub Desktop.
Save YouthBread/58164d9f0da135df3e9e58ccc416bd33 to your computer and use it in GitHub Desktop.
Download ZIP
Recreate Marks and Channels
Raw
.block
license: mit
Raw
README.md

This is the recreate a example of Marks and Channels with a button to create new line.

Built with blockbuilder.org

Raw
index.html
<!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