A Pen by Ken

Developer
Ken
Size
7,729 Kb
Views
2,024
  1. A Pen by Ken Previews
  2. A Pen by Ken HTML Codes
  3. A Pen by Ken CSS Codes
  4. A Pen by Ken JS Codes

How do I make an a pen by ken?

What is a a pen by ken? How do you make a a pen by ken? This script and codes were developed by Ken on 10 January 2023, Tuesday.

A Pen by Ken Previews
IQ Test

A Pen by Ken - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Ken</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Coffee Flavour Wheel</h1>
<!-- sunburt graph below -->
<div id="sunburst"><img src=""></div> <!-- loading image -->
<!-- html below -->
<div id="tooltip" class=hidden> <p><strong>Important Label Heading</strong> </p> <p><span id="value">100</span>%</p>
</div>
<h2>Sunburst Trees</h2>
<p>This is an example of using <a href="https://github.com/mbostock/d3/wiki/Partition-Layout">d3.layout.partition</a> to generate a zoomable sunburst tree derived from hierarchical data. A <a href="http://www.cc.gatech.edu/gvu/ii/sunburst/">sunburst tree</a> is a radial space-filling visualisation, analagous to an icicle tree.
<h2>Colours</h2>
<p>The original colours appear to have been selected by the designer, as opposed to matching any standard colour name palettes. So I painstakingly copied the colours from the outermost (leaf) nodes of the tree to match the original.
<p>The inner node colours are calculated automatically by taking the average of the two child nodes in HSL colour space.
<h2>Labels</h2>
<p>The label colour of black or light grey is automatically chosen by calculating the <a href="http://www.w3.org/WAI/ER/WD-AERT/#color-contrast">colour brightness</a> of each node. If a label has more than one word, it is split into two lines and placed equidistant to the centre of the segment.
<h2>Credits</h2>
<p>The original coffee flavour wheel was created by the <a href="http://www.scaa.org/">Specialty Coffee Association of America</a> in poster form but it appears in various places on the Web. <a href="http://www.gourmet-coffee.com/how-to-cup-coffee.html">Rogers Gourmet Coffee &amp; Tea Market</a> seems to have the most information about its origin:
<blockquote> …a flavor wheel created in 1997 by the Specialty Coffee Association of America, the Colombian Coffee Federation, and Jean Lenoir. It's part of the poster called, "The Coffee Tasters' Flavor Wheel" that you can buy on the SCAA website.
</blockquote>
<p>Built with <a href="https://d3js.org">D3.js</a>. Sunburst zooming based on an <a href="https://bl.ocks.org/mbostock/4348373">example</a> by <a href="https://bost.ocks.org/mike">Mike Bostock</a>.
<p>Thanks to Bart Mesuere for suggesting a performance optimisation for Firefox. <script src='https://d3js.org/d3.v3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='https://www.jasondavies.com/coffee-wheel/wheel.json'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Ken - Script Codes CSS Codes

