Azle_D3
Azle_D3 is a demo application showing how to combine Azle with D3.js to bind visualizations to UI elements. This enables developers and data scientists to prototype real applications rather than isolated toy visuals disconnected from a true user experience.
You can learn to use Azle here
You can try the example application here
You can watch a preview video of the application here
Getting Started
For a full tutorial, please see the following article published on Medium:
Graduating from Toy Visuals to Real Applications
Adding Libraries
Add Azle to your D3 HTML file:
<head>
<script src='https://azlejs.com/v2/azle.min.js'></script>
</head>
Wrap D3 Visual
Wrap all D3 code in the draw_visual function, and set all arguments to Azle_args:
Find Hooks
Find places in the D3 code you want to control from your application, and add Azle_args["key"]:
Spin Up a Local Web Server
python3 -m http.server
...and point your browser to: http://localhost:8000
Add D3 Visual
az.add_d3_visual('my_layout_cells', 2, {
"this_class" : "my_barchart",
"html_path" : "visuals/barchart.html",
"wrapper_arguments" : barchart_wrapper_args,
"extra_functions" : barchart_extras
})
Set Wrapper Arguments
az.barchart_wrapper_args = {
"data_choice" : "../data/bar_data.tsv",
"y_title" : "AVG RETURN",
"top_choice" : 30,
"right_choice" : 30,
"bottom_choice" : 30,
"left_choice" : 30,
"bar_color" : "rgb(48, 229, 255)"
}
Set Extra Functions
az.barchart_extras = {
"text_color": "az.all_style_d3('text', {'fill' : 'white'})",
"text_size": "az.all_style_d3('text', {'font-size' : '17px'})"
}
Binding D3 to UI Elements
Create the UI element...
az.add_slider('my_layout_cell', 1, {
"this_class" : "my_slider",
"default_value" : 7,
"min_value" : 0,
"max_value" : 30
})
...place call_d3_wrapper (or call_d3_extra) inside a regular JS function:
az.function change_bottom(passed_value) {
call_d3_wrapper('my_barchart', 1, {
"wrapper_arguments" : barchart_wrapper_args,
"extra_functions" : barchart_extras,
"bottom_choice" : passed_value
})
}
...add an event to UI element and pass value to above function:
az.add_event('my_slider', 1, {
"type" : "as_change",
"function" : change_bottom(this.value)
})
Authors
- Sean McClure - Creator -
License
This project is licensed under the MIT License.