31:T52e,scopes = { // Small rectangles at the top. var root = html`

`; var adjust = function (color, amount) { return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2)); } var data = chart(root).selectAll("rect").data(shown).enter(); var hard_hull = (points) => `M${d3.polygonHull(points).join("L")}Z`; var clips = data .append("clipPath") .attr("id", (e) => e.id) .attr("class", "data") .append("rect") .attr("x", inner_margin) .attr("y", margin.top) .attr("height", dims.height) .attr("width", dims.width); data .append("text") .attr("text-anchor", "middle") .attr("x", (e) => e.x()) .attr("y", (e) => e.y()) .attr("class", "data") .style("fill", (e) => checked.indexOf(e.name) > -1 ? adjust(e.color, -100) : adjust(e.color, -50)) .text((e) => e.name); var scopes = data .append("path") .style("stroke", (e) => e.color) .style("fill-opacity", (e) => checked.indexOf(e.name) > -1 ? "0.3" : "0.1" ) .style("fill", (e) => e.color) .attr("clip-path", (e) => `url(#${e.id})`) .attr("class", "data") .attr("d", (e) => smooth_hull(e.points)); return root; }32:Tb57,ex = { // Dislocation Dynamics const dddInstance = new Instance( Instance.corner(3e-9, 25e-6, 500e-14, 10e-3), "#FF9AA2", "DDD" ); // Scanning Electron Microscopy const scanningEMInstance = new Instance( Instance.corner(750e-9, 1e-3, 1e-3, 1), "#FFB7B2", "Scanning EM", true ); // Continuum Mechanics const continuumMechanicsInstance = new Instance( Instance.corner(1e-6, 10, 1e-9, 10), "#FFDAC1", "Continuum Mechanics" ); // Molecular Dynamics const mdInstance = new Instance( Instance.triangle(5e-10, 5e-11, 5e-8), "#E2F0CB", "MD" ); // Transmission Electron Microscopy const transmissionEMInstance = new Instance( Instance.corner(1e-9, 50e-6, 500e-6, 50e-3), "#B5EAD7", "Tranmission EM" ); // X-ray Diffraction const xrayDiffractionInstance = new Instance( Instance.corner(10e-9, 100e-6, 1e-12, 100), "#C7CEEA", "X-ray diffraction" ); // Density Functional Theory const dftInstance = new Instance( Instance.corner(5e-11, 8e-9, 1e-12, 1e-10), "#9FC3E9", "DFT" ); // Nanoindentation const nanoIndentationInstance = new Instance( Instance.corner(1e-9, 1e-6, 1e-3, 1), "#A4B0BE", "Nanoindentation" ); // STM/AFM const stmAfmInstance = new Instance( Instance.corner(1e-10, 8e-9, 1e-3, 1), "#7B8788", "STM/AFM" ); // Standard Mechanical Testing const standardMechanicalTestingInstance = new Instance( Instance.corner(1e-3, 1, 1, 3600), "#8395A7", "Standard Mechanical Testing" ); // Kolsky Bar Experiments const kolskyBarInstance = new Instance( Instance.corner(1e-3, 1e-1, 1e-6, 1e-3), "#006266", "Kolsky Bar Experiments", true ); // Plate Impact Shock Experiments const plateImpactInstance = new Instance( Instance.corner(1e-3, 1, 1e-6, 1e-3), "#1B1464", "Plate Impact Shock Experiments", true ); // Microcompression/Microtension const microCompressionTensionInstance = new Instance( Instance.corner(1e-6, 1e-3, 1e-3, 1), // "#6F1E51", "#34ACE0", "Microcompression/Microtension" ); // Laser Shock Experiments const laserShockInstance = new Instance( Instance.corner(1e-3, 1, 1e-6, 1e-3), "#DFFF00", "Laser Shock Experiments", true ); // Spectroscopy const spectroscopyInstance = new Instance( Instance.corner(1e-9, 1e-6, 1e-3, 1), "#34ACE0", "Spectroscopy", true ); // Combine all instances return [ dddInstance, scanningEMInstance, continuumMechanicsInstance, mdInstance, transmissionEMInstance, xrayDiffractionInstance, dftInstance, nanoIndentationInstance, stmAfmInstance, standardMechanicalTestingInstance, kolskyBarInstance, plateImpactInstance, microCompressionTensionInstance, laserShockInstance, spectroscopyInstance ]; }33:T7eb,chart = function (root) { var svg = d3.select(root).select("svg"); var width = dims.width; var height = dims.height; svg.attr("width", width + 2 * inner_margin).attr("height", global_height); var min = dims.min; var max = dims.max; var format = (suffix) => (v) => Math.abs(Math.log10(v) % 1) < 1e-3 ? d3.format("~s")(v) + suffix : ""; var x = d3.scaleLog().domain([min, max]).range([0, width]); var y = d3.scaleLog().domain([min, max]).range([height, 0]); var xAxis = d3.axisBottom(x).ticks(ticks).tickFormat(format("m")); var yAxis = d3.axisLeft(y).ticks(ticks).tickFormat(format("s")); svg .append("g") .attr("class", "x axis") .attr("transform", `translate(${inner_margin}, ${margin.top + height})`) .call(xAxis); svg .append("g") .attr("class", "y axis") .attr("transform", `translate(${inner_margin}, ${margin.top})`) .call(yAxis); // Add title: svg .append("text") .attr("text-anchor", "middle") .attr("x", width / 2 + inner_margin + 25) .attr("y", margin.top / 2) .text(title.value); // Add X axis label: svg .append("text") .attr("text-anchor", "end") .attr("x", width + inner_margin) .attr("y", height + margin.bottom + 20) .text(x_axis_title.value); // Y axis label: svg .append("text") .attr("text-anchor", "end") .attr( "style", `transform: rotate(-90deg) translate(-${inner_margin}px, ${ inner_margin - 45 }px)` ) .text(y_axis_title.value); if (gridlines.indexOf("y") > -1) { svg .append("g") .attr("class", "grid") .attr("transform", `translate(${inner_margin}, ${margin.top})`) .call(d3.axisLeft(y).ticks(5).tickSize(-width).tickFormat("")); } if (gridlines.indexOf("x") > -1) { svg .append("g") .attr("class", "grid") .attr("transform", `translate(${inner_margin}, ${margin.top + height})`) .call(d3.axisBottom(x).ticks(5).tickSize(-height).tickFormat("")); } return svg; }34:T486,class Instance { constructor(points, color, name, hidden){ this.points = this.scale(points); this.color = color; this.name = name; this.id = name.replace(/\W/g, ''); this.hidden = hidden || false; this.hull = d3.polygonHull(this.points) } static corner(a,b,c,d){return[[a,c], [a,d], [b,c], [b,d]];} static triangle(a,b,c){return [[a, b], [a, c], [c, b]];} convert_x(x){ var f = Math.log10 return inner_margin + (f(x) - f(dims.min)) /(f(dims.max) - f(dims.min)) * dims.width } convert_y(y){ var f = Math.log10 return dims.height + margin.top - (f(y) - f(dims.min)) /(f(dims.max) - f(dims.min)) * dims.height } scale(points){ for(var i = 0; i < points.length; ++i) { points[i] = [this.convert_x(points[i][0]), this.convert_y(points[i][1])]; } return points; } avg(index){ return this.hull .map((e)=>e[index]) .reduce((a, b) => a + b, 0) / this.hull.length } x() { return this.avg(0); } y() { return this.avg(1); } }35:Tf37,smooth_hull = (()=>{ var vecFrom = function (p0, p1) { // Vector from p0 to p1 return [ p1[0] - p0[0], p1[1] - p0[1] ]; } var vecScale = function (v, scale) { // Vector v scaled by 'scale' return [ scale * v[0], scale * v[1] ]; } var vecSum = function (pv1, pv2) { // The sum of two points/vectors return [ pv1[0] + pv2[0], pv1[1] + pv2[1] ]; } var vecUnit = function (v) { // Vector with direction of v and length 1 var norm = Math.sqrt (v[0]*v[0] + v[1]*v[1]); return vecScale (v, 1/norm); } var vecScaleTo = function (v, length) { // Vector with direction of v with specified length return vecScale (vecUnit(v), length); } var unitNormal = function (pv0, p1) { // Unit normal to vector pv0, or line segment from p0 to p1 if (p1 != null) pv0 = vecFrom (pv0, p1); var normalVec = [ -pv0[1], pv0[0] ]; return vecUnit (normalVec); }; // Hull Generators var lineFn = d3.line() .curve (d3.curveCatmullRomClosed) .x (function(d) { return d.p[0]; }) .y (function(d) { return d.p[1]; }); var smoothHull = function (polyPoints) { // Returns the SVG path data string representing the polygon, expanded and smoothed. var pointCount = polyPoints.length; // Handle special cases if (!polyPoints || pointCount < 1) return ""; if (pointCount === 1) return smoothHull1 (polyPoints); if (pointCount === 2) return smoothHull2 (polyPoints); var hullPoints = polyPoints.map (function (point, index) { var pNext = polyPoints [(index + 1) % pointCount]; return { p: point, v: vecUnit (vecFrom (point, pNext)) }; }); // Compute the expanded hull points, and the nearest prior control point for each. for (var i = 0; i < hullPoints.length; ++i) { var priorIndex = (i > 0) ? (i-1) : (pointCount - 1); var extensionVec = vecUnit (vecSum (hullPoints[priorIndex].v, vecScale (hullPoints[i].v, -1))); hullPoints[i].p = vecSum (hullPoints[i].p, vecScale (extensionVec, hullPadding)); } return lineFn (hullPoints); } var smoothHull1 = function (polyPoints) { // Returns the path for a circular hull around a single point. var p1 = [polyPoints[0][0], polyPoints[0][1] - hullPadding]; var p2 = [polyPoints[0][0], polyPoints[0][1] + hullPadding]; return 'M ' + p1 + ' A ' + [hullPadding, hullPadding, '0,0,0', p2].join(',') + ' A ' + [hullPadding, hullPadding, '0,0,0', p1].join(','); }; var smoothHull2 = function (polyPoints) { // Returns the path for a rounded hull around two points. var v = vecFrom (polyPoints[0], polyPoints[1]); var extensionVec = vecScaleTo(v, hullPadding); var extension0 = vecSum (polyPoints[0], vecScale(extensionVec, -1)); var extension1 = vecSum (polyPoints[1], extensionVec); var tangentHalfLength = 1.2 * hullPadding; var controlDelta = vecScaleTo (unitNormal(v), tangentHalfLength); var invControlDelta = vecScale (controlDelta, -1); var control0 = vecSum (extension0, invControlDelta); var control1 = vecSum (extension1, invControlDelta); var control3 = vecSum (extension0, controlDelta); return 'M ' + extension0 + ' C ' + [control0, control1, extension1].join(',') + ' S ' + [ control3, extension0].join(',') + ' Z'; }; // Initial Graphics Setup return function(points) { var convexHull = (points.length < 3) ? points : d3.polygonHull(points); return smoothHull(convexHull); } })()36:[] 2f:{"title":"Lengths-Scale of Material Characterization","cells":[{"id":197,"value":"project_title = md`# Lengths-Scale of Material Characterization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof checked = checkbox({title:\"bold\", options:ex.map((e)=>e.name)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"viewof hidden = checkbox({title:\"hidden\", options:ex.map((e)=>e.name), value: ex.filter((e)=>e.hidden).map((e)=>e.name)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"title = text({\n title: \"title\",\n placeholder: \"title\",\n value:\n \"Experimental and Simulated Characterization Methods at Applicable Scales\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"x_axis_title = text({placeholder:\"x axis\", value:\"Length\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"y_axis_title = text({placeholder:\"y axis\", value:\"Time\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof gridlines = checkbox({options:[\"x\", \"y\"],title:\"gridlines\", value:[\"x\", \"y\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"viewof margin_value = slider({min: 0, max: 300, value:20, step: 5, description: \"Padding on figure\", title:\"Chart display\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"viewof inner_margin = slider({min: 0, max: 100, value:60, step: 1, description: \"Inner margin of chart\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"viewof global_height = slider({min: 200, max: 750, value:600, step: 5, description: \"Height of diagram\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"viewof ticks = slider({min: 2, max: 30, value:12, step: 1, description: \"ticks\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"viewof hullPadding = slider({min: -100, max: 100, value:0, step: 1, description: \"Hull padding\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"shown = ex.filter((e)=>hidden.indexOf(e.name)==-1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`## SVG construction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"md`## Data definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`## Imports / Definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"{\n var extensions = [\"d3-scale\", \"d3-axis\", \"d3-format\", \"d3-polygon\"];\n //Object.assign(d3, ...extensions.map(require));\n return md`\n## d3 extensions:\n\n* ${extensions.join(`\n* `)}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"import {slider, checkbox, text, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"// Needed because predefine globals are tricky\nglobal_width = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"margin = ({\"top\": inner_margin, \"right\": margin_value/2, \"bottom\": inner_margin + 10, \"left\": margin_value/2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"dims = ({\n width: global_width - margin.left - margin.right - inner_margin,\n height: global_height - margin.top - margin.bottom,\n min: 4e-10,\n max: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}