body { font-size:1em; font-weight:400; word-spacing:normal; letter-spacing:normal; text-transform:none; font-family: Verdana,Myriad Web, Syntax, sans-serif; font-size-adjust:.58; color:#000; background:#FFF; line-height:1.58em; border-top:0; border-left:0; border-bottom:0; border-right:0; width:auto; margin:1.58em 5% 1.58em 8%; padding:0
} /* sunburst css */
#sunburst {	font-family:Arial,Verdana, Courier New, monospace; font-size:.6em; /* text heigh of sunburst text */ font-weight: 400 } /* image is swapped in js to svg */
svg { /* center the sunburst graph */ display: block; margin-left: auto; margin-right: auto;
}
#tooltip { position: absolute; width: 200px; height: auto; padding: 10px; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); -mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4); box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4) pointer-events: none;
}
#tooltip.hidden { opacity: 0;
}
#tooltip p { margin: 0; font-family: sans-serif; font-size: 16px; line-height: 20px;
}
small { font-size:.92em
}
big { font-size:1.17em
}
pre { font-family:Verdana,Monotype.com, Courier New, monospace; border-top:0; border-bottom:0; line-height:1.25em; border-left:0; border-right:0; margin:.75em 0; padding:0
}
ol li { list-style-type:decimal
}
ol ol li { list-style-type:lower-alpha
}
ol ol ol li { list-style-type:lower-roman
}
table, tbody, tr, td { font-size:1em; word-spacing:normal; letter-spacing:normal; text-transform:none; font-family:Verdana, Myriad Web, Syntax, sans-serif; font-size-adjust:.58
}
h1 { font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48; font-size:2em; font-weight:700; font-style:normal; text-decoration:none; word-spacing:normal; letter-spacing:normal; text-transform:none; border-top:0; border-bottom:0; border-left:0; border-right:0; text-align:left; margin:1.33em 0 .33em; padding:0
}
h2 { font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48; font-size:1.75em; font-weight:500; font-style:normal; text-decoration:none; word-spacing:normal; letter-spacing:normal; text-transform:none; border-top:0; border-bottom:0; border-left:0; border-right:0; text-align:left; margin:1.75em 0 .33em; padding:0
}
h3 { font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48; font-size:1.58em; font-weight:500; font-style:normal; text-decoration:none; word-spacing:normal; letter-spacing:normal; text-transform:none; border-top:0; border-bottom:0; border-left:0; border-right:0; text-align:left; margin:1.58em 0 .33em; padding:0
}
h4 { font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48; font-size:1.33em; font-weight:500; font-style:oblique; text-decoration:none; word-spacing:normal; letter-spacing:normal; text-transform:none; border-top:0; border-bottom:0; border-left:0; border-right:0; text-align:left; margin:1.33em 0 .33em; padding:0
}
h5, dt { font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48; font-size:1.17em; font-weight:500; font-style:normal; text-decoration:none; word-spacing:normal; letter-spacing:normal; text-transform:none
}
h6 { font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48; font-size:1em; font-weight:500; font-style:normal; text-decoration:none; word-spacing:normal; letter-spacing:normal; text-transform:none; border-top:0; border-bottom:0; border-left:0; border-right:0; text-align:left; margin:1em 0 .33em; padding:0
}
tfoot, thead { font-size:1em; word-spacing:normal; letter-spacing:normal; text-transform:none; font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48
}
th { vertical-align:baseline; font-size:1em; font-weight:700; word-spacing:normal; letter-spacing:normal; text-transform:none; font-family:Myriad Web, Arial, Helvetica, sans-serif; font-size-adjust:.48; text-align:left
}
hr { visibility:visible; color:#000; border-top:0; border-bottom:0; height:1px; border-left:0; border-right:0; text-align:left; width:100%; margin:.75em 0; padding:0
}
a, address, blockquote, body, cite, code, dd, del, dfn, div, dl, dt, form, h1, h2, h3, h4, h5, h6, iframe, img, kbd, li, object, ol, p, q, samp, small, span, strong, ul, var, applet, big, center, dir, font, hr, menu, pre, abbr, acronym, bdo, button, fieldset, ins, label { word-spacing:normal; letter-spacing:normal; text-transform:none; text-decoration:none; border-color:#000; border-style:none
}
strong { font-style:italic; background:#FFF; font-weight:700; color:#000
}
em strong, strong em { text-transform:uppercase; font-style:normal; font-weight:bolder; background:#FFF; color:red
}
b { font-weight:700
}
.warning { text-transform:none; font-style:normal; font-weight:bolder; background:#FFF; color:red
}
del { text-decoration:line-through; background:#F66
}
ins { text-decoration:underline; background:#FF0
}
address { font-style:normal; letter-spacing:.1em; border-top:0; border-bottom:0; border-left:0; border-right:0; margin:1.58em 0; padding:0
}
acronym { font-variant:small-caps; letter-spacing:.1em
}
h1, h2, h3, h4, h5, h6, dt, th, thead, tfoot { color:#000; background:#FFF
}
#colophon { display:none
}
col, colgroup, table, tbody, td, tr { color:#000; text-decoration:none; background:#FFF; border-color:#000; border-style:none
}
a:link { text-decoration:none; font-weight:700; color:#C00; background:#ffc
}
a:visited { text-decoration:none; font-weight:700; color:#999; background:#ffc
}
a:active { text-decoration:none; font-weight:700; color:red; background:#FC0
}
a:hover { text-decoration:none; color:#C00; background:#FC0
}
a.offsite { text-decoration:none; font-weight:400; color:#C00; background:#ffc
}
a, address, blockquote, cite, code, dd, del, dfn, div, dl, dt, em, form, h1, h2, h3, h4, h5, h6, iframe, img, kbd, li, object, ol, p, q, samp, small, span, strong, ul, var, applet, b, big, center, dir, font, hr, i, menu, pre, s, strike, tt, u, abbr, acronym, bdo, button, fieldset, ins, label { border-top:0; border-bottom:0; vertical-align:baseline; border-left:0; border-right:0; text-align:left; float:none; clear:none; list-style-position:outside; margin:0; padding:0
}
h5 { border-top:0; border-bottom:0; border-left:0; border-right:0; text-align:left; margin:1.17em 0 .33em; padding:0
}
p { border-top:0; border-bottom:0; border-left:0; border-right:0; text-indent:0; margin:.75em 0; padding:0
}
dd { border-top:0; border-bottom:0; border-left:0; border-right:0; margin:0 0 .75em 1.58em; padding:0
}
li { border-top:0; border-bottom:0; border-left:0; border-right:0; margin:0 0 0 3.16em; padding:0
}
div, center { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-top:0; border-bottom:0
}
.stb { margin-top:2.17em; margin-bottom:.75em; padding-top:2.17em; padding-bottom:0; border-top:0; border-bottom:0; border-style:solid
}
.mtb { margin-top:3.08em; margin-bottom:.75em; padding-top:3.08em; padding-bottom:0; border-top:.1em; border-bottom:0; border-style:solid
}
.ltb { margin-top:4.34em; margin-bottom:.75em; padding-top:4.34em; padding-bottom:0; border-top:.25em; border-bottom:0; border-style:solid
}
col, colgroup, table, tbody, td, tfoot, th, thead, tr { border-top:0; border-bottom:0; border-left:0; border-right:0; float:none; clear:none; margin:0; padding:0
}
address, blockquote, dl, fieldset, form, ol, p, ul, dir, hr, menu, pre { margin-left:0; margin-right:0; padding-left:0; padding-right:0; border-left:0; border-right:0
}
blockquote { margin-left:1.58em; margin-right:0; padding-left:0; padding-right:0; border-left:0; border-right:0
}
center { margin-left:0; margin-right:0; padding-left:0; padding-right:0; border-left:0; border-right:0; text-align:left
}
i, var, cite, dfn, .note { font-style:italic
}
div > p:first-child, body > p:first-child, td > p:first-child, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, div + p, p.initial { border-top:0; border-bottom:0; border-left:0; border-right:0; text-align:left; text-indent:0; margin:.75em 0; padding:0
}
h1, h2, h3, h4, h5, h6, td, th { line-height:1.33em
}
blockquote, fieldset, form, ul, ol, dl, dir, menu, .subhead { margin-top:.75em; margin-bottom:.75em; padding-top:0; padding-bottom:0; border-top:0; border-bottom:0
}
dt, ul ul, ol ol, li address, li dl, li ol, li p, li ul, li dir, li hr, li menu, li pre, li h1, li h2, li h3, li h4, li h5, li h6, dd address, dd dl, dd ol, dd p, dd ul, dd dir, dd hr, dd menu, dd pre, dd h1, dd h2, dd h3, dd h4, dd h5, dd h6 { border-top:0; border-bottom:0; border-left:0; border-right:0; margin:0; padding:0
}
table, td, caption { text-align:left
}
#adsense { margin-top: 1em; path { stroke: #000; stroke-width: 1.5; cursor: pointer;
}
text { font: 11px sans-serif; cursor: pointer;
}
body { width: 880px; margin: 0 auto;
}
h1 { text-align: center; margin: .5em 0;
}
p#intro { text-align: center; margin: 1em 0;
}
div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; background: lightsteelblue; border: 0px; border-radius: 8px; pointer-events: none;

