2b:null 2c:["$","title",null,{"children":"Viscoelasticity & Plasticity, Visualized | Wing-Sum Law | Observable"}] 31:T49c,viewof inputs = inputsGroup( [ [ slider({'title':'σ1',name:'name',min:0.5,max:20,description:'Yield Stress 1',value:20}), slider({'title':'μ1-1',name:'name',min:100,max:1000,description:'First Spring 1',value:100}), slider({'title':'μ1-2',name:'name',min:100,max:1000,description:'First Spring 1',value:100}), slider({'title':'η1-1',name:'name',min:1,max:100,description:'First Dashpot 1',value:50}), slider({'title':'η1-2',name:'name',min:1,max:100,description:'Second Dashpot 1',value:50}) ], [ slider({'title':'σ2',name:'name',min:0.5,max:20,description:'Yield Stress 1',value:1}), slider({'title':'μ2-1',name:'name',min:100,max:1000,description:'First Spring 1',value:200}), slider({'title':'μ2-2',name:'name',min:100,max:1000,description:'First Spring 1',value:200}), slider({'title':'η2-1',name:'name',min:1,max:100,description:'First Dashpot 1',value:10}), slider({'title':'η2-2',name:'name',min:1,max:100,description:'Second Dashpot 1',value:10}) ] ], [ ['sigmaY1', 'mu11', 'mu12', 'eta11', 'eta12'], ['sigmaY2', 'mu21', 'mu22', 'eta21', 'eta22'] ] )32:T102e,anim = { const play = html`` const reset = html`` const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); gels.map(d => d.values = gelInit); // Create original bars in gel chart const bars = svg.append("g") .selectAll("rect") .data(gels) .join("rect") .attr("x", (d, i) => gelX(i)) .attr("y", d => gelY(d.value)) .attr("height", d => gelY(0) - gelY(d.value)) .attr("width", gelX.bandwidth()) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.5) .attr("stroke", (d, i) => color(i)) .attr("stroke-width",3); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(chartData.series) .join("path") .attr('stroke', (d, i) => color(i)) .attr("d", d => line(d.values)); svg.append("g").call(gelXax); svg.append("g").call(gelYax); svg.append("g").call(chartYax); svg.append("g").call(chartXax); s.absoluteTolerance = s.relativeTolerance = 1e-10; // Unpack input parameters const [sigmaY1, mu11, mu12, eta11, eta12] = inputs[0].map(x=>+x); const [sigmaY2, mu21, mu22, eta21, eta22] = inputs[1].map(x=>+x); var initGel1; var initGel2; var tempData = ({'series': [{'name': 'Gel 1', 'values': []}, {'name': 'Gel 2', 'values': []}], 'date': []}); // Play animation on clicking button d3.select(play).on("click", function() { var t = d3.interval(function(time) { // For time less than 5 seconds if (time < 2000) { if (sigma > inputs.sigmaY1) { var gel1new = s.solve(BinghamSLS(sigma, sigmaY1, mu11, mu12, eta11, eta12), 0, [0], time*0.001); } else { var gel1new = s.solve(SLS(sigma, mu11, mu12, eta11), 0, [0], time*0.001); } if (sigma > inputs.sigmaY2) { var gel2new = s.solve(BinghamSLS(sigma, sigmaY2, mu21, mu22, eta21, eta22), 0, [0], time*0.001); } else { var gel2new = s.solve(SLS(sigma, mu21, mu22, eta21), 0, [0], time*0.001); } // Push data to be plotted on chart tempData.date.push(time); tempData.series[0].values.push(gel1new.y[0]); tempData.series[1].values.push(gel2new.y[0]); // Convert strain to gel height gel1new = 100-gel1new.y[0]*100; gel2new = 100-gel2new.y[0]*100; updateGel(gel1new, gel2new); initGel1 = 1 - gels[0].value/100; initGel2 = 1 - gels[1].value/100; } else { gel1new = s.solve(SLS(0,sigmaY1,mu11,mu12,eta11), 0, initGel1, time*0.001); gel2new = s.solve(SLS(0,sigmaY2,mu21,mu22,eta21), 0, initGel2, time*0.001); // Push data to be plotted on chart tempData.date.push(time); tempData.series[0].values.push(gel1new.y[0]); tempData.series[1].values.push(gel2new.y[0]); // Convert strain to gel height gel1new = 100-gel1new.y[0]*100; gel2new = 100-gel2new.y[0]*100; updateGel(gel1new, gel2new); } // Stop and reset data on reset click d3.select(reset).on("click", function() { t.stop(); updateGel(gelInit, gelInit); updateChartData(); }); }, 50); }); // Update chart data function updateChartData() { mutable chartData = tempData; } // Update gel height function updateGel(gel1val, gel2val) { gels[0].value = gel1val; gels[1].value = gel2val; var r = svg.selectAll("rect") .data(gels); r.enter() .merge(r) .attr("x", (d, i) => gelX(i)) .attr("y", d => gelY(d.value)) .attr("width", gelX.bandwidth()) .attr("height", d => gelY(0) - gelY(d.value)); } // Show button + svg const div = html`

