Chart 3djs

api/resources/covid_epidemiology.py

@@ -9,9 +9,9 @@
 
 
 class CovidSirDResource(Resource):
-    def get(self):
+    def get(self,a1p):
         model_sird = CovidSirD()
-        data, time = model_sird.model(initial_conditions=np.array([32000000., 6., 0., 0.]), duration=120)
+        data, time = model_sird.model(a1p=a1p, initial_conditions=np.array([32000000., 6., 0., 0.]), duration=120)
         ds_dt = data[:, 0]
         di_dt = data[:, 1]
         dr_dt = data[:, 2]

api/routes.py

@@ -8,7 +8,7 @@
 api_rest = Api(api_bp)
 
 
-api_rest.add_resource(CovidSirDResource, '/sird')
+api_rest.add_resource(CovidSirDResource, '/sird','/sird/<float:a1p>')
 api_rest.add_resource(CovidSeirDResource, '/seird')
 api_rest.add_resource(CovidSeaichurDResource, '/seaichurd')
 api_rest.add_resource(UserListResource, '/users')

models/covid_sir_d.py

@@ -10,7 +10,7 @@
 
 class CovidSirD(ICovid19):
 
-    def model(self, initial_conditions, duration, epidemiological_parameters=None):
+    def model(self, a1p, initial_conditions, duration, epidemiological_parameters=None):
         """
         POBLACIONES EPIDEMIOLOGICAS
         Susceptibles (S) : initial_conditions[0]
@@ -37,4 +37,4 @@ def sird(x, t, a1, a2, a3):
                              a2 * x[1],
                              a3 * x[1]])
 
-        return odeint(sird, initial_conditions, time, (A1, A2, A3)), time
+        return odeint(sird, initial_conditions, time, (A1, A2, A3 + a1p)), time

static/js/app.js

@@ -1,4 +1,4 @@
-axios.get("/api/sird")
+axios.get("/api/sird/0.00")
     .then(response => {
         let data = response.data;
         let type = "sird";

web/templates/dashboard.html

@@ -3,13 +3,20 @@
 {% block css %}
 <!-- Chart CSS-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">
+<style>
+    .bar{
+        fill: steelblue;
+    }
+</style>
+
+<script src="https://d3js.org/d3.v4.min.js"></script>
 {% endblock %}
 
 {% block content %}
 <div class="container py-5">
     <div class="row">
         <div class="col-md-12">
-            <h1>Epidemic Calculator</h1>
+            <h1>Epidemic Calculator 3</h1>
 
             <h2 class="py-3">SIR-D</h2>
             <canvas id="chart-sird" width="400" height="150"></canvas>
@@ -20,6 +27,16 @@ <h2 class="py-3">SEIR-D</h2>
             <h2 class="py-3">SEAICHUR-D <small class="text-muted">(en proceso)</small></h2>
             <canvas id="chart-seaichurd" width="400" height="150"></canvas>
 
+            <br>
+            <br>     
+            <br>
+            <br>                    
+            <div style="width: 10%; margin: 0 auto;">
+                <input type="range" min="0.0" max="1.0" step="0.01" value="0.0" onchange="modulevalue(this)">
+            </div>
+
+            <svg width="1200" height="600"></svg>
+
         </div>
     </div>
 </div>
@@ -31,5 +48,98 @@ <h2 class="py-3">SEAICHUR-D <small class="text-muted">(en proceso)</small></h2>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+<script>
+
+    var svg = d3.select("svg"),
+        margin = 200,
+        width = svg.attr("width") - margin,
+        height = svg.attr("height") - margin
+
+    svg.append("text")
+       .attr("transform", "translate(100,0)")
+       .attr("x", 50)
+       .attr("y", 50)
+       .attr("font-size", "24px")
+       .text("SIR-D susceptible")
+
+    var xScale = d3.scaleLinear().range([0, width]),
+        yScale = d3.scaleLinear().range([height, 0]);
+
+    var g = svg.append("g")
+               .attr("transform", "translate(" + 100 + "," + 100 + ")");
+
+    d3.json("/api/sird/0.00", function(error, data) {
+
+        reloaddatad3(error, data)
+
+    });
+
+    function reloaddatad3(error, data){
+
+        if (error) {
+            throw error;
+        }
+        data2 = data.susceptible
+        console.log(d3.max(data2))
+
+        xScale.domain([0, data2.length]);
+        yScale.domain([0, d3.max(data2)]);
+
+        g.append("g")
+         .attr("transform", "translate(0," + height + ")")
+         .call(d3.axisBottom(xScale))
+         .append("text")
+         .attr("y", height -350)
+         .attr("x", width - width/2)
+         .attr("text-anchor", "end")
+         .attr("stroke", "black")
+         .text("Tiempo(dias)");
+
+        g.append("g")
+         .call(d3.axisLeft(yScale))
+         .append("text")
+         .attr("transform", "rotate(-90)")
+         .attr("y", 0)
+         .attr("x", -height/2)         
+         .attr("dy", "-8.1em")
+         .attr("text-anchor", "end")
+         .attr("stroke", "black")
+         .text("Población");
+
+        g.selectAll(".bar")
+         .data(data2)
+         .enter().append("rect")
+         .attr("class", "bar")
+         .attr("x", function(d,i) { return i*(width/data2.length); })
+         .attr("y", function(d) { return yScale(d); })
+         .attr("width", 2)
+         .attr("height", function(d) { return height - yScale(d); });
+
+    }
+
+
+</script>
+
+
+<script>
+
+    function modulevalue(el){
+        if(el.value== 0)
+            a1p = "0.0"
+        else{
+            a1p = el.value
+            console.log(a1p)    
+        }
+
+        d3.selectAll("svg g g, rect").remove()
+
+        d3.json("/api/sird/"+a1p, function(error, data) {
+
+            reloaddatad3(error, data)
+
+        });
+    }
+
+</script>
 
 {% endblock js %}