XForms/Venn Diagram

Motivation
You want to interactively change Venn Diagram parameters.

Method
Use XForms range controls to change values in a form. Use the bind to concatenate input parameters. Use the incremental attribute to allow the user to see the changes as the range controls change. Sending a submit will alter the Venn Diagram REST parameters.

Link to Executable Example
Load Example Form

Program Code
         

 



   </xf:model> Google Venn Diagram Demo <xf:range ref="instance('tmp')/sa" start="2" end="30" step="1" incremental="true"> <xf:label>Size A: </xf:label> </xf:range> <xf:range ref="instance('tmp')/sb" start="2" end="30" incremental="true"> <xf:label>Size B: </xf:label> </xf:range> <xf:range ref="instance('tmp')/sc" start="2" end="30" incremental="true"> <xf:label>Size C: </xf:label> </xf:range> <xf:range ref="instance('tmp')/ab" start="0" end="20" incremental="true"> <xf:label>AB Distance: </xf:label> </xf:range> <xf:range ref="instance('tmp')/ac" start="0" end="20" incremental="true"> <xf:label>AC Distance: </xf:label> </xf:range> <xf:range ref="instance('tmp')/bc" start="0" end="20" incremental="true"> <xf:label>BC Distance: </xf:label> </xf:range> <xf:range ref="instance('tmp')/abc" start="0" end="20" incremental="true"> <xf:label>ABC Overlap: </xf:label> </xf:range> <xf:output ref="chd"> <xf:label>Data:</xf:label> </xf:output> <xf:input ref="instance('tmp')//la"> <xf:label>Label A: </xf:label> </xf:input> <xf:input ref="instance('tmp')/lb"> <xf:label>Label B: </xf:label> </xf:input> <xf:input ref="instance('tmp')/lc"> <xf:label>Label C: </xf:label> </xf:input> <xf:output ref="instance('chart-params')/chd"> <xf:label>Distance Data:</xf:label> </xf:output> <xf:output ref="instance('chart-params')/chdl"> <xf:label>Labels:</xf:label> </xf:output> <xf:submit submission="get-chart"> <xf:label>Create Venn Diagram</xf:label> </xf:submit>