| license: gpl-3.0 |
A quick, dirty, and evil template for compiling ES6 in the browser.
The Function constructor is a form of eval, and using it is a bad practice.
Also, using Babel in the browser is slow and deprecated.
So, never do this. 😁
forked from plmrry's block: Babel Standalone Template
forked from plmrry's block: Force Transition
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| d3.text('script.js', function(err, source) { | |
| var options = { presets: ['es2015'] }; | |
| var compiled = Babel.transform(source, options).code; | |
| (new Function(compiled))(); | |
| }) | |
| </script> | |
| </body> |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 360) | |
| .attr("height", 200); | |
| var svg = d3.select("svg"), | |
| margin = {top: 40, right: 40, bottom: 40, left: 40}, | |
| width = svg.attr("width") - margin.left - margin.right, | |
| height = svg.attr("height") - margin.top - margin.bottom; | |
| var formatValue = d3.format(",d"); | |
| var x = d3.scaleLinear() | |
| .rangeRound([0, width]); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| const data = d3.range(100).map(d => ({ value: Math.random() })) | |
| x.domain(d3.extent(data, function(d) { return d.value; })); | |
| const x1 = d3.forceX(function(d) { return x(0.75); }).strength(0.1); | |
| const x2 = d3.forceX(function(d) { return x(0.25); }).strength(0); | |
| var simulation = d3.forceSimulation(data) | |
| .force("x", x1) | |
| .force('x2', x2) | |
| .force("y", d3.forceY(height / 2)) | |
| .force("collide", d3.forceCollide(4)) | |
| .on('tick', ticked) | |
| d3.select('body').append('button').text('switch').on('click', change); | |
| let foo = true; | |
| let strength = 0; | |
| function change() { | |
| foo = !foo; | |
| const end = foo ? 0.3 : 0; | |
| // d3.transition() | |
| // .duration(2000) | |
| // .tween('x', () => { | |
| // const i = d3.interpolate(strength, end); | |
| // return (t) => { | |
| // strength = i(t); | |
| // x2.strength(strength); | |
| // } | |
| // }) | |
| if (foo) { | |
| x1.strength(0.3); | |
| x2.strength(0); | |
| } else { | |
| x1.strength(0); | |
| x2.strength(0.3); | |
| } | |
| simulation.alpha(0.2).restart(); | |
| } | |
| g.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x).ticks(5)); | |
| var cell = g.append("g") | |
| .attr("class", "cells") | |
| .selectAll("g").data(data).enter().append("g"); | |
| cell.append("circle") | |
| .attr("r", 3); | |
| function ticked() { | |
| d3.selectAll('circle') | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| } |