`; div.appendChild(play); div.appendChild(reset); div.append(html`
`); div.appendChild(svg.node()); return div }33:T5f4,examples = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g").call(exXax); // Create original bars in gel chart let bars = svg.selectAll('.bar') .data(ex) .enter().append('g') .attr('class','bar') bars.append('rect') .attr('x', (_,i) => exX(i) ) .attr('width', exX.bandwidth() ) .attr("fill", (d, i) => color(i+5)) .attr("fill-opacity", 0.5) .attr("stroke", (d, i) => color(i+5)) .attr("stroke-width",3) .attr('height', d => gelY(0) - gelY(d.value)) .attr('y', d => gelY(d.value)); var textBox = svg.append("g") .attr("x", 0.5*margin.left) .attr("y", margin.top); textBox.append("text") .attr("dy", "2em") .text("1. Initial") textBox.append("text") .attr("dy", "3.5em") .text("2. Apply force") textBox.append("text") .attr("dy", "5em") .text("3. Remove force") const div = html`

`; div.appendChild(svg.node()); yield div; let count = 0; while(true){ yield Promises.tick(4000, div); ++count; var j = count % 3; ex.map((d,i) => d.value = ex_t[i][j]); bars = bars .data(ex) .merge(bars) bars.select('rect') .transition() .ease(d3.easePolyOut) .duration((_,i) => transitions[i]) .attr('height', d => gelY(0) - gelY(d.value)) .attr('y', d => gelY(d.value)); textBox.selectAll('text') .attr('font-weight',(_,i) => (i==j) ? "bold" : "normal"); } }34:T295d,exChartData = [{"date":66.3699998985976,"value":0.12540032950733415},{"date":116.65999982506037,"value":0.16466461121546086},{"date":167.04500000923872,"value":0.1832864081796288},{"date":216.7650000192225,"value":0.1920159907718348},{"date":250.43000001460314,"value":0.19515853281387796},{"date":316.5100000333041,"value":0.19818634236331947},{"date":350.5599999334663,"value":0.1989064797628158},{"date":400.2799999434501,"value":0.19947763019687942},{"date":466.3299999665469,"value":0.1998042282691375},{"date":516.1999999545515,"value":0.19990668890822708},{"date":565.9799999557436,"value":0.1999554653984874},{"date":616.7849998455495,"value":0.1999790662472689},{"date":666.9250000268221,"value":0.19999006225179847},{"date":716.5149999782443,"value":0.19999524359647972},{"date":766.3950000423938,"value":0.19999773327944279},{"date":816.5049999952316,"value":0.1999989234535455},{"date":866.1050000227988,"value":0.1999994848159758},{"date":916.579999960959,"value":0.19999975663536287},{"date":965.570000000298,"value":0.19999988237026434},{"date":1000.2599998842925,"value":0.19999992974716455},{"date":1050.3799999132752,"value":0.19999996663612157},{"date":1117.3499999567866,"value":0.1999999876474658},{"date":1167.464999947697,"value":0.1999999940859135},{"date":1216.129999840632,"value":0.19999999710479854},{"date":1267.3700000159442,"value":0.1999999986296193},{"date":1317.174999974668,"value":0.1999999991294999},{"date":1350.0699999276549,"value":0.19999999954861242},{"date":1400.36499989219,"value":0.1999999997854044},{"date":1466.8699998874217,"value":0.19999999990516623},{"date":1516.9649999588728,"value":0.19999999992721273},{"date":1567.269999999553,"value":0.19999999991668285},{"date":1600.7550000213087,"value":0.1999999998865309},{"date":1650.334999896586,"value":0.19999999994558706},{"date":1700.5699998699129,"value":0.19999999997267462},{"date":1750.5999999120831,"value":0.1999999999818096},{"date":1817.164999898523,"value":0.19999999999274845},{"date":1850.2749998588115,"value":0.20000000001945314},{"date":1900.5350000225008,"value":0.19999999999724674},{"date":1950.419999891892,"value":0.19999999999899884},{"date":2001.010000007227,"value":0.13403693101267164},{"date":2051.5250000171363,"value":0.13268957353565144},{"date":2101.319999899715,"value":0.13137467647378534},{"date":2150.774999987334,"value":0.13008165472708588},{"date":2201.249999925494,"value":0.12877508642363486},{"date":2251.1199999134988,"value":0.12749706778573008},{"date":2300.8550000377,"value":0.12623514104681882},{"date":2350.834999931976,"value":0.12497958032668582},{"date":2400.900000007823,"value":0.1237344041649345},{"date":2451.2650000397116,"value":0.12249428386258282},{"date":2500.199999893084,"value":0.12130127979806336},{"date":2550.889999838546,"value":0.12007774002738734},{"date":2601.1699999216944,"value":0.11887628929051211},{"date":2650.764999911189,"value":0.11770298400462731},{"date":2700.1600000075996,"value":0.11654592094661057},{"date":2751.1299999896437,"value":0.11536388689263602},{"date":2800.234999973327,"value":0.11423644353246372},{"date":2850.8949999231845,"value":0.11308484374393754},{"date":2900.954999960959,"value":0.11195828723988895},{"date":2951.4899998903275,"value":0.1108324239664233},{"date":3000.989999854937,"value":0.10974059643372704},{"date":3050.5750000011176,"value":0.10865767746456385},{"date":3101.1699999216944,"value":0.10756371466742991},{"date":3151.0899998247623,"value":0.10649514173469021},{"date":3200.9649998508394,"value":0.10543813328943986},{"date":3250.9649998974055,"value":0.10438900633317776},{"date":3301.224999828264,"value":0.10334494429016997},{"date":3350.689999992028,"value":0.10232759337691055},{"date":3401.354999979958,"value":0.10129594355487569},{"date":3451.4150000177324,"value":0.10028682862646507},{"date":3500.7549999281764,"value":0.09930206501868899},{"date":3551.3149998150766,"value":0.09830298241235393},{"date":3600.540000014007,"value":0.09733993791166806},{"date":3651.4049998950213,"value":0.09635471854060519},{"date":3701.4249998610467,"value":0.09539559148959509},{"date":3751.634999876842,"value":0.09444242282932311},{"date":3801.869999850169,"value":0.09349831049767851},{"date":3852.0649999845773,"value":0.09256437668048403},{"date":3901.439999928698,"value":0.09165480187885063},{"date":3951.9849999342114,"value":0.09073293093388676},{"date":4001.424999907613,"value":0.08984018472438991},{"date":4051.9749999511987,"value":0.08893647639912587},{"date":4102.0949999801815,"value":0.08804943046100898},{"date":4152.469999855384,"value":0.0871667862376985},{"date":4201.690000016242,"value":0.08631292598658698},{"date":4252.379999961704,"value":0.08544230617252192},{"date":4301.734999986365,"value":0.08460305411094872},{"date":4351.68999992311,"value":0.08376199351288127},{"date":4401.730000041425,"value":0.08292788432430583},{"date":4452.359999995679,"value":0.08209239379599229},{"date":4502.099999925122,"value":0.08127978727009515},{"date":4551.319999853149,"value":0.08048359433665439},{"date":4601.404999848455,"value":0.07968141459721086},{"date":4651.244999840856,"value":0.07889109574971331},{"date":4701.364999869838,"value":0.07810424170654545},{"date":4752.024999819696,"value":0.07731688501500938},{"date":4801.99999990873,"value":0.07654795189255367},{"date":4851.784999947995,"value":0.075789545924878},{"date":4901.880000019446,"value":0.07503400168221187},{"date":4952.534999931231,"value":0.07427766988022483},{"date":5002.0549998153,"value":0.07354565476193138},{"date":5052.454999880865,"value":0.07280803839290285},{"date":5102.07000002265,"value":0.07208913695429517},{"date":5151.979999849573,"value":0.07137312276383903},{"date":5202.634999994189,"value":0.07065369208452064},{"date":5252.020000014454,"value":0.0699592805640856},{"date":5302.354999817908,"value":0.06925853361720122},{"date":5352.190000005066,"value":0.06857166251838219},{"date":5402.474999893457,"value":0.06788549349433494},{"date":5451.679999940097,"value":0.06722070879046296},{"date":5502.744999947026,"value":0.06653767752761901},{"date":5552.595000015572,"value":0.06587759287152363},{"date":5602.289999835193,"value":0.06522607854205613},{"date":5652.059999993071,"value":0.06458003882811848},{"date":5702.779999934137,"value":0.06392825037518812},{"date":5752.3349998518825,"value":0.06329778690927196},{"date":5801.644999999553,"value":0.06267661218013494},{"date":5852.764999959618,"value":0.0620390711610073},{"date":5902.744999853894,"value":0.06142201777792248},{"date":5952.444999944419,"value":0.060814507249624714},{"date":6002.739999908954,"value":0.060205840543323993},{"date":6052.764999913052,"value":0.05960648438776368},{"date":6102.775000035763,"value":0.05901327193080627},{"date":6152.899999869987,"value":0.058424619432857434},{"date":6202.564999926835,"value":0.0578471603834575},{"date":6253.120000008494,"value":0.0572652147279391},{"date":6302.764999913052,"value":0.05669944183955339},{"date":6352.5699998717755,"value":0.05613746228572306},{"date":6402.604999952018,"value":0.05557849615135638},{"date":6452.395000029355,"value":0.05502779199256158},{"date":6502.98499991186,"value":0.05447382802413603},{"date":6552.814999828115,"value":0.053933638092407955},{"date":6602.214999962598,"value":0.0534033974486529},{"date":6651.954999892041,"value":0.052874774183208045},{"date":6702.864999882877,"value":0.05233913480029233},{"date":6752.139999996871,"value":0.0518258659122042},{"date":6803.210000041872,"value":0.05129921072401619},{"date":6853.2000000122935,"value":0.05078887662675481},{"date":6903.229999821633,"value":0.050283217162368325},{"date":6952.444999944419,"value":0.04979070731822995},{"date":7002.5549998972565,"value":0.049294197018919655},{"date":7052.399999927729,"value":0.048805224501654546},{"date":7102.68499981612,"value":0.04831685026615302},{"date":7153.149999910966,"value":0.047831641023006924},{"date":7203.074999852106,"value":0.047356418584401774},{"date":7253.799999831244,"value":0.04687841648355728},{"date":7302.63499985449,"value":0.04642278369449464},{"date":7353.944999864325,"value":0.045948829108606065},{"date":7403.324999846518,"value":0.04549727193229827},{"date":7453.4350000321865,"value":0.04504357554166914},{"date":7502.9449998401105,"value":0.0445997550403868},{"date":7552.690000040457,"value":0.04415823207403727},{"date":7602.925000013784,"value":0.04371679558660157},{"date":7652.894999831915,"value":0.04328206589632657},{"date":7703.259999863803,"value":0.04284827410720598},{"date":7752.295000012964,"value":0.042430114877774545},{"date":7803.509999997914,"value":0.04199772149539401},{"date":7853.789999848232,"value":0.04157750878101404},{"date":7903.124999953434,"value":0.041169280806977},{"date":7953.615000005811,"value":0.04075564537062421},{"date":8002.919999882579,"value":0.04035572898270092},{"date":8053.164999932051,"value":0.03995222505206201},{"date":8104.114999994636,"value":0.03954717909231765},{"date":8154.279999900609,"value":0.03915238603628628},{"date":8202.67999987118,"value":0.03877521937146786},{"date":8253.529999870807,"value":0.03838287384910818},{"date":8303.709999890998,"value":0.0379995898631291},{"date":8353.314999956638,"value":0.03762445984097671},{"date":8404.224999947473,"value":0.03724331131103349},{"date":8453.879999928176,"value":0.03687527847836196},{"date":8504.06499998644,"value":0.03650701254210963},{"date":8554.424999980256,"value":0.036141159440916726},{"date":8603.484999854118,"value":0.03578827646049053},{"date":8654.19499995187,"value":0.03542714614728976},{"date":8703.874999890104,"value":0.03507688500255493},{"date":8753.709999844432,"value":0.03472901020396245},{"date":8804.619999835268,"value":0.03437719356015173},{"date":8853.50999981165,"value":0.03404269140782719},{"date":8903.844999847934,"value":0.03370170287871342},{"date":8954.159999964759,"value":0.033364263316560505},{"date":9004.184999968857,"value":0.0330321181887132},{"date":9054.689999902621,"value":0.03270014024064045},{"date":9104.834999889135,"value":0.03237382955433127},{"date":9154.949999880046,"value":0.03205096738725286},{"date":9203.680000035092,"value":0.03174011589791782},{"date":9254.089999943972,"value":0.031421719781820866},{"date":9304.219999816269,"value":0.03110825962163465},{"date":9354.120000032708,"value":0.030799343245997757},{"date":9404.34499992989,"value":0.030491512511975367},{"date":9454.494999954477,"value":0.03018721126317262},{"date":9504.264999879524,"value":0.029888218319326882},{"date":9554.609999991953,"value":0.02958878388092134},{"date":9603.759999852628,"value":0.029299351029291553}]; 35:[] 2f:{"id":"6a137f42033977fb","slug":"viscoelasticity-plasticity-visualized","title":"Viscoelasticity & Plasticity, Visualized","thumbnail":"5fb4c84d03e66568d7988fbfd8facc271e9b8f8125d7f26ec0d2506c5adf1c5d","access_level":"public","create_time":"$D2020-02-18T21:53:13.500Z","update_time":"$D2024-05-04T04:38:09.623Z","view_time":null,"first_public_time":"$D2020-02-29T23:55:59.348Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0b0b2be80aaefa91","login":"wingsumlaw","name":"Wing-Sum Law","avatar_url":"https://avatars-next.observableusercontent.com/a80cc3eaa67d0ca05fc1864a43bacdc9b7ba06a86a2c6eed419a1ee39fe9ff7d","tier":"starter_2024"},"version":2310,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0363b10be3a871d","login":"wingsumlaw","name":"Wing-Sum Law","avatar_url":"https://avatars-next.observableusercontent.com/a80cc3eaa67d0ca05fc1864a43bacdc9b7ba06a86a2c6eed419a1ee39fe9ff7d","tier":null}],"members":[{"type":"individual","id":"e0363b10be3a871d","login":"wingsumlaw","name":"Wing-Sum Law","avatar_url":"https://avatars-next.observableusercontent.com/a80cc3eaa67d0ca05fc1864a43bacdc9b7ba06a86a2c6eed419a1ee39fe9ff7d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Viscoelasticity & Plasticity, Visualized","cells":[{"id":0,"value":"md`# Viscoelasticity & Plasticity, Visualized\n## And a brief comment on why biologists should care about these properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":983,"value":"intro = md`Enter desired inputs for standard linear solid (SLS) combined with Bingham plastic model depicted below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1541,"value":"sigma = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":942,"value":"inputs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"intro2 = md`\n
\nPress \"SIMULATE CREEP\" when you are ready to view your animation. The animation will play 2 seconds of constant applied stress of 10 (arbitrary units), followed by relaxation under applied stress of 0.\n\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1492,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1706,"value":"materials = md`
\n#### What are elasticity, viscosity, and plasticity?\nElasticity, viscosity, and plasticity are material properties that describe a material's physical response to deformation. If a material is perfectly elastic, then when force is applied, it will deform immediately. If a material is viscous, then it will deform over time. If a material is plastic and a large enough force is applied, after deformation it will not recover all of its deformation. A visual of these different phenomena are available below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1743,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2074,"value":"materials2 = md`Many materials have a combination of elastic, viscous, and plastic properties. This means that when force is applied, the material will deform a little immediately (elastic) and then some more over time (viscous). Then when the force is removed, it will bounce back a little, but not to its original dimensions (plastic). How much or how little a material recovers has to do with a material property called yield stress. This is the applied stress at which the material starts to deform irreversibly.\n\nThis process is sometimes represented as a strain over time graph, where strain is deformation as a decimal (change in length / original length). This is the graph created on the right in the creep test simulation at the top of this page. \"A creep test\" is when a constant force is applied to a material, and the resulting deformation of the material is observed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"// creepExample = md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2213,"value":"materials3 = md`\n
\nIf you're interested in more of the math associated with this model, you can look at the \"Bingham Plastic + Standard Linear Solid (SLS) Model\" section below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2026,"value":"biology = md`\n
\n#### What's this got to do with biology?\nA lot of biological tissues have material properties that combine elastic, viscous, and plastic behaviors. In other words, when force is applied, biological tissue will...\n* Deform a little bit immediately _(elastic behavior)_\n* Deform more over time _(viscous behavior)_\n\nAnd then when the force is removed, it will...\n\n* Recover a little bit immediately _(elastic behavior)_\n* Recover more over time _(viscous behavior)_\n* And if the applied force is greater than some threshold (the material's yield stress), the biological tissue never recovers fully to its original state, leaving some remaining plastic or irrecoverable deformation _(plastic behavior)_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2216,"value":"biology2 = md`Cells often exist in the confining environment of the extracellular matrix (ECM). Work out of the Chaudhuri Lab at Stanford has shown that cells may take advantage of environment plasticity during migration [(Wisdom et al., 2018)](\"https://dx.doi.org/10.1038%2Fs41467-018-06641-z\"). In other words, the cell deforms the ECM around it by forming a protrusion. Some of that deformation, being plastic, never recovers. This creates space for a cell to squeeze into.\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2068,"value":"cellAnim = md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2222,"value":"biology3 = md`\n
\nIf you want to imagine what the cell is experiencing during this process, you might imagine yourself walking through jello. When you push through the jello, some of it will bounce back, but some of it will deform permanently, leaving space for you to move forward into the hole you just created.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"model = md`\n
\n#### Bingham Plastic + Standard Linear Solid (SLS) Model\n\nAs promised, the more rigorous math part of this thought exercise. If you'd like to read more about modeling visco-plasticity and its relevance to biology, check out another paper out of the Chaudhuri lab describing cells remodeling ECM [(Nam et al., 2016)](\"https://dx.doi.org/10.1016%2Fj.bpj.2016.10.002\").\n\nThe graphs above use a model for visco-elasto-plastic behavior that combines the SLS model for viscoelastic behavior with the Bingham model for linear plastic behavior. In this model, strain is split into elastic strain, viscous strain, and plastic strain:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":"eq = tex.block`\n{\\varepsilon} = {\\varepsilon}_e + {\\varepsilon}_v + {\\varepsilon}_p\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":591,"value":"model2 = md`For those familiar with circuit analogies, this model can be depicted as a circuit combining springs, dashpots, and a frictional element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"model3 = md`Examining the above leads us to the following constitutive equations:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"eq2 = tex.block`\n \\dot{\\varepsilon}_{ve} = \\frac{\\mu_1}{\\eta}(\\frac{\\mu_1 + \\mu_2}{\\mu_1\\mu_2} \\sigma - \\varepsilon)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"model4 = md`assuming a constant stress rate to keep it simple, i.e. ${tex`\\dot{\\sigma} = 0`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"eq3 = tex.block`\n \\dot{\\varepsilon}_p =\n \\begin{cases}\n 0 & {\\sigma} < {\\sigma}_Y \\\\\n \\frac{1}{\\eta} ({\\sigma}-{\\sigma}_Y) & {\\sigma} > {\\sigma}_Y\n \\end{cases}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"model5 = md`This can be solved using a ordinary differential equation solver. In this case, I'm using [odex-js from @littleredcomputer on GitHub](https://github.com/littleredcomputer/odex-js). This requires the above equations to be re-written such that...` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"eq4 = tex.block`\n \\varepsilon = \\varepsilon_{ve} + \\varepsilon_p = y[0]\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"eq5 = tex.block`\n \\dot{y} =\n \\begin{cases}\n \\frac{\\mu_1}{\\eta_1}(\\frac{\\mu_1 + \\mu_2}{\\mu_1\\mu_2} \\sigma - y) & {\\sigma} < {\\sigma}_Y \\\\\n \\frac{\\mu_1}{\\eta_1}(\\frac{\\mu_1 + \\mu_2}{\\mu_1\\mu_2} \\sigma - y) + \\frac{1}{\\eta_2} (\\sigma -{\\sigma}_Y) & {\\sigma} > {\\sigma}_Y\n \\end{cases}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2227,"value":"md`Given parameters and initial conditions, odex-js numerically solves for the next timepoint strain value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"BinghamSLS = function(sigma, sigmaY, mu1, mu2, eta1, eta2) {\n return function(x, y) {\n return [mu1 * ((mu1+mu2)/(mu1*mu2) * sigma - y)/eta1 + 1/eta2 * (sigma - sigmaY)];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":831,"value":"SLS = function(sigma, mu1, mu2, eta1) {\n return function(x, y) {\n return [mu1 * ((mu1+mu2)/(mu1*mu2) * sigma - y)/eta1];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1537,"value":"s = new odex.Solver(1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"md`### Formatting for gel animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1720,"value":"ex = [{\"name\":\"Elastic\",\"value\":100}, {\"name\":\"Viscous\",\"value\":100}, {\"name\":\"Plastic\",\"value\":100}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1760,"value":"ex_t = [[100, 50, 100], [100, 50, 100], [100, 50, 50]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1789,"value":"transitions = [0, 4000, 0];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2013,"value":"labels = [\"Initial\",\"Apply force\",\"Remove force\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1725,"value":"exX = d3.scaleBand()\n .domain(d3.range(ex.length))\n .range([margin.left,width-margin.right])\n .padding(0.4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1731,"value":"exXax = g => g\n .attr(\"transform\",`translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(exX).tickFormat(i => ex[i].name).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"gelX = d3.scaleBand()\n .domain(d3.range(gels.length))\n .range([margin.left, 0.45*(width - margin.right)])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"gelXax = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(gelX).tickFormat(i => gels[i].name).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"gelY = d3.scaleLinear()\n .domain([0, 100]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"gelYax = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(gelY))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"gelInit = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"gels = [{\"name\":\"Gel 1\",\"value\":gelInit},{\"name\":\"Gel 2\",\"value\":gelInit}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 80})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1119,"value":"md`### Formatting for chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"chartWidth = 0.45*(width - margin.right)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1444,"value":"mutable chartData = ({'series': [{'name': 'Gel 1', 'values': []}, {'name': 'Gel 2', 'values': []}], 'date': []});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1421,"value":"chartX = d3.scaleLinear()\n .domain(d3.extent(chartData.date))\n .range([margin.left + chartWidth, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1424,"value":"chartXax = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(chartX).ticks(width / 100).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", width - 30)\n .attr(\"y\", margin.bottom - 35)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Time (s)\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1129,"value":"chartY = d3.scaleLinear()\n .domain([0, 0.5]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1141,"value":"chartYax = g => g\n .attr(\"transform\", `translate(${margin.left + chartWidth},0)`)\n .call(d3.axisLeft(chartY))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone())\n .call(g => g.append(\"text\")\n .attr(\"x\", 5)\n .attr(\"y\", margin.top + 3)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Strain\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1640,"value":"color = d3.scaleOrdinal()\n .domain([chartData.series[0].name, chartData.series[1].name])\n .range(d3.schemeSet3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1417,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => chartX(chartData.date[i]))\n .y(d => chartY(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2096,"value":"exChartX = d3.scaleLinear()\n .domain(d3.extent(exChartData, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2099,"value":"exChartXax = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(exChartX).ticks(width / 100).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", width - 30)\n .attr(\"y\", margin.bottom - 35)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Time (s)\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2124,"value":"exChartY = d3.scaleLinear()\n .domain([0, d3.max(exChartData, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2102,"value":"exChartYax = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(exChartY))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone())\n .call(g => g.append(\"text\")\n .attr(\"x\", 5)\n .attr(\"y\", margin.top + 3)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Strain\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"exLine = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => exChartX(d.date))\n .y(d => exChartY(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2087,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`### Requirements & Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"d3Timer = require('https://d3js.org/d3-timer.v1.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2192,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"exports = window.exports = {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"odex = require(\"odex@2\").catch(() => exports)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"md`The following is edited from [@bumbeishvili/input-groups](https://observablehq.com/@bumbeishvili/input-groups)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"function inputsGroup(views,names){\n const form = html`

${\n views.map(row => html`

${\n row.map(input => html`

${input}

`)\n }

`;\n \n form.oninput = () => {\n form.value = views.map(row => row.map(input => input.value))\n if(names){\n names.forEach((row,i)=>row.forEach((c,j)=> form.value[i][j] && (form.value[c]=form.value[i][j])))\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"md`### CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"