2c:null 2d:["$","title",null,{"children":"Viscoelasticity & Plasticity, Visualized | Wing-Sum Law | Observable"}] 32: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'] ] )33: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 }34: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"); } }35: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}]; 36:[] 30:{"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","has_unpublished_edits":null,"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","bio":"PhD student researching biomechanics of cell migration. When not in lab: dancer, aspiring home chef, and casual coder."},"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,"bio":"PhD student researching robotic mechanisms."}],"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,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"sigma = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"inputs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"// creepExample = md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"s = new odex.Solver(1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`### Formatting for gel animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1789,"value":"transitions = [0, 4000, 0];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"labels = [\"Initial\",\"Apply force\",\"Remove force\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"gelInit = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 80})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"md`### Formatting for chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"chartWidth = 0.45*(width - margin.right)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2087,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`### Requirements & Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"d3Timer = require('https://d3js.org/d3-timer.v1.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2192,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"exports = window.exports = {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"odex = require(\"odex@2\").catch(() => exports)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`### CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"