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
For a full tutorial, please see the following article published on Medium:
Add Azle to your D3 HTML file:
<head>
<script src='https://azlejs.com/v2/azle.min.js'></script>
</head>
Wrap all D3 code in the draw_visual function, and set all arguments to Azle_args:
Find places in the D3 code you want to control from your application, and add Azle_args["key"]:
python3 -m http.server
...and point your browser to: http://localhost:8000
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
})
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)"
}
az.barchart_extras = {
"text_color": "az.all_style_d3('text', {'fill' : 'white'})",
"text_size": "az.all_style_d3('text', {'font-size' : '17px'})"
}
az.add_slider('my_layout_cell', 1, {
"this_class" : "my_slider",
"default_value" : 7,
"min_value" : 0,
"max_value" : 30
})
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
})
}
az.add_event('my_slider', 1, {
"type" : "as_change",
"function" : change_bottom(this.value)
})
- Sean McClure - Creator -
This project is licensed under the MIT License.