A Pen by Ken - Script Codes JS Codes

// Dimensions of sunburst.
var width = 600, height = width, radius = width / 2, x = d3.scale.linear().range([0, 2 * Math.PI]), y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]), padding = 5, duration = 1000;
// Remove loading image
var div = d3.select("#sunburst");
div.select("img").remove();
// setup html markup for sunburst
var vis = div.append("svg") .attr("width", width + padding * 2) .attr("height", height + padding * 2) .append("g") .attr("transform", "translate(" + [radius + padding, radius + padding] + ")");
// let the user know that the diagram is zoomable
div.append("p") .attr("id", "intro") .text("Click to zoom!");
// setup the partitions variable
var partition = d3.layout.partition() .sort(null) .value(function(d) { return 5.8 - d.depth; });
// setup the arch variable
var arc = d3.svg.arc() .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); }) .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });	// load the data d3.json("https://codepen.io/KenFalcon/pen/XJJYqy.js", function(error, json) { var nodes = partition.nodes({children: json}); var path = vis.selectAll("path") .data(nodes)	.enter().append("path") .attr("id", function(d, i) { return "path-" + i; }) .attr("d", arc) .attr("fill-rule", "evenodd") .style("fill", colour) .on("click", click) .on("mouseover", mouseover);	// Select all the visible labels var text = vis.selectAll("text").data(nodes); var textEnter = text.enter().append("text") .style("fill-opacity", 1) .style("fill", function(d) { return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000"; }) .attr("text-anchor", function(d) { return x(d.x + d.dx / 2) > Math.PI ? "end" : "start"; }) .attr("dy", ".2em") // rotate the lable text dependign where it is .attr("transform", function(d) { var multiline = (d.name || "").split(" ").length > 1, angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90, rotate = angle + (multiline ? -.5 : 0); return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")"; }) // Add the mouse clic handler to the bounding circle. .on("click", click) textEnter.append("tspan") .attr("x", 0) .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; }); textEnter.append("tspan") .attr("x", 0) .attr("dy", "1em") .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; }); function mouseover(d) { // Fade all the segments. d3.selectAll("path") .style("opacity", 0.3); } // Then highlight only those that are an ancestor of the current segment. var sequenceArray = getAncestors(d); // Given a node in a partition layout, return an array of all of its ancestor // nodes, highest first, but excluding the root. function getAncestors(node) { var path = []; var current = node; while (current.parent) { path.unshift(current); current = current.parent; } return path; } vis.selectAll("path") .filter(function(node) { return (sequenceArray.indexOf(node) >= 0); }) .style("opacity", 1); function click(d) { path.transition() .duration(duration) .attrTween("d", arcTween(d)); // Somewhat of a hack as we rely on arcTween updating the scales. text.style("visibility", function(e) { return isParentOf(d, e) ? null : d3.select(this).style("visibility"); }) .transition() .duration(duration) .attrTween("text-anchor", function(d) { return function() { return x(d.x + d.dx / 2) > Math.PI ? "end" : "start"; }; }) .attrTween("transform", function(d) { var multiline = (d.name || "").split(" ").length > 1; return function() { var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90, rotate = angle + (multiline ? -.5 : 0); return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")"; }; }) .style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; }) .each("end", function(e) { d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden"); }); }
});
function isParentOf(p, c) { if (p === c) return true; if (p.children) { return p.children.some(function(d) { return isParentOf(d, c); }); } return false;
}
function colour(d) { if (d.children) { // There is a maximum of two children! var colours = d.children.map(colour), a = d3.hsl(colours[0]), b = d3.hsl(colours[1]); // L*a*b* might be better here... return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.l / 1.2); } return d.colour || "#fff";
}
// Interpolate the scales!
function arcTween(d) { var my = maxY(d), xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), yd = d3.interpolate(y.domain(), [d.y, my]), yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]); return function(d) { return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; };
}
function maxY(d) { return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
}
// http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
function brightness(rgb) { return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
}
//
// Start My Custom Code Below
//
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = { w: 75, h: 30, s: 3, t: 10
};
// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) { var percentage = (100 * d.value / totalSize).toPrecision(3); var percentageString = percentage + "%"; if (percentage < 0.1) { percentageString = "< 0.1%"; } d3.select("#percentage") .text(percentageString); d3.select("#explanation") .style("visibility", ""); var sequenceArray = getAncestors(d); updateBreadcrumbs(sequenceArray, percentageString); // Fade all the segments. d3.selectAll("path") .style("opacity", 0.3); // Then highlight only those that are an ancestor of the current segment. vis.selectAll("path") .filter(function(node) { return (sequenceArray.indexOf(node) >= 0); }) .style("opacity", 1);
}
// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) { // Hide the breadcrumb trail d3.select("#trail") .style("visibility", "hidden"); // Deactivate all segments during transition. d3.selectAll("path").on("mouseover", null); // Transition each segment to full opacity and then reactivate it. d3.selectAll("path") .transition() .duration(1000) .style("opacity", 1) .each("end", function() { d3.select(this).on("mouseover", mouseover); }); d3.select("#explanation") .transition() .duration(1000) .style("visibility", "hidden");
}
// Given a node in a partition layout, return an array of all of its ancestor
// nodes, highest first, but excluding the root.
function getAncestors(node) { var path = []; var current = node; while (current.parent) { path.unshift(current); current = current.parent; } return path;
}
function initializeBreadcrumbTrail() { // Add the svg area. var trail = d3.select("#sequence").append("svg:svg") .attr("width", width) .attr("height", 50) .attr("id", "trail"); // Add the label at the end, for the percentage. trail.append("svg:text") .attr("id", "endlabel") .style("fill", "#000");
}
// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) { var points = []; points.push("0,0"); points.push(b.w + ",0"); points.push(b.w + b.t + "," + (b.h / 2)); points.push(b.w + "," + b.h); points.push("0," + b.h); if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex. points.push(b.t + "," + (b.h / 2)); } return points.join(" ");
}
// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) { // Data join; key function combines name and depth (= position in sequence). var g = d3.select("#trail") .selectAll("g") .data(nodeArray, function(d) { return d.name + d.depth; }); // Add breadcrumb and label for entering nodes. var entering = g.enter().append("svg:g"); entering.append("svg:polygon") .attr("points", breadcrumbPoints) .style("fill", function(d) { return colors(d.name); }); entering.append("svg:text") .attr("x", (b.w + b.t) / 2) .attr("y", b.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(function(d) { return d.name; }); // Set position for entering and updating nodes. g.attr("transform", function(d, i) { return "translate(" + i * (b.w + b.s) + ", 0)"; }); // Remove exiting nodes. g.exit().remove(); // Now move and update the percentage at the end. d3.select("#trail").select("#endlabel") .attr("x", (nodeArray.length + 0.5) * (b.w + b.s)) .attr("y", b.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(percentageString); // Make the breadcrumb trail visible, if it's hidden. d3.select("#trail") .style("visibility", "");
}
A Pen by Ken - Script Codes
A Pen by Ken - Script Codes
Home Page Home
Developer Ken
Username KenFalcon
Uploaded January 10, 2023
Rating 4.5
Size 7,729 Kb
Views 2,024
Do you need developer help for A Pen by Ken?

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!

Ken (KenFalcon) Script Codes
Name
Create amazing web content 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!