Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
177 lines (151 sloc) 5.64 KB
layout title categories description
page
Cyclic voltammetry web app
articles
A JavaScript web app for cyclic voltammetry simulations, built with plotly.js
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.3/math.min.js"></script> <script src="/assets/CVsim.js" type="text/javascript"></script>
<style>
  html, body, h1, h2, h3, h4, h5, h6 {
  font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input[type=text] {
  padding: 2px 2px;
  margin: 2px 0;
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
Last updated: May 9, 2018

This cyclic voltammetry simulation couples a one-electron electrochemical reaction with a subsequent chemical reaction of the reduced species, as below:

$$ O + e^- \overset{k_f}{\underset{k_b}{\rightleftarrows}} R \overset{k_c}{\rightarrow} Z $$

I've created tutorials on the fundamental electrochemistry of cyclic voltammetry and on a walkthrough of a MATLAB/Octave version of this simulation.



I discussed how I made this app in this post. I hope that this tool increases the accessibility of simple cyclic voltammetry simulations. Please contact me with any questions, comments, or suggestions!



To save an image and extract the x-y data, use the first two buttons in the toolbar. To study the concentration profiles, use the MATLAB version of this app.




$ C_O = $ $ \text{mol/cm}^3 $, initial concentration of $ O $
$ D = $ $ \text{cm}^2 \text{/s} $, diffusion coefficient of both $ O $ and $ R $
$ \eta_i = $ $ \text{V} $, initial overpotential
$ \eta_f = $ $ \text{V} $, final overpotential
$ \nu = $ $ \text{V/s} $, scan rate
$ \alpha = $ , charge transfer coefficient
$ k^0 = $ $ \text{cm/s} $, electrochemical rate constant
$ k_c = $ $ \text{s}^{-1} $, chemical rate constant

Legend:

Add Remove
Reversibility parameters
$ \Lambda = $
$ k_c t_k = $
<textarea cols="50" id="chemrevwarn" value="" class="field left" readonly style="color:#f00;"></textarea>


<script> CVplotID = document.getElementById('CVplot'); // Initialize CV plot with IV curve generated using default values var result = CVplot(); var xdata = result[0]; var ydata = result[1]; var trace1 = { x: xdata, y: ydata, type: 'scatter', mode: 'lines', name: 'sim1', line: { width: 3 } }; var data = [trace1]; var layout = { title: 'Cyclic Voltammetry simulation: EC mechanism', xaxis: { title: 'Overpotential (V)', showgrid: true, zeroline: false }, yaxis: { title: 'Current density (mA/cm2)', showgrid: true, zeroline: false }, displaylogo: false, hovermode: 'closest' }; Plotly.newPlot('CVplot', data, layout); // Add button document.getElementById('addDataset').addEventListener('click', function() { // Get legend legendlabel = document.getElementById('legend').value; // Run simulation var result = CVplot(); var xdata = result[0]; var ydata = result[1]; var newline = { x: xdata, y: ydata, type: 'scatter', mode: 'lines', name: legendlabel, line: { width: 3 } }; // add data and update plot data.push(newline); Plotly.newPlot('CVplot', data, layout); // update legend text box var simnum = data.length + 1; document.getElementById('legend').value = 'sim' + simnum.toString(); }); // Remove button document.getElementById('removeDataset').addEventListener('click', function() { // remove data and update plot data.pop(); Plotly.newPlot('CVplot', data, layout); // update legend text box var simnum = data.length + 1; document.getElementById('legend').value = 'sim' + simnum.toString(); }); </script>