55 < title > Lang Shift</ title >
66
77< script type ="module ">
8- import init , * as bindings from '/langshift/langshift-54d88d2bf8e58495 .js' ;
9- const wasm = await init ( { module_or_path : '/langshift/langshift-54d88d2bf8e58495_bg .wasm' } ) ;
8+ import init , * as bindings from '/langshift/langshift-a26a31be7f360ec6 .js' ;
9+ const wasm = await init ( { module_or_path : '/langshift/langshift-a26a31be7f360ec6_bg .wasm' } ) ;
1010
1111
1212window . wasmBindings = bindings ;
1515dispatchEvent ( new CustomEvent ( "TrunkApplicationStarted" , { detail : { wasm} } ) ) ;
1616
1717</ script >
18- < link rel ="modulepreload " href ="/langshift/langshift-54d88d2bf8e58495 .js " crossorigin ="anonymous " integrity ="sha384-giUBHKbPxnZdmDCP/B+2Bobd2nIuQAQDj6RqzafFShXc2yM9I/+FArUMMz9CXSfo "> < link rel ="preload " href ="/langshift/langshift-54d88d2bf8e58495_bg .wasm " crossorigin ="anonymous " integrity ="sha384-AwE5UYS+uJpBQJUXNovxFQV1fEFwWOP58x2B0eQMDo3byPumbJtxkXL7kDYnqg7m " as ="fetch " type ="application/wasm "> </ head >
18+ < link rel ="modulepreload " href ="/langshift/langshift-a26a31be7f360ec6 .js " crossorigin ="anonymous " integrity ="sha384-giUBHKbPxnZdmDCP/B+2Bobd2nIuQAQDj6RqzafFShXc2yM9I/+FArUMMz9CXSfo "> < link rel ="preload " href ="/langshift/langshift-a26a31be7f360ec6_bg .wasm " crossorigin ="anonymous " integrity ="sha384-ymew6hKrg1DFQ2D1qX7a15NgBDKYlI5wbQH6pn446uK/XaARR9MDvita3ybrnnt8 " as ="fetch " type ="application/wasm "> </ head >
1919 < body >
20- < div id ="abrams "> </ div >
21- < div id ="diaz "> </ div >
20+ < div id ="container ">
21+ < select id ="model ">
22+ < option value ="abrams "> Abrams-Strogatz</ option >
23+ < option value ="diaz "> Diaz-Switkes</ option >
24+ </ select >
25+ < div id ="params ">
26+ < div id ="abrams ">
27+ < label for ="x "> x</ label >
28+ < input type ="number " id ="x " min ="1 " max ="10000 " value ="80 " />
29+ < label for ="y "> y</ label >
30+ < input type ="number " id ="y " min ="1 " max ="10000 " value ="20 " />
31+ < label for ="c "> c</ label >
32+ < input type ="number " id ="c " min ="0 " max ="1 " step ="0.01 " value ="0.5 " />
33+ < label for ="a "> a</ label >
34+ < input type ="number " id ="a " min ="0 " max ="10 " step ="0.01 " value ="1.35 " />
35+ < label for ="s "> s</ label >
36+ < input type ="number " id ="s " min ="0 " max ="1 " step ="0.01 " value ="0.33 " />
37+ </ div >
38+ < div id ="diaz " style ="display: none ">
39+ < label for ="x_1 "> x< sub > 1</ sub > </ label >
40+ < input type ="number " id ="x_1 " min ="1 " max ="10000 " value ="33 " />
41+ < label for ="x_2 "> x< sub > 2</ sub > </ label >
42+ < input type ="number " id ="x_2 " min ="1 " max ="10000 " value ="33 " />
43+ < label for ="b "> b</ label >
44+ < input type ="number " id ="b " min ="0 " max ="10000 " value ="34 " />
45+ < label for ="m_1 "> m< sub > 1</ sub > </ label >
46+ < input type ="number " id ="m_1 " min ="0 " max ="1 " step ="0.01 " value ="0.4 " />
47+ < label for ="m_2 "> m< sub > 2</ sub > </ label >
48+ < input type ="number " id ="m_2 " min ="0 " max ="1 " step ="0.01 " value ="0.6 " />
49+ < label for ="g_1 "> g< sub > 1</ sub > </ label >
50+ < input type ="number " id ="g_1 " min ="0 " max ="1 " step ="0.01 " value ="0.6 " />
51+ < label for ="g_2 "> g< sub > 2</ sub > </ label >
52+ < input type ="number " id ="g_2 " min ="0 " max ="1 " step ="0.01 " value ="0.01 " />
53+ < label for ="alpha "> α</ label >
54+ < input type ="number " id ="alpha " min ="0 " max ="1 " step ="0.01 " value ="0.01 " />
55+ < label for ="beta "> β</ label >
56+ < input type ="number " id ="beta " min ="0 " max ="1 " step ="0.01 " value ="0.2 " />
57+ </ div >
58+ < label for ="t "> t</ label >
59+ < input type ="number " id ="t " min ="1 " max ="1000 " value ="100 " />
60+ < button id ="solve "> Solve</ button >
61+ </ div >
62+ < div id ="plot "> </ div >
63+ </ div >
2264
2365 < script type ="module ">
2466 import "https://cdn.plot.ly/plotly-3.1.0-rc.0.min.js"
2567
2668 let { solve_abrams_strogatz, solve_diaz_switkes } = wasmBindings ;
2769
28- async function run ( ) {
29- Plotly . newPlot ( 'abrams' , [
30- {
31- "y" : solve_abrams_strogatz ( 80 , 20 , 0.2 , 1.31 , 0.33 , 200 ) ,
32- "name" : "Monolingual 1" ,
33- "line" : {
34- "color" : "red"
35- }
70+ const model = document . getElementById ( "model" ) . value ;
71+ document . getElementById ( "abrams" ) . style . display = model === "abrams" ? "block" : "none" ;
72+ document . getElementById ( "diaz" ) . style . display = model === "diaz" ? "block" : "none" ;
73+
74+ document . getElementById ( "model" ) . addEventListener ( "change" , ( e ) => {
75+ const model = e . target . value ;
76+ document . getElementById ( "abrams" ) . style . display = model === "abrams" ? "block" : "none" ;
77+ document . getElementById ( "diaz" ) . style . display = model === "diaz" ? "block" : "none" ;
78+ } ) ;
79+
80+ document . getElementById ( "solve" ) . addEventListener ( "click" , async ( e ) => {
81+ const model = document . getElementById ( "model" ) . value ;
82+ const params = {
83+ abrams : {
84+ x : Number ( document . getElementById ( "x" ) . value ) ,
85+ y : Number ( document . getElementById ( "y" ) . value ) ,
86+ c : Number ( document . getElementById ( "c" ) . value ) ,
87+ a : Number ( document . getElementById ( "a" ) . value ) ,
88+ s : Number ( document . getElementById ( "s" ) . value )
3689 } ,
37- {
38- "y" : solve_abrams_strogatz ( 80 , 20 , 0.2 , 1.31 , 0.33 , 200 ) . map ( y => 100 - y ) ,
39- "name" : "Monolingual 2" ,
40- "line" : {
41- "color" : "blue"
42- }
90+ diaz : {
91+ x_1 : Number ( document . getElementById ( "x_1" ) . value ) ,
92+ x_2 : Number ( document . getElementById ( "x_2" ) . value ) ,
93+ b : Number ( document . getElementById ( "b" ) . value ) ,
94+ m_1 : Number ( document . getElementById ( "m_1" ) . value ) ,
95+ m_2 : Number ( document . getElementById ( "m_2" ) . value ) ,
96+ g_1 : Number ( document . getElementById ( "g_1" ) . value ) ,
97+ g_2 : Number ( document . getElementById ( "g_2" ) . value ) ,
98+ alpha : Number ( document . getElementById ( "alpha" ) . value ) ,
99+ beta : Number ( document . getElementById ( "beta" ) . value )
43100 }
44- ] ) ;
101+ } [ model ] ;
102+ const t = document . getElementById ( "t" ) . value ;
103+
104+ if ( model === "abrams" ) {
105+ const solution = await solve_abrams_strogatz ( params . x , params . y , params . c , params . a , params . s , t ) ;
106+ plot ( [ solution , solution . map ( y => ( params . x + params . y ) - y ) ] ) ;
107+ } else {
108+ const x = await solve_diaz_switkes ( [ params . x_1 , params . x_2 , params . b ] , [ params . m_1 , params . m_2 ] , [ params . g_1 , params . g_2 ] , params . alpha , params . beta , t , 0 ) ;
109+ const b = await solve_diaz_switkes ( [ params . x_1 , params . x_2 , params . b ] , [ params . m_1 , params . m_2 ] , [ params . g_1 , params . g_2 ] , params . alpha , params . beta , t , 1 ) ;
110+ plot ( [ x , b , x . map ( ( y , i ) => ( params . x_1 + params . x_2 + params . b ) - ( y + b [ i ] ) ) ] ) ;
111+ }
112+ } ) ;
45113
46- Plotly . newPlot ( 'diaz' , [
47- {
48- "y" : solve_diaz_switkes (
49- [ 33 , 34 , 33 ] , [ 0.4 , 0.6 ] , [ 0.6 , 0.01 ] , 0.01 , 0.2 , 300 , 0
50- ) ,
51- "name" : "Monolingual 1" ,
52- "line" : {
53- "color" : "red"
54- }
55- } ,
56- {
57- "y" : solve_diaz_switkes (
58- [ 33 , 34 , 33 ] , [ 0.4 , 0.6 ] , [ 0.6 , 0.01 ] , 0.01 , 0.2 , 300 , 1
59- ) ,
60- "name" : "Bilingual" ,
61- "line" : {
62- "color" : "blue"
63- }
114+ function plot ( data ) {
115+ Plotly . purge ( "plot" ) ;
116+ let input = [ ] ;
117+ for ( let i = 0 ; i < data [ 0 ] . length ; i ++ ) {
118+ input . push ( { y : data [ i ] } ) ;
119+ }
120+
121+ const layout = {
122+ title : "Lang Shift" ,
123+ xaxis : {
124+ title : "Time"
64125 } ,
65- {
66- "y" : solve_diaz_switkes (
67- [ 33 , 34 , 33 ] , [ 0.4 , 0.6 ] , [ 0.6 , 0.01 ] , 0.01 , 0.2 , 300 , 2
68- ) ,
69- "name" : "Monolingual 2" ,
70- "line" : {
71- "color" : "green"
72- }
126+ yaxis : {
127+ title : "Population"
73128 }
74- ] ) ;
75- }
129+ } ;
76130
77- run ( ) ;
131+ Plotly . newPlot ( "plot" , input , layout ) ;
132+ }
78133 </ script >
79134 </ body >
80135</ html >
0 commit comments