Skip to content

Instantly share code, notes, and snippets.

@chornbaker

chornbaker/.block

Last active December 14, 2016 21:20
Show Gist options
  • Save chornbaker/0b675edd9a2eb74dc60c8949521df520 to your computer and use it in GitHub Desktop.
Save chornbaker/0b675edd9a2eb74dc60c8949521df520 to your computer and use it in GitHub Desktop.
Download ZIP
Matplotlib Barchart in D3
Raw
.block
license: mit
Raw
README.md

Matplotlib Barchart in D3

This is a useful example for converting a matplotlib barchart to D3 with an initial animation. Using this template, you can quickly generate a nice dynamic barchart using all of your favorite matplotlib styles, and add more advanced interactions without dealing with a lot of additional formatting.

See barchart.py for code used to generate barchart.svg. It generates a simple barchart with some basic formatting. Matplotlib's savefig function will automatically output an svg format if the filepath has a .svg extension. The key is to assign a unique gid to each bar using set_gid, so it is simple to find the bars when you read the svg using d3.xml.

Raw
barchart.py
# -*- coding: utf-8 -*-
import matplotlib.pyplot as plt
import numpy as np
def main():
fig = plt.figure(figsize=(10, 5))
ax = fig.add_subplot(111)
width = .9
offset = 1.5-width
Y = np.random.randint(low=10, high=50, size=20)
X = np.arange(1, len(Y) + 1)
ax.bar(X, Y, width=width, align='center', color='steelblue')
# Assign unique id to each rectangle
for i, p in enumerate(ax.axes.patches):
p.set_gid("item_" + str(X[i]))
# Place bars and ticks
ax.set_xlim([min(X) - offset, max(X) + offset])
ax.set_xticks(X)
ax.set_xticklabels(X)
ax.xaxis.set_tick_params(size=0)
# Only show ticks on the left and bottom spines
ax.yaxis.set_ticks_position('left')
ax.xaxis.set_ticks_position('bottom')
# Hide the right and top spines
ax.spines['right'].set_visible(False)
ax.spines['top'].set_visible(False)
plt.savefig('barchart.svg', bbox_inches='tight', transparent=True)
if __name__ == '__main__':
main()
Display the source blob
Display the rendered blob
Raw
barchart.svg
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with matplotlib (http://matplotlib.org/) -->
<svg height="323pt" version="1.1" viewBox="0 0 591 323" width="591pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
*{stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:100000;}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 323.820625
L 591.67 323.820625
L 591.67 0
L 0 0
L 0 323.820625
z
" style="fill:none;"/>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 26.47 301.006875
L 584.47 301.006875
L 584.47 13.006875
L 26.47 13.006875
L 26.47 301.006875
z
" style="fill:none;"/>
</g>
<g id="item_1">
<path clip-path="url(#p4bbc4a0e6c)" d="M 30.613564 301.006875
L 55.47495 301.006875
L 55.47495 57.806875
L 30.613564 57.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_2">
<path clip-path="url(#p4bbc4a0e6c)" d="M 58.237327 301.006875
L 83.098713 301.006875
L 83.098713 185.806875
L 58.237327 185.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_3">
<path clip-path="url(#p4bbc4a0e6c)" d="M 85.861089 301.006875
L 110.722475 301.006875
L 110.722475 121.806875
L 85.861089 121.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_4">
<path clip-path="url(#p4bbc4a0e6c)" d="M 113.484851 301.006875
L 138.346238 301.006875
L 138.346238 121.806875
L 113.484851 121.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_5">
<path clip-path="url(#p4bbc4a0e6c)" d="M 141.108614 301.006875
L 165.97 301.006875
L 165.97 185.806875
L 141.108614 185.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_6">
<path clip-path="url(#p4bbc4a0e6c)" d="M 168.732376 301.006875
L 193.593762 301.006875
L 193.593762 217.806875
L 168.732376 217.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_7">
<path clip-path="url(#p4bbc4a0e6c)" d="M 196.356139 301.006875
L 221.217525 301.006875
L 221.217525 141.006875
L 196.356139 141.006875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_8">
<path clip-path="url(#p4bbc4a0e6c)" d="M 223.979901 301.006875
L 248.841287 301.006875
L 248.841287 134.606875
L 223.979901 134.606875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_9">
<path clip-path="url(#p4bbc4a0e6c)" d="M 251.603663 301.006875
L 276.46505 301.006875
L 276.46505 185.806875
L 251.603663 185.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_10">
<path clip-path="url(#p4bbc4a0e6c)" d="M 279.227426 301.006875
L 304.088812 301.006875
L 304.088812 64.206875
L 279.227426 64.206875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_11">
<path clip-path="url(#p4bbc4a0e6c)" d="M 306.851188 301.006875
L 331.712574 301.006875
L 331.712574 57.806875
L 306.851188 57.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_12">
<path clip-path="url(#p4bbc4a0e6c)" d="M 334.47495 301.006875
L 359.336337 301.006875
L 359.336337 70.606875
L 334.47495 70.606875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_13">
<path clip-path="url(#p4bbc4a0e6c)" d="M 362.098713 301.006875
L 386.960099 301.006875
L 386.960099 19.406875
L 362.098713 19.406875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_14">
<path clip-path="url(#p4bbc4a0e6c)" d="M 389.722475 301.006875
L 414.583861 301.006875
L 414.583861 96.206875
L 389.722475 96.206875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_15">
<path clip-path="url(#p4bbc4a0e6c)" d="M 417.346238 301.006875
L 442.207624 301.006875
L 442.207624 89.806875
L 417.346238 89.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_16">
<path clip-path="url(#p4bbc4a0e6c)" d="M 444.97 301.006875
L 469.831386 301.006875
L 469.831386 153.806875
L 444.97 153.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_17">
<path clip-path="url(#p4bbc4a0e6c)" d="M 472.593762 301.006875
L 497.455149 301.006875
L 497.455149 77.006875
L 472.593762 77.006875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_18">
<path clip-path="url(#p4bbc4a0e6c)" d="M 500.217525 301.006875
L 525.078911 301.006875
L 525.078911 179.406875
L 500.217525 179.406875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_19">
<path clip-path="url(#p4bbc4a0e6c)" d="M 527.841287 301.006875
L 552.702673 301.006875
L 552.702673 192.206875
L 527.841287 192.206875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="item_20">
<path clip-path="url(#p4bbc4a0e6c)" d="M 555.46505 301.006875
L 580.326436 301.006875
L 580.326436 57.806875
L 555.46505 57.806875
z
" style="fill:#4682b4;stroke:#000000;stroke-linejoin:miter;"/>
</g>
<g id="patch_3">
<path d="M 26.47 301.006875
L 26.47 13.006875
" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-linejoin:miter;"/>
</g>
<g id="patch_4">
<path d="M 26.47 301.006875
L 584.47 301.006875
" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-linejoin:miter;"/>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<g id="line2d_1">
<defs>
<path d="M 0 0
L 0 0
" id="ma13b3635d0" style="stroke:#000000;stroke-width:0.5;"/>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="43.0442574257" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_1">
<!-- 1 -->
<defs>
<path d="M 12.40625 8.296875
L 28.515625 8.296875
L 28.515625 63.921875
L 10.984375 60.40625
L 10.984375 69.390625
L 28.421875 72.90625
L 38.28125 72.90625
L 38.28125 8.296875
L 54.390625 8.296875
L 54.390625 0
L 12.40625 0
z
" id="BitstreamVeraSans-Roman-31"/>
</defs>
<g transform="translate(39.2267574257 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="70.668019802" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_2">
<!-- 2 -->
<defs>
<path d="M 19.1875 8.296875
L 53.609375 8.296875
L 53.609375 0
L 7.328125 0
L 7.328125 8.296875
Q 12.9375 14.109375 22.625 23.890625
Q 32.328125 33.6875 34.8125 36.53125
Q 39.546875 41.84375 41.421875 45.53125
Q 43.3125 49.21875 43.3125 52.78125
Q 43.3125 58.59375 39.234375 62.25
Q 35.15625 65.921875 28.609375 65.921875
Q 23.96875 65.921875 18.8125 64.3125
Q 13.671875 62.703125 7.8125 59.421875
L 7.8125 69.390625
Q 13.765625 71.78125 18.9375 73
Q 24.125 74.21875 28.421875 74.21875
Q 39.75 74.21875 46.484375 68.546875
Q 53.21875 62.890625 53.21875 53.421875
Q 53.21875 48.921875 51.53125 44.890625
Q 49.859375 40.875 45.40625 35.40625
Q 44.1875 33.984375 37.640625 27.21875
Q 31.109375 20.453125 19.1875 8.296875
" id="BitstreamVeraSans-Roman-32"/>
</defs>
<g transform="translate(66.850519802 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-32"/>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="98.2917821782" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_3">
<!-- 3 -->
<defs>
<path d="M 40.578125 39.3125
Q 47.65625 37.796875 51.625 33
Q 55.609375 28.21875 55.609375 21.1875
Q 55.609375 10.40625 48.1875 4.484375
Q 40.765625 -1.421875 27.09375 -1.421875
Q 22.515625 -1.421875 17.65625 -0.515625
Q 12.796875 0.390625 7.625 2.203125
L 7.625 11.71875
Q 11.71875 9.328125 16.59375 8.109375
Q 21.484375 6.890625 26.8125 6.890625
Q 36.078125 6.890625 40.9375 10.546875
Q 45.796875 14.203125 45.796875 21.1875
Q 45.796875 27.640625 41.28125 31.265625
Q 36.765625 34.90625 28.71875 34.90625
L 20.21875 34.90625
L 20.21875 43.015625
L 29.109375 43.015625
Q 36.375 43.015625 40.234375 45.921875
Q 44.09375 48.828125 44.09375 54.296875
Q 44.09375 59.90625 40.109375 62.90625
Q 36.140625 65.921875 28.71875 65.921875
Q 24.65625 65.921875 20.015625 65.03125
Q 15.375 64.15625 9.8125 62.3125
L 9.8125 71.09375
Q 15.4375 72.65625 20.34375 73.4375
Q 25.25 74.21875 29.59375 74.21875
Q 40.828125 74.21875 47.359375 69.109375
Q 53.90625 64.015625 53.90625 55.328125
Q 53.90625 49.265625 50.4375 45.09375
Q 46.96875 40.921875 40.578125 39.3125
" id="BitstreamVeraSans-Roman-33"/>
</defs>
<g transform="translate(94.4742821782 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-33"/>
</g>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="125.915544554" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_4">
<!-- 4 -->
<defs>
<path d="M 37.796875 64.3125
L 12.890625 25.390625
L 37.796875 25.390625
z
M 35.203125 72.90625
L 47.609375 72.90625
L 47.609375 25.390625
L 58.015625 25.390625
L 58.015625 17.1875
L 47.609375 17.1875
L 47.609375 0
L 37.796875 0
L 37.796875 17.1875
L 4.890625 17.1875
L 4.890625 26.703125
z
" id="BitstreamVeraSans-Roman-34"/>
</defs>
<g transform="translate(122.098044554 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-34"/>
</g>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="153.539306931" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_5">
<!-- 5 -->
<defs>
<path d="M 10.796875 72.90625
L 49.515625 72.90625
L 49.515625 64.59375
L 19.828125 64.59375
L 19.828125 46.734375
Q 21.96875 47.46875 24.109375 47.828125
Q 26.265625 48.1875 28.421875 48.1875
Q 40.625 48.1875 47.75 41.5
Q 54.890625 34.8125 54.890625 23.390625
Q 54.890625 11.625 47.5625 5.09375
Q 40.234375 -1.421875 26.90625 -1.421875
Q 22.3125 -1.421875 17.546875 -0.640625
Q 12.796875 0.140625 7.71875 1.703125
L 7.71875 11.625
Q 12.109375 9.234375 16.796875 8.0625
Q 21.484375 6.890625 26.703125 6.890625
Q 35.15625 6.890625 40.078125 11.328125
Q 45.015625 15.765625 45.015625 23.390625
Q 45.015625 31 40.078125 35.4375
Q 35.15625 39.890625 26.703125 39.890625
Q 22.75 39.890625 18.8125 39.015625
Q 14.890625 38.140625 10.796875 36.28125
z
" id="BitstreamVeraSans-Roman-35"/>
</defs>
<g transform="translate(149.721806931 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
<g id="xtick_6">
<g id="line2d_6">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="181.163069307" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_6">
<!-- 6 -->
<defs>
<path d="M 33.015625 40.375
Q 26.375 40.375 22.484375 35.828125
Q 18.609375 31.296875 18.609375 23.390625
Q 18.609375 15.53125 22.484375 10.953125
Q 26.375 6.390625 33.015625 6.390625
Q 39.65625 6.390625 43.53125 10.953125
Q 47.40625 15.53125 47.40625 23.390625
Q 47.40625 31.296875 43.53125 35.828125
Q 39.65625 40.375 33.015625 40.375
M 52.59375 71.296875
L 52.59375 62.3125
Q 48.875 64.0625 45.09375 64.984375
Q 41.3125 65.921875 37.59375 65.921875
Q 27.828125 65.921875 22.671875 59.328125
Q 17.53125 52.734375 16.796875 39.40625
Q 19.671875 43.65625 24.015625 45.921875
Q 28.375 48.1875 33.59375 48.1875
Q 44.578125 48.1875 50.953125 41.515625
Q 57.328125 34.859375 57.328125 23.390625
Q 57.328125 12.15625 50.6875 5.359375
Q 44.046875 -1.421875 33.015625 -1.421875
Q 20.359375 -1.421875 13.671875 8.265625
Q 6.984375 17.96875 6.984375 36.375
Q 6.984375 53.65625 15.1875 63.9375
Q 23.390625 74.21875 37.203125 74.21875
Q 40.921875 74.21875 44.703125 73.484375
Q 48.484375 72.75 52.59375 71.296875
" id="BitstreamVeraSans-Roman-36"/>
</defs>
<g transform="translate(177.345569307 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-36"/>
</g>
</g>
</g>
<g id="xtick_7">
<g id="line2d_7">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="208.786831683" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_7">
<!-- 7 -->
<defs>
<path d="M 8.203125 72.90625
L 55.078125 72.90625
L 55.078125 68.703125
L 28.609375 0
L 18.3125 0
L 43.21875 64.59375
L 8.203125 64.59375
z
" id="BitstreamVeraSans-Roman-37"/>
</defs>
<g transform="translate(204.969331683 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-37"/>
</g>
</g>
</g>
<g id="xtick_8">
<g id="line2d_8">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="236.410594059" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_8">
<!-- 8 -->
<defs>
<path d="M 31.78125 34.625
Q 24.75 34.625 20.71875 30.859375
Q 16.703125 27.09375 16.703125 20.515625
Q 16.703125 13.921875 20.71875 10.15625
Q 24.75 6.390625 31.78125 6.390625
Q 38.8125 6.390625 42.859375 10.171875
Q 46.921875 13.96875 46.921875 20.515625
Q 46.921875 27.09375 42.890625 30.859375
Q 38.875 34.625 31.78125 34.625
M 21.921875 38.8125
Q 15.578125 40.375 12.03125 44.71875
Q 8.5 49.078125 8.5 55.328125
Q 8.5 64.0625 14.71875 69.140625
Q 20.953125 74.21875 31.78125 74.21875
Q 42.671875 74.21875 48.875 69.140625
Q 55.078125 64.0625 55.078125 55.328125
Q 55.078125 49.078125 51.53125 44.71875
Q 48 40.375 41.703125 38.8125
Q 48.828125 37.15625 52.796875 32.3125
Q 56.78125 27.484375 56.78125 20.515625
Q 56.78125 9.90625 50.3125 4.234375
Q 43.84375 -1.421875 31.78125 -1.421875
Q 19.734375 -1.421875 13.25 4.234375
Q 6.78125 9.90625 6.78125 20.515625
Q 6.78125 27.484375 10.78125 32.3125
Q 14.796875 37.15625 21.921875 38.8125
M 18.3125 54.390625
Q 18.3125 48.734375 21.84375 45.5625
Q 25.390625 42.390625 31.78125 42.390625
Q 38.140625 42.390625 41.71875 45.5625
Q 45.3125 48.734375 45.3125 54.390625
Q 45.3125 60.0625 41.71875 63.234375
Q 38.140625 66.40625 31.78125 66.40625
Q 25.390625 66.40625 21.84375 63.234375
Q 18.3125 60.0625 18.3125 54.390625
" id="BitstreamVeraSans-Roman-38"/>
</defs>
<g transform="translate(232.593094059 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-38"/>
</g>
</g>
</g>
<g id="xtick_9">
<g id="line2d_9">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="264.034356436" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_9">
<!-- 9 -->
<defs>
<path d="M 10.984375 1.515625
L 10.984375 10.5
Q 14.703125 8.734375 18.5 7.8125
Q 22.3125 6.890625 25.984375 6.890625
Q 35.75 6.890625 40.890625 13.453125
Q 46.046875 20.015625 46.78125 33.40625
Q 43.953125 29.203125 39.59375 26.953125
Q 35.25 24.703125 29.984375 24.703125
Q 19.046875 24.703125 12.671875 31.3125
Q 6.296875 37.9375 6.296875 49.421875
Q 6.296875 60.640625 12.9375 67.421875
Q 19.578125 74.21875 30.609375 74.21875
Q 43.265625 74.21875 49.921875 64.515625
Q 56.59375 54.828125 56.59375 36.375
Q 56.59375 19.140625 48.40625 8.859375
Q 40.234375 -1.421875 26.421875 -1.421875
Q 22.703125 -1.421875 18.890625 -0.6875
Q 15.09375 0.046875 10.984375 1.515625
M 30.609375 32.421875
Q 37.25 32.421875 41.125 36.953125
Q 45.015625 41.5 45.015625 49.421875
Q 45.015625 57.28125 41.125 61.84375
Q 37.25 66.40625 30.609375 66.40625
Q 23.96875 66.40625 20.09375 61.84375
Q 16.21875 57.28125 16.21875 49.421875
Q 16.21875 41.5 20.09375 36.953125
Q 23.96875 32.421875 30.609375 32.421875
" id="BitstreamVeraSans-Roman-39"/>
</defs>
<g transform="translate(260.216856436 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-39"/>
</g>
</g>
</g>
<g id="xtick_10">
<g id="line2d_10">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="291.658118812" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_10">
<!-- 10 -->
<defs>
<path d="M 31.78125 66.40625
Q 24.171875 66.40625 20.328125 58.90625
Q 16.5 51.421875 16.5 36.375
Q 16.5 21.390625 20.328125 13.890625
Q 24.171875 6.390625 31.78125 6.390625
Q 39.453125 6.390625 43.28125 13.890625
Q 47.125 21.390625 47.125 36.375
Q 47.125 51.421875 43.28125 58.90625
Q 39.453125 66.40625 31.78125 66.40625
M 31.78125 74.21875
Q 44.046875 74.21875 50.515625 64.515625
Q 56.984375 54.828125 56.984375 36.375
Q 56.984375 17.96875 50.515625 8.265625
Q 44.046875 -1.421875 31.78125 -1.421875
Q 19.53125 -1.421875 13.0625 8.265625
Q 6.59375 17.96875 6.59375 36.375
Q 6.59375 54.828125 13.0625 64.515625
Q 19.53125 74.21875 31.78125 74.21875
" id="BitstreamVeraSans-Roman-30"/>
</defs>
<g transform="translate(284.023118812 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="xtick_11">
<g id="line2d_11">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="319.281881188" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_11">
<!-- 11 -->
<g transform="translate(311.646881188 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-31"/>
</g>
</g>
</g>
<g id="xtick_12">
<g id="line2d_12">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="346.905643564" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_12">
<!-- 12 -->
<g transform="translate(339.270643564 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-32"/>
</g>
</g>
</g>
<g id="xtick_13">
<g id="line2d_13">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="374.529405941" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_13">
<!-- 13 -->
<g transform="translate(366.894405941 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-33"/>
</g>
</g>
</g>
<g id="xtick_14">
<g id="line2d_14">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="402.153168317" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_14">
<!-- 14 -->
<g transform="translate(394.518168317 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-34"/>
</g>
</g>
</g>
<g id="xtick_15">
<g id="line2d_15">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="429.776930693" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_15">
<!-- 15 -->
<g transform="translate(422.141930693 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
<g id="xtick_16">
<g id="line2d_16">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="457.400693069" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_16">
<!-- 16 -->
<g transform="translate(449.765693069 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-36"/>
</g>
</g>
</g>
<g id="xtick_17">
<g id="line2d_17">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="485.024455446" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_17">
<!-- 17 -->
<g transform="translate(477.389455446 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-37"/>
</g>
</g>
</g>
<g id="xtick_18">
<g id="line2d_18">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="512.648217822" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_18">
<!-- 18 -->
<g transform="translate(505.013217822 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-38"/>
</g>
</g>
</g>
<g id="xtick_19">
<g id="line2d_19">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="540.271980198" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_19">
<!-- 19 -->
<g transform="translate(532.636980198 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-39"/>
</g>
</g>
</g>
<g id="xtick_20">
<g id="line2d_20">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="567.895742574" xlink:href="#ma13b3635d0" y="301.006875"/>
</g>
</g>
<g id="text_20">
<!-- 20 -->
<g transform="translate(560.260742574 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-32"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1">
<g id="line2d_21">
<defs>
<path d="M 0 0
L 4 0
" id="m01438581a1" style="stroke:#000000;stroke-width:0.5;"/>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="301.006875"/>
</g>
</g>
<g id="text_21">
<!-- 0 -->
<g transform="translate(14.835 304.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_22">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="269.006875"/>
</g>
</g>
<g id="text_22">
<!-- 5 -->
<g transform="translate(14.835 272.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_23">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="237.006875"/>
</g>
</g>
<g id="text_23">
<!-- 10 -->
<g transform="translate(7.2 240.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_24">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="205.006875"/>
</g>
</g>
<g id="text_24">
<!-- 15 -->
<g transform="translate(7.2 208.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
<g id="ytick_5">
<g id="line2d_25">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="173.006875"/>
</g>
</g>
<g id="text_25">
<!-- 20 -->
<g transform="translate(7.2 176.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-32"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_6">
<g id="line2d_26">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="141.006875"/>
</g>
</g>
<g id="text_26">
<!-- 25 -->
<g transform="translate(7.2 144.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-32"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
<g id="ytick_7">
<g id="line2d_27">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="109.006875"/>
</g>
</g>
<g id="text_27">
<!-- 30 -->
<g transform="translate(7.2 112.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-33"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_8">
<g id="line2d_28">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="77.006875"/>
</g>
</g>
<g id="text_28">
<!-- 35 -->
<g transform="translate(7.2 80.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-33"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
<g id="ytick_9">
<g id="line2d_29">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="45.006875"/>
</g>
</g>
<g id="text_29">
<!-- 40 -->
<g transform="translate(7.2 48.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-34"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_10">
<g id="line2d_30">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="26.47" xlink:href="#m01438581a1" y="13.006875"/>
</g>
</g>
<g id="text_30">
<!-- 45 -->
<g transform="translate(7.2 16.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-34"/>
<use x="63.623046875" xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="p4bbc4a0e6c">
<rect height="288.0" width="558.0" x="26.47" y="13.006875"/>
</clipPath>
</defs>
</svg>
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- CDN resource versions -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<!-- chart SVGs-->
<div id="chart"></div>
<script type="text/javascript">
d3.queue()
.defer(d3.xml, "barchart.svg")
.await(ready);
function ready(error, xml) {
if (error) throw error;
// Load SVG into chart
d3.select("#chart").node().appendChild(xml.documentElement);
///////////////////////////////////////////////////////////////////////////
/////////////////////////// Helper Functions //////////////////////////////
///////////////////////////////////////////////////////////////////////////
// Temporarily disable user interractions to allow animations to complete
var disableUserInterractions = function (time) {
isTransitioning = true;
setTimeout(function(){
isTransitioning = false;
}, time);
}//disableUserInterractions
// Convert rectangles into paths
function getPathFromRect(x,y,w,h) {
return "M " + x + " " + y +
" L " + (x+w) + " " + y +
" L " + (x+w) + " " + (y-h) +
" L " + x + " " + (y-h) + " z"
}//getPathFromRect
// Convert paths into rectangles
function getRectFromPath(path) {
// TODO: Generalize this for more robust parsing
path = path.split(" ")
return {"x": parseFloat(path[0].split(" ")[1]),
"y": parseFloat(path[0].split(" ")[2]),
"w": (parseFloat(path[1].split(" ")[1]) - parseFloat(path[0].split(" ")[1])),
"h": (parseFloat(path[0].split(" ")[2]) - parseFloat(path[2].split(" ")[2]))
}
}//getRectFromPath
///////////////////////////////////////////////////////////////////////////
///////////////////////// Animation Elements //////////////////////////////
///////////////////////////////////////////////////////////////////////////
// Set initial transition state
var isTransitioning = false;
// Basic plot elements
var svg, plot, bars, bar_locs,
bar_label = "item_";
svg = d3.select("#chart").select("svg")
plot = svg.select("#figure_1")
var height = parseFloat(svg.style("height"));
var width = parseFloat(svg.style("width"))
bars = plot.selectAll("g").filter(function(d,i,j) {
return new RegExp(bar_label, 'g').test(j[i].id)
});
bar_locs = {}
bars.nodes().forEach(function(d,i,j) {
var bar = d3.select(j[i]).selectAll("path");
var bar_id = j[i].id;
var bar_rect = getRectFromPath(bar.attr("d"))
bar_locs[bar_id] = bar_rect
bar_rect["c"] = bar.style("fill")
})
svg.on("click", function(){
if (isTransitioning == false) {
init();
}
});
///////////////////////////////////////////////////////////////////////////
////////////////// Initialize Graphic and Animations //////////////////////
///////////////////////////////////////////////////////////////////////////
function init() {
//////////////////////////////////////////////////////
///////////////////// Actions ////////////////////////
//////////////////////////////////////////////////////
var DURATION = 1000;
var OPACITY = 1
disableUserInterractions(DURATION * 3);
bars.each(function(d,i,j) {
var loc = bar_locs[j[i].id]
d3.select(this).selectAll("path")
.attr("d", getPathFromRect(loc.x,loc.y,loc.w,0))
})
bars.transition()
.each(function(d,i,j) {
var loc = bar_locs[j[i].id]
d3.select(this).selectAll("path")
.transition().delay(i*100).duration(DURATION + (i*10))
.ease(d3.easeCubic)
.attr("d", getPathFromRect(loc.x,loc.y,loc.w,loc.h))
})
}//init
init()
};
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment