D3.js d3.geo.projection TEST
How do I make an d3.js d3.geo.projection test?
D3.js d3.geo.projection TEST. What is a d3.js d3.geo.projection test? How do you make a d3.js d3.geo.projection test? This script and codes were developed by NaKaz on 24 August 2022, Wednesday.
D3.js d3.geo.projection TEST - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3.js d3.geo.projection TEST</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.1.6/d3.min.js" type="text/javascript"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script><div id="wrapper1" class="index-15"> <div id="svg2"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
D3.js d3.geo.projection TEST - Script Codes CSS Codes
.index-15 .node { fill: #4679c5; fill-opacity: 0.55; font-weight: bold; font-size: 2.5em; cursor: pointer;
}
.index-15 .link { stroke: #5e9fe2; stroke-opacity: 0.55;
}
.index-15 #svg2 { float: none;
}
.index-15 #svg2 path.node { stroke-width: 1.5px;
}
.index-15 #svg2 path.link { stroke: #999; fill-opacity: 0;
}
D3.js d3.geo.projection TEST - Script Codes JS Codes
(function() { "use strict"; (function($, win, doc) { var $doc, $win, _config, bRadiusChanger, chargeChanger, clipChanger, config, fill, fl, flSize, force, frictionChanger, gravityChanger, gui, height, link, linkDistanceChanger, linkStrengthChanger, links, node, nodes, path, projection, projectionChanger, projections, sizeXChanger, sizeYChanger, source, svg, target, thetaChanger, tick, width, wrapIndex, x; $win = $(win); $doc = $(doc); width = 970; height = 650; fill = d3.scale.category20(); nodes = [ { x: width / 2, y: height / 2 } ]; links = []; x = 0; source = void 0; while (x < 100) { source = nodes[~~(Math.random() * nodes.length)]; target = { x: source.x + Math.random(), y: source.y + Math.random(), group: Math.random() }; links.push({ source: source, target: target }); nodes.push(target); x++; } /*projectionsAlt = Orthographic : d3.geo.orthographic() "Azimuthal Equal Area": d3.geo.azimuthalEqualArea() "Azimuthal Eqidistant": d3.geo.azimuthalEquidistant() "Conic Conformal" : d3.geo.conicConformal() "Conic Equal Area" : d3.geo.conicEqualArea() "Conic Equidistant" : d3.geo.conicEquidistant() "Transverse Mercator" : d3.geo.transverseMercator() Albers : d3.geo.albers() Eqirectangular : d3.geo.equirectangular() Gnomonic : d3.geo.gnomonic() Mercator : d3.geo.mercator() Stereographic : d3.geo.stereographic() */ projections = { Orthographic: d3.geo.orthographic(), Gnomonic: d3.geo.gnomonic(), Stereographic: d3.geo.stereographic(), "Aitoff": d3.geo.aitoff(), "Albers": d3.geo.albers(), "August": d3.geo.august(), "Azimuthal Equal Area": d3.geo.azimuthalEqualArea(), "Azimuthal Eqidistant": d3.geo.azimuthalEquidistant(), "Baker": d3.geo.baker(), "Boggs": d3.geo.boggs(), "Bonne": d3.geo.bonne(), "Bromley": d3.geo.bromley(), "Collignon": d3.geo.collignon(), "Conic Conformal": d3.geo.conicConformal(), "Conic Equal Area": d3.geo.conicEqualArea(), "Conic Equidistant": d3.geo.conicEquidistant(), "Craster Parabolic": d3.geo.craster(), "Eckert I": d3.geo.eckert1(), "Eckert II": d3.geo.eckert2(), "Eckert III": d3.geo.eckert3(), "Eckert IV": d3.geo.eckert4(), "Eckert V": d3.geo.eckert5(), "Eckert VI": d3.geo.eckert6(), "Eisenlohr": d3.geo.eisenlohr(), "Equirectangular(PlateCarrée)": d3.geo.equirectangular(), "Hammer": d3.geo.hammer(), "Hill": d3.geo.hill(), "Goode Homolosine": d3.geo.homolosine(), "Ginzburg IV": d3.geo.ginzburg4(), "Ginzburg V": d3.geo.ginzburg5(), "Ginzburg VI": d3.geo.ginzburg6(), "Ginzburg VIII": d3.geo.ginzburg8(), "Ginzburg IX": d3.geo.ginzburg9(), "Gringorten": d3.geo.gringorten(), "Guyou": d3.geo.guyou(), "Kavrayskiy VII": d3.geo.kavrayskiy7(), "LambertCylindricalEqualArea": d3.geo.cylindricalEqualArea(), "Lagrange": d3.geo.lagrange(), "Larrivée": d3.geo.larrivee(), "Laskowski": d3.geo.laskowski(), "Loximuthal": d3.geo.loximuthal(), "Mercator": d3.geo.mercator(), "Miller": d3.geo.miller(), "McBrydeThomasFlat-PolarParabolic": d3.geo.mtFlatPolarParabolic(), "McBrydeThomasFlat-PolarQuartic": d3.geo.mtFlatPolarQuartic(), "McBrydeThomasFlat-PolarSinusoidal": d3.geo.mtFlatPolarSinusoidal(), "Mollweide": d3.geo.mollweide(), "Natural Earth": d3.geo.naturalEarth(), "Nell–Hammer": d3.geo.nellHammer(), "Polyconic": d3.geo.polyconic(), "Robinson": d3.geo.robinson(), "Sinusoidal": d3.geo.sinusoidal(), "Sinu-Mollweide": d3.geo.sinuMollweide(), "Transverse Mercator": d3.geo.transverseMercator(), "van der Grinten": d3.geo.vanDerGrinten(), "van der Grinten IV": d3.geo.vanDerGrinten4(), "Wagner IV": d3.geo.wagner4(), "Wagner VI": d3.geo.wagner6(), "Wagner VII": d3.geo.wagner7(), "Winkel Tripel": d3.geo.winkel3() }; config = { projection: "Orthographic", clip: true, friction: .9, linkStrength: 1, linkDistance: 20, charge: 30, gravity: .1, theta: .8, bRadius: 51, sizeX: width, sizeY: height }; force = d3.layout.force().linkDistance(config["linkDistance"]).linkStrength(config["linkStrength"]).gravity(config["gravity"]).size([config.sizeX, config.sizeY]).charge(-config["charge"]); projection = projections[config["projection"]].scale(height / 2).translate([(width / 2) - 125, height / 2]).clipAngle((config["clip"] ? 90 : null)); svg = d3.select("#svg2").append("svg").attr("width", width).attr("height", height).call(d3.behavior.drag().origin(function() { var r; r = projection.rotate(); return { x: 2 * r[0], y: -2 * r[1] }; }).on("drag", function() { var origin, r, t0; force.start(); r = [d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]]; t0 = Date.now(); origin = r; return projection.rotate(r); })); path = d3.geo.path().projection(projection); link = svg.selectAll("path.link").data(links).enter().append("path").attr("class", "link"); node = svg.selectAll("path.node").data(nodes).enter().append("path").attr("class", "node").style("fill", function(d) { return fill(d.group); }).style("stroke", function(d) { return d3.rgb(fill(d.group)).brighter(); }).call(force.drag); gui = new dat.GUI(); fl = gui.addFolder("Force Layout Sub"); flSize = gui.addFolder("Force Sizes"); flSize.open(); bRadiusChanger = flSize.add(config, "bRadius", 1, 151); tick = function() { bRadiusChanger.onChange(function(value) { return config.bRadius = Math.floor(value); }); link.attr("d", function(d) { var p; p = path({ type: "Feature", geometry: { type: "LineString", coordinates: [[d.source.x, d.source.y], [d.target.x, d.target.y]] } }); if (p) { return p; } else { return "M 0 0"; } }); return node.attr("d", function(d) { var p; path.pointRadius(config.bRadius); p = path({ type: "Feature", geometry: { type: "Point", coordinates: [d.x, d.y] } }); if (p) { return p; } else { return "M 0 0"; } }); }; force.nodes(nodes).links(links).on("tick", tick).start(); wrapIndex = function(i, i_max) { return ((i % i_max) + i_max) % i_max; }; projectionChanger = gui.add(config, "projection", Object.keys(projections)); projectionChanger.onChange(function(value) { projection = projections[value].scale(height / 2).translate([(width / 2) - 125, height / 2]).clipAngle((config["clip"] ? 90 : null)); path.projection(projections[value]); /*if value is "rectangular" path = d3.geo.path().projection((coordinates) -> console.log coordinates[0], coordinates[1] [wrapIndex(coordinates[0], width), wrapIndex(coordinates[1], height)] ) config["clip"] = false else projection.mode value path = d3.geo.path().projection(projection) */ return force.start(); }); clipChanger = gui.add(config, "clip").listen(); clipChanger.onChange(function(value) { projection.clipAngle((value ? 90 : null)); return force.start(); }); frictionChanger = fl.add(config, "friction", 0, 1); frictionChanger.onChange(function(value) { force.friction(value); return force.start(); }); linkDistanceChanger = fl.add(config, "linkDistance", 0, 400); linkDistanceChanger.onChange(function(value) { force.linkDistance(value); return force.start(); }); linkStrengthChanger = fl.add(config, "linkStrength", 0, 1); linkStrengthChanger.onChange(function(value) { force.linkStrength(value); return force.start(); }); chargeChanger = fl.add(config, "charge", 0, 500); chargeChanger.onChange(function(value) { force.charge(-value); return force.start(); }); gravityChanger = fl.add(config, "gravity", 0, 1); gravityChanger.onChange(function(value) { force.gravity(value); return force.start(); }); thetaChanger = fl.add(config, "theta", 0, 1); thetaChanger.onChange(function(value) { force.theta(value); return force.start(); }); sizeXChanger = flSize.add(config, "sizeX", 0, 9999); sizeYChanger = flSize.add(config, "sizeY", 0, 9999); _config = {}; _config = config; sizeXChanger.onChange(function(valueX) { _config.sizeX = valueX; force.size([_config.sizeX, _config.sizeY]); return force.start(); }); return sizeYChanger.onChange(function(valueY) { _config.sizeY = valueY; force.size([_config.sizeX, _config.sizeY]); return force.start(); }); })(jQuery, this, this.document);
}).call(this);
Developer | NaKaz |
Username | nakakaz11 |
Uploaded | August 24, 2022 |
Rating | 3 |
Size | 7,169 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CountUP Class sandbox | 3,229 Kb |
Test OMG Particles II | 2,879 Kb |
A Pen by NaKaz | 2,669 Kb |
D3.js su_ji_Force | 4,348 Kb |
MVC tab TEST | 4,804 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!