Wrap_Test

Developer
Melanie Fournier
Size
7,503 Kb
Views
30,360
  1. Wrap_Test Previews
  2. Wrap_Test HTML Codes
  3. Wrap_Test CSS Codes
  4. Wrap_Test JS Codes

How do I make an wrap_test?

What is a wrap_test? How do you make a wrap_test? This script and codes were developed by Melanie Fournier on 09 September 2022, Friday.

Wrap_Test Previews
IQ Test

Wrap_Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wrap_Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
<script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <h2>Eastern Canadian Arctic domestic shipping companies and their interactions.</h2> <p>Click on a partition to zoom in and click on the center to zoom out.</p> <p>Pass your mouse over a partition to see more information about the interactions domestic shipping companies can have.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wrap_Test - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
circle, path { cursor: pointer;
}
circle { fill: none; pointer-events: all;
}
.d3-tip { width: 300px; line-height: 1; padding: 5px; background: rgba(254, 252, 255, 1); color: #c9c9b5; border: solid 1px #aaa; border-radius: 8px;
}

Wrap_Test - Script Codes JS Codes

//label orientation:http://tributary.io/inlet/4127332/
//original code: https://bl.ocks.org/mbostock/5944371
root = { "name": "", "children": [ { "name": "Artic Council", "citation": "On an operational basis there is no interaction between domestic shipping companies and the Arctic Council. The Economic Council does, however, serve as a venue for communication.", "children": [ { "name": "Agreement", "children": [ { "name": "Coop. on Aeronautical and Maritime SAR in the Arctic", "size": 15 }, { "name": "Coop. on Marine Oil Pollution Preparedness and Response in the Arctic", "size": 15 } ] } ] }, { "name": "Banks", "citation": "Interactions occur over the typical day-to-day business of running a company (banking accounts, loans, etc.).","size": 30 }, { "name": "Class. Societies", "citation": "Shipping companies regularly interact with classification societies for ship inspections and certificates.", "children": [ { "name": "Requirements", "children": [ { "name": " IACS Unified Requirements for Polar Ships", "size": 30 } ] } ] }, { "name": "Ice navigators", "citation": "Ice navigators are employed by domestic shipping companies as they are required under AWPPA and will be mandatory under the Polar Code.", "size": 30 }, { "name": "Insurances", "citation": "There is an indirect interaction between insurance companies and domestic shipping companies through resident experts and insurance brokers.", "size": 30 }, { "name": "United Nations", "children": [	{ "name": "IMO", "citation": "There is no direct interaction on an operational basis between the IMO and domestic shipping companies. There are opportunities, however, for companies to provide input to the IMO.", "children": [	{ "name": "Spec. conventions", "children": [ { "name": "Geneva Conv. on the Law of the Sea", "size": 15 }, { "name": "UNCLOS", "size": 15 } ]	},	{ "name": "Guidelines",	"children": [ { "name": "Ships Operating in Arctic Ice-covered Waters", "size": 15 }, { "name": "Guide for Cold Water Survival", "size": 15 }, { "name": "Voyage Planning for Passenger Ships Operating in Remote Areas", "size": 15 }, { "name": "Ships Operating in Polar Waters", "size": 15 } ] },	{ "name": "Regulations", "children": [ { "name": "IMDG code", "size": 15 }, { "name": "Load Lines", "size": 15 }, { "name": "Hague-Visby Rules", "size": 15 }, { "name": "COLREGs", "size": 15 }, { "name": "CSC", "size": 15 }, { "name": "MARPOL", "size": 15 }, { "name": "SOLAS", "size": 15 }, { "name": "STCW", "size": 15 }, { "name": "SAR", "size": 15 }, { "name": "OPRC", "size": 15 }, { "name": "CLC", "size": 15 }, { "name": "FUND", "size": 15 }, { "name": "LLMC", "size": 15 }, { "name": "BWM", "size": 15 }, { "name": "International Code on Intact Stability", "size": 15 }, { "name": "Polar Code", "size": 15 } ]	} ]	},	{ "name": "ILO", "citation": "There are no direct interactions between the ILO and domestic shipping companies. The only link is through the regulations of the ILO.", "children": [	{ "name": "MLC", "size": 25	} ]	} ] }, { "name": "Gov. of Canada",	"children": [	{	"name": "AANDC", "citation": "There is no direct interaction with AANDC. Sometimes they communicate at industry-government forums and conferences.", "size": 30	},	{	"name": "CanNor", "citation": "To date there have been no direct interactions with CanNor.", "size": 30	},	{	"name": "DND", "citation": "DND has been an occasional client for sealift services, but other than that they interact very little with domestic shipping companies. There is some interaction at industry-government forums and conferences.","size": 30	},	{	"name": "DFO",	"citation": "Occasionally some companies will use the marine facilities of DFO, but they do not directly interact.",	"children": [ {	"name": "CCGs", "citation": "When icebreakers are required there are daily conference calls between the domestic shipping company in need and the CCG. They also directly interact at the management level through the Marine Advisory Board and other industry forums.", "children": [ { "name": "MCTS", "citation": "The domestic shipping companies themselves do not interact with MCTS, but those onboard the vessels operating in the Arctic communicate with them daily.", "size": 10 } ] }, {	"name": "CHS", "citation": "CHS and domestic shipping companies have regular dialogue at industry-government meetings such as CMAC and ACAB and as part of direct consultation with respect to new and existing project and to discuss priorities for charting.", "size": 10 }, { "name": "Act", "children": [ { "name": "Oceans Act", "size": 10 } ] }, { "name": "Manual", "children": [ {"name": "Ice navigation in Canadian Waters", "size": 10}, {"name": "Marine Environmental Handbook", "size":10} ] } ]	},	{ "name": "Env. Canada", "citation": "Environment Canada produces weather forecasts and other online published products that are used by companies, but there is no interaction between them and domestic shipping companies.", "children": [ { "name": "CIS", "citation": "CIS publishes ice charts daily online which are used by domestic shipping companies. There is also some communication and interaction with respect to development and implementation of new products.", "size": 20 }, { "name": "CWS", "citation": "The CWS has been an occasional client for sealift services, but they do not interact on an operational basis with domestic shipping companies.", "size": 20 }, { "name": "Acts", "children": [ { "name": "Canada Wildlife Act", "size": 10 }, { "name": "Migratory Birds Convention Act", "size": 10 }, { "name": "CEPA", "size": 10 }, { "name": "SARA", "size": 10 } ] } ] },	{ "name": "NRCan", "citation": "There is no direct interaction between domestic shipping companies and NRCan.", "size": 20 }, { "name": "Parks Canada", "citation": "Parks Canada has been an occasional client for sealift services, but other than that they interact very little with domestic shipping companies. There is some interaction at industry-government forums and conferences.", "children":[ {"name": "NMCA Act ", "size": 15} ] }, { "name": "PSC", "citation": "There is no direct interaction between domestic shipping companies and Public Safety Canada.", "size": 15 }, { "name": "TC", "citation": "Transport Canada regulates shipping in Canada. Some members of the domestic shipping industry also participate as an observer and advisor to TC at IMO, and therefore there are extensive interactions.", "children": [	{	"name": "Marine Safety", "citation": "Marine Safety and domestic shipping companies interact through the application of the Canada Shipping Act and subsequent regulations.", "size": 20	},	{	"name": "Marine Security", "citation": "Marine Security and domestic shipping companies interact through the application of the Canada Shipping Act and subsequent regulations.", "size": 20	}, { "name": "Acts & Reg.", "children": [ { "name": "AWPPA", "children":[ { "name": "ASPPR", "size": 10 }, { "name": "Shipping Safety Control Zones Order", "size": 10 }, { "name": "Steering Appliances and Equipment Reg.", "size": 10 }, { "name": "AWPPR", "size": 10 }, { "name": "Charts and Nautical Publications Reg.", "size": 10 }, { "name": "Radio Reg.", "size": 10 }, { "name": "Navigation Safety Reg.", "size": 10 } ] }, { "name": "Marine Transportation Security Act", "children": [ { "name": "MTSR", "size": 10 } ] }, { "name": "Marine Liability Act", "size": 15 }, { "name": "CSA", "size": 15 }, {"name": "Guidelines", "children": [ {"name": "Arctic Waters Oil Transfer Guidelines", "size": 15}, {"name": "Guidelines for the Operation of Tankers and Barges in Canada", "size": 15}, {"name": "Guidelines for the Operation of Passenger Vessels in Canadian Arctic Waters", "size": 15} ] } ] } ] } ] }, { "name": "Fishing Industry", "citation": "There is no direct interaction between domestic shipping companies and the fishing industry, other than as part of industry-government forums and conferences.", "size": 30 }, { "name": "Mining Industry", "citation": "The mining industry has been a client for sealift services, and there are regular interactions between them and domestic shipping companies through community meetings required as part of resource development projects.", "size": 30 }, { "name": "Oil & Gas Ind.", "citation": "The oil and gas industry has been a client for sealift service. They also interact with domestic shipping companies for ice-related matters, such as for the provision of software for ice navigation systems.", "size": 30 }, { "name": "NGOs", "citation": "In some instances NGO's have been the clients of sealift services.", "size": 30 }, { "name": "Northern Pop.", "citation": "Northern populations have been the clients of sealift services.", "children": [ {	"name": "Inuit", "citation": "There are regular interactions between Inuit and domestic shipping companies through community meetings as part of resource development projects. There is also a commercial partnership between Inuit and one of the shipping companies (NEAS).", "size": 20 }, { "name": "Non-Inuit", "citation": "Non-Inuit have been the clients of sealift services, but other than that there is little to no interaction between them and domestic shipping companies.", "size": 20 } ] }, { "name": "Research", "citation": "The research community and domestic shipping companies directly interact through research projects as sponsors and as an industry resource.", "size": 30 }, { "name": "Territories", "children": [ {	"name": "NWT", "citation": "There is no direct interaction between domestic shipping companies and the GNWT other than as part of industry-government forums and conferences.", "size": 20 }, {	"name": "Nunavut", "citation": "The GN is a major client of sealift services, and interact regularly with some concerning marine infrastructure development. Otherwise, interactions are limited to industry-government forums and conferences.", "children": [ { "name": "Act", "children": [ { "name": "Emergency Measures Act", "size": 15 } ] } ] }, {	"name": "Yukon", "citation": "There is no direct interaction between domestic shipping companies and the Government of the Yukon other than the occasional communications.", "children": [ { "name": "Act", "children": [ { "name": "Civil Emergency Measures Act", "size": 15 } ] } ] } ] } ]
}
var margin = {top: 380, right: 480, bottom: 380, left: 480}, radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) + 0;
var hue = d3.scale.category20b();
var luminance = d3.scale.sqrt();
var tip = d3.tip() .attr('class', 'd3-tip') .offset([200, 300]) .html(function (d) { return "<span style='color:black'>" + d.citation + "</span>";
});
var svg = d3.select("body").append("svg") .attr("width", margin.left + margin.right) .attr("height", margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") //.call(tip);
var partition = d3.layout.partition() .sort(function(a, b) { return d3.ascending(a.name, b.name); }) .size([2 * Math.PI, radius]);
var arc = d3.svg.arc() .startAngle(function(d) { return d.x; }) .endAngle(function(d) { return d.x + d.dx - .01 / (d.depth + 1); }) .innerRadius(function(d) { return radius / 3 * d.depth; }) .outerRadius(function(d) { return radius / 3 * (d.depth + 1) - 1; });
//d3.json("flare.json", function(error, root) {
console.log(root); // Compute the initial layout on the entire tree to sum sizes. // Also compute the full name and fill color for each node, // and stash the children so they can be restored as we descend. partition .value(function(d) { return d.size; }) .nodes(root) .forEach(function(d) { d._children = d.children; d.sum = d.value; d.key = key(d); d.fill = fill(d); }); // Now redefine the value function to use the previously-computed sum. partition .children(function(d, depth) { return depth < 2 ? d._children : null; }) .value(function(d) { return d.sum; }); var center = svg.append("circle") .attr("r", radius / 4) .on("click", zoomOut); center.append("title") .text("zoom out"); var path = svg.selectAll("path") .data(partition.nodes(root).slice(1)) .enter().append("path") .attr("d", arc) .style("fill", function(d) { return d.fill; }) .each(function(d) { this._current = updateArc(d); }) .on('mouseover', tip.show) .on('mouseout', tip.hide) .on("click", zoomIn);
function mouseover(d) { d3.select(this).append("text") .attr("class", "hover") .attr('transform', function (d) { return 'translate(5, -10)'; }) .text(d.citation);
}
function mouseout(d) { d3.select(this).select("text.hover").remove();
}
var text = svg.selectAll("text") .data(partition.nodes(root).slice()) .enter().append("text") .attr("text-anchor", function(d) { return d.x + d.dx / 2 > Math.PI ? "end" : "start"; }) .attr("transform", function(d) { var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90; return "rotate(" + angle + ")translate(" + (d.y + 10) + ")rotate(" + (angle > 90 ? -180 : 0) + ")" })
//.attr("x", function(d) {return radius / 100 * d.depth; })
.attr("dx", "10") // margin
.attr("dy", "0.5em") // vertical-align
.style("font", "14px 'Roboto'")
.html(function(d) { return d.name; })
.call(wrap,120); function zoomIn(p) { if (p.depth > 1) p = p.parent; if (!p.children) return; zoom(p, p); } function zoomOut(p) { if (!p.parent) return; zoom(p.parent, p); }
// Zoom to the specified new root. function zoom(root, p) { if (document.documentElement.__transition__) return; // Rescale outside angles to match the new layout. var enterArc, exitArc, outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]); function insideArc(d) { return p.key > d.key ? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key ? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0} : {depth: 0, x: 0, dx: 2 * Math.PI}; } function outsideArc(d) { return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)}; } center.datum(root); // When zooming in, arcs enter from the outside and exit to the inside. // Entering outside arcs start from the old layout. if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]); path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; }); // When zooming out, arcs enter from the inside and exit to the outside. // Exiting outside arcs transition to the new layout. if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]); d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() { path.exit().transition() .style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; }) .attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); }) .remove(); path.enter().append("path") .style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; }) .style("fill", function(d) { return d.fill; }) .on("click", zoomIn) .each(function(d) { this._current = enterArc(d); }); path.transition() .style("fill-opacity", 1) .attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); }); }); // Edit - Ch Added re-definition of text on action text = text.data(partition.nodes(root).slice(1), function(d) { return d.key }); // Edit - Ch Alternate location for text transition code text.exit().transition() .style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; }) .remove(); text.enter().append("text") .attr("text-anchor", function(d) { return d.x + d.dx / 2 > Math.PI ? "end" : "start"; }) .attr("transform", function(d) { var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90; return "rotate(" + angle + ")translate(" + (d.y + 10) + ")rotate(" + (angle > 90 ? -180 : 0) + ")" }) //.attr("x", function(d) {return radius / 100 * d.depth; }) .attr("dx", "10") // margin .attr("dy", "0.5em") // vertical-align .style("font", "14px 'Roboto'") .html(function(d) { return d.name; }) .call(wrap,120); text.transition() .style("fill-opacity", 1) .attr("text-anchor", function(d) { return d.x + d.dx / 2 > Math.PI ? "end" : "start"; }) .attr("transform", function(d) { var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90; return "rotate(" + angle + ")translate(" + (d.y + 1) + ")rotate(" + (angle > 90 ? -180 : 0) + ")" }) //.attr("x", function(d) {return radius / 100 * d.depth; }) .attr("dx", "10") // margin .attr("dy", "0.5em") // vertical-align .style("font", "14px 'Roboto'") .html(function(d) { return d.name; }) .call(wrap,120) }
function key(d) { var k = [], p = d; while (p.depth) k.push(p.name), p = p.parent; return k.reverse().join(".");
}
function fill(d) { var p = d; while (p.depth > 1) p = p.parent; var c = d3.lab(hue(p.name)); return c;
}
function arcTween(b) { var i = d3.interpolate(this._current, b); this._current = i(0); return function(t) { return arc(i(t)); };
}
function updateArc(d) { return {depth: d.depth, x: d.x, dx: d.dx};
}
function computeTextRotation(d) { return (d.x + (d.dx)/2) * 180 / Math.PI - 90;
}	// Wrap function to handle labels with longer text function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 0.5, // ems x = text.attr("x"), y = text.attr("y"), dy = parseFloat(text.attr("dy")) || 0, tspan = text.text(null).append("tspan").attr("x", -7).attr("y", 0).attr("dy", dy + "em");	console.log("tspan: " + tspan); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > 120) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); } } }); }
d3.select(self.frameElement).style("height", margin.top + margin.bottom + "px");
Wrap_Test - Script Codes
Wrap_Test - Script Codes
Home Page Home
Developer Melanie Fournier
Username mscfourn
Uploaded September 09, 2022
Rating 3
Size 7,503 Kb
Views 30,360
Do you need developer help for Wrap_Test?

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!

Melanie Fournier (mscfourn) Script Codes
Name
IOI2017
A Pen by Melanie Fournier
Create amazing art & images with AI!

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!