Skip to content

Instantly share code, notes, and snippets.

@chornbaker

chornbaker/.block

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

Matplotlib Linechart in D3

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

See linechart.py for code used to generate linechart.svg. It generates a simple linechart 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 line using the gid parameter, so it is simple to find the lines when you read the svg in index.html.

This is Part 2 in a series of examples for using matplotlib generated plots in D3.

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, "linechart.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
///////////////////////////////////////////////////////////////////////////
///////////////////////// Animation Elements //////////////////////////////
///////////////////////////////////////////////////////////////////////////
// Set initial transition state
var isTransitioning = false;
// Basic plot elements
var svg, plot, lines
label = "line_";
svg = d3.select("#chart").select("svg")
plot = svg.select("#figure_1")
lines = plot.selectAll("g").filter(function(d,i,j) {
return new RegExp(label, 'g').test(j[i].id)
});
svg.on("click", function(){
if (isTransitioning == false) {
init();
}
});
///////////////////////////////////////////////////////////////////////////
////////////////// Initialize Graphic and Animations //////////////////////
///////////////////////////////////////////////////////////////////////////
function init() {
//////////////////////////////////////////////////////
///////////////////// Actions ////////////////////////
//////////////////////////////////////////////////////
var DURATION = 2000;
var DELAY = 2000;
disableUserInterractions(DURATION * lines.nodes().length);
// Intialize lines to zero
lines.each(function() {
d3.select(this).selectAll("path")
.attr("stroke-dasharray", function(d) {
var totalLength = this.getTotalLength()
return(totalLength + " " + totalLength)
})
.attr("stroke-dashoffset", function(d) {
return this.getTotalLength()
})
})
// Animate lines
lines.each(function(d,i) {
d3.select(this).selectAll("path")
.transition().delay(i * DELAY).duration(DURATION)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0)
})
}//init
init()
};
</script>
</body>
Raw
linechart.py
# -*- coding: utf-8 -*-
import matplotlib.pyplot as plt
import numpy as np
from cycler import cycler
def main():
fig = plt.figure(figsize=(10, 5))
ax = fig.add_subplot(111)
# Generate some random lines
n = 1000
lines = 5
xlim = [0, 20]
X = np.arange(xlim[0], xlim[1], step=xlim[1] / n)
ax.set_prop_cycle(cycler('color',
[plt.cm.viridis(i) for i in np.linspace(0, 1, lines)]))
ax.hold(True)
for i in range(0, lines):
Y = (np.sin(X + np.random.normal(0, 10, 1)) +
np.random.normal(0, 2, 1)) * np.exp(X*np.random.normal(0, .05, 1))
ax.plot(X, Y, linewidth=2, gid="line_" + str(i))
# 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('linechart.svg', bbox_inches='tight', transparent=True)
if __name__ == '__main__':
main()
Display the source blob
Display the rendered blob
Raw
linechart.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 609 323" width="609pt" 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 609.360625 323.820625
L 609.360625 0
L 0 0
L 0 323.820625
z
" style="fill:none;"/>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 36.525625 301.006875
L 594.525625 301.006875
L 594.525625 13.006875
L 36.525625 13.006875
L 36.525625 301.006875
z
" style="fill:none;"/>
</g>
<g id="line_0">
<path clip-path="url(#pfe85bdbd9d)" d="M 36.525625 224.533197
L 43.221625 225.387204
L 49.359625 225.963029
L 55.497625 226.315853
L 61.635625 226.432104
L 67.773625 226.309557
L 73.911625 225.957698
L 80.607625 225.337269
L 87.861625 224.4343
L 97.347625 223.007717
L 117.435625 219.909316
L 124.689625 219.059376
L 130.827625 218.55226
L 136.407625 218.295113
L 141.987625 218.254593
L 147.567625 218.444013
L 153.147625 218.867739
L 158.727625 219.520843
L 164.307625 220.389117
L 170.445625 221.564927
L 177.699625 223.195819
L 187.185625 225.581744
L 203.925625 229.820758
L 211.179625 231.393977
L 217.317625 232.494134
L 222.897625 233.267734
L 227.919625 233.756093
L 232.941625 234.033673
L 237.963625 234.094017
L 242.985625 233.937702
L 248.007625 233.572457
L 253.587625 232.939748
L 259.725625 232.002943
L 266.421625 230.753611
L 275.907625 228.738174
L 289.857625 225.780768
L 296.553625 224.594631
L 302.133625 223.814453
L 307.155625 223.314493
L 312.177625 223.034215
L 317.199625 222.993937
L 321.663625 223.170224
L 326.127625 223.550231
L 330.591625 224.132589
L 335.613625 225.021229
L 340.635625 226.140429
L 346.215625 227.623932
L 352.353625 229.495787
L 360.165625 232.130248
L 379.695625 238.848834
L 385.833625 240.661282
L 391.413625 242.063882
L 396.435625 243.083698
L 400.899625 243.772641
L 405.363625 244.240987
L 409.827625 244.479199
L 414.291625 244.483579
L 418.755625 244.25645
L 423.219625 243.806193
L 427.683625 243.147129
L 432.705625 242.181179
L 438.285625 240.872217
L 444.981625 239.057295
L 458.373625 235.105393
L 466.185625 232.948225
L 471.765625 231.62355
L 476.787625 230.652344
L 481.251625 230.003047
L 485.715625 229.583238
L 489.621625 229.421091
L 493.527625 229.461594
L 497.433625 229.711427
L 501.339625 230.173261
L 505.245625 230.845649
L 509.151625 231.722997
L 513.615625 232.964047
L 518.079625 234.43926
L 523.101625 236.344837
L 528.681625 238.711778
L 535.935625 242.0593
L 553.791625 250.440053
L 559.371625 252.749057
L 564.393625 254.576545
L 568.857625 255.957099
L 572.763625 256.950853
L 576.669625 257.726721
L 580.575625 258.271823
L 584.481625 258.577696
L 588.387625 258.640522
L 592.293625 258.46127
L 593.967625 258.311609
L 593.967625 258.311609
" style="fill:none;stroke:#440154;stroke-linecap:square;stroke-width:2.0;"/>
</g>
<g id="line_1">
<path clip-path="url(#pfe85bdbd9d)" d="M 36.525625 185.827365
L 43.779625 186.369248
L 53.265625 187.320098
L 74.469625 189.541177
L 81.165625 189.982641
L 87.303625 190.170017
L 92.883625 190.119171
L 97.905625 189.868866
L 102.927625 189.409058
L 107.949625 188.730773
L 112.971625 187.831628
L 117.993625 186.716197
L 123.573625 185.237591
L 129.153625 183.532673
L 135.849625 181.239694
L 144.219625 178.111927
L 163.191625 170.925761
L 169.329625 168.880488
L 174.909625 167.254241
L 179.931625 166.023379
L 184.395625 165.139707
L 188.859625 164.470818
L 193.323625 164.027285
L 197.787625 163.813843
L 202.251625 163.829033
L 206.715625 164.064998
L 211.179625 164.507437
L 216.201625 165.226062
L 221.781625 166.253138
L 229.035625 167.84192
L 246.891625 171.888874
L 252.471625 172.84351
L 256.935625 173.391566
L 261.399625 173.70156
L 265.305625 173.747235
L 269.211625 173.558847
L 273.117625 173.117782
L 276.465625 172.527585
L 279.813625 171.734745
L 283.161625 170.735588
L 286.509625 169.529249
L 290.415625 167.862877
L 294.321625 165.925713
L 298.227625 163.731549
L 302.133625 161.29956
L 306.597625 158.260383
L 311.619625 154.563353
L 317.757625 149.750311
L 338.403625 133.249374
L 343.425625 129.679169
L 347.331625 127.148469
L 351.237625 124.875285
L 354.585625 123.157706
L 357.933625 121.672853
L 361.281625 120.436103
L 364.629625 119.459412
L 367.977625 118.751042
L 370.767625 118.368949
L 373.557625 118.176609
L 376.347625 118.172319
L 379.695625 118.409951
L 383.043625 118.902383
L 386.391625 119.634875
L 389.739625 120.588494
L 393.645625 121.94968
L 398.109625 123.779955
L 403.131625 126.099509
L 412.617625 130.81073
L 418.755625 133.735464
L 423.219625 135.623429
L 427.125625 137.021303
L 430.473625 137.979054
L 433.263625 138.577895
L 436.053625 138.972958
L 438.843625 139.144568
L 441.633625 139.074738
L 444.423625 138.747395
L 447.213625 138.14859
L 450.003625 137.266691
L 452.793625 136.092552
L 455.583625 134.619671
L 458.373625 132.844312
L 461.163625 130.765616
L 463.953625 128.385668
L 466.743625 125.709552
L 469.533625 122.745367
L 472.881625 118.823932
L 476.229625 114.52861
L 479.577625 109.890128
L 483.483625 104.093678
L 487.947625 97.044176
L 493.527625 87.762868
L 512.499625 55.681576
L 516.963625 48.823
L 520.869625 43.270741
L 524.217625 38.91247
L 527.007625 35.600355
L 529.797625 32.605946
L 532.587625 29.951585
L 535.377625 27.656472
L 537.609625 26.089769
L 539.841625 24.769563
L 542.073625 23.700687
L 544.305625 22.886338
L 546.537625 22.328027
L 548.769625 22.025534
L 551.001625 21.976876
L 553.233625 22.178284
L 555.465625 22.624196
L 557.697625 23.307253
L 559.929625 24.218317
L 562.161625 25.346494
L 564.951625 27.042655
L 567.741625 29.029934
L 570.531625 31.276155
L 573.879625 34.262738
L 577.785625 38.061502
L 583.365625 43.847024
L 591.735625 52.547656
L 593.967625 54.723364
L 593.967625 54.723364
" style="fill:none;stroke:#3b528b;stroke-linecap:square;stroke-width:2.0;"/>
</g>
<g id="line_2">
<path clip-path="url(#pfe85bdbd9d)" d="M 36.525625 205.5572
L 42.663625 205.659042
L 48.801625 205.532155
L 54.939625 205.189482
L 61.635625 204.596776
L 69.447625 203.671446
L 79.491625 202.240416
L 99.579625 199.323171
L 107.391625 198.432222
L 114.645625 197.826499
L 121.341625 197.491074
L 128.037625 197.387618
L 134.733625 197.519026
L 141.429625 197.874759
L 148.683625 198.48626
L 157.053625 199.427427
L 168.213625 200.929276
L 187.185625 203.505313
L 196.113625 204.462981
L 203.925625 205.066295
L 211.179625 205.395248
L 218.433625 205.487055
L 225.687625 205.344025
L 232.941625 204.984004
L 241.311625 204.341116
L 251.913625 203.280532
L 278.697625 200.469446
L 287.625625 199.829921
L 295.437625 199.490578
L 303.249625 199.381931
L 311.061625 199.508923
L 318.873625 199.858178
L 327.801625 200.490106
L 338.961625 201.528336
L 367.419625 204.3121
L 376.347625 204.907697
L 384.717625 205.250484
L 393.087625 205.362467
L 401.457625 205.243226
L 410.385625 204.884014
L 420.429625 204.251727
L 436.053625 203.006996
L 452.793625 201.733906
L 462.837625 201.188833
L 471.765625 200.914054
L 480.693625 200.862914
L 489.621625 201.036719
L 499.107625 201.443651
L 510.825625 202.187332
L 548.769625 204.809639
L 558.813625 205.160583
L 568.299625 205.269418
L 577.785625 205.159363
L 588.387625 204.805834
L 593.967625 204.541565
L 593.967625 204.541565
" style="fill:none;stroke:#21918c;stroke-linecap:square;stroke-width:2.0;"/>
</g>
<g id="line_3">
<path clip-path="url(#pfe85bdbd9d)" d="M 36.525625 185.843305
L 42.663625 186.359054
L 49.359625 187.140255
L 57.171625 188.283023
L 67.773625 190.082583
L 85.071625 193.0331
L 92.883625 194.131165
L 99.579625 194.866245
L 106.275625 195.371349
L 112.413625 195.611822
L 118.551625 195.631509
L 124.689625 195.433606
L 131.385625 194.985817
L 138.639625 194.262963
L 147.009625 193.192322
L 160.401625 191.208366
L 173.235625 189.382908
L 181.047625 188.483777
L 188.301625 187.873277
L 194.997625 187.540186
L 201.135625 187.447537
L 207.273625 187.564033
L 213.969625 187.92376
L 220.665625 188.50705
L 228.477625 189.426701
L 237.963625 190.792704
L 264.747625 194.823085
L 272.559625 195.685665
L 279.255625 196.21434
L 285.951625 196.520941
L 292.647625 196.592691
L 299.343625 196.430315
L 306.039625 196.047893
L 313.293625 195.416315
L 322.221625 194.399347
L 336.729625 192.46605
L 349.005625 190.910612
L 357.375625 190.065669
L 364.629625 189.548112
L 371.325625 189.281276
L 378.021625 189.233996
L 384.717625 189.409958
L 391.413625 189.800057
L 398.667625 190.439375
L 407.037625 191.403483
L 418.755625 193.005305
L 436.611625 195.45022
L 444.981625 196.368898
L 452.235625 196.961316
L 459.489625 197.327578
L 466.185625 197.448072
L 472.881625 197.356786
L 480.135625 197.030259
L 487.947625 196.444972
L 496.875625 195.545387
L 511.383625 193.814113
L 524.775625 192.289663
L 533.703625 191.500269
L 541.515625 191.038892
L 548.769625 190.837604
L 556.023625 190.870432
L 563.277625 191.136275
L 570.531625 191.618429
L 578.901625 192.402353
L 589.503625 193.641676
L 593.967625 194.208734
L 593.967625 194.208734
" style="fill:none;stroke:#5ec962;stroke-linecap:square;stroke-width:2.0;"/>
</g>
<g id="line_4">
<path clip-path="url(#pfe85bdbd9d)" d="M 36.525625 209.968738
L 43.221625 209.353661
L 49.359625 209.011207
L 55.497625 208.894996
L 61.635625 209.007904
L 67.773625 209.341785
L 74.469625 209.935783
L 81.723625 210.807221
L 90.651625 212.113953
L 117.435625 216.203567
L 124.689625 217.000106
L 131.385625 217.51399
L 137.523625 217.771916
L 143.661625 217.812993
L 149.799625 217.635355
L 155.937625 217.247664
L 162.633625 216.607394
L 170.445625 215.622181
L 179.931625 214.187507
L 203.367625 210.539631
L 211.179625 209.610944
L 217.875625 209.027379
L 224.571625 208.672588
L 230.709625 208.563254
L 236.847625 208.663523
L 243.543625 209.003109
L 250.239625 209.56069
L 258.051625 210.439615
L 268.095625 211.816882
L 290.415625 214.974333
L 298.227625 215.819082
L 305.481625 216.377949
L 312.177625 216.667022
L 318.873625 216.721116
L 325.569625 216.537261
L 332.265625 216.12611
L 339.519625 215.451826
L 347.889625 214.436502
L 359.607625 212.755989
L 376.347625 210.358621
L 384.717625 209.390161
L 391.971625 208.765564
L 398.667625 208.401869
L 405.363625 208.261251
L 412.059625 208.34882
L 418.755625 208.656616
L 426.009625 209.214547
L 434.379625 210.095315
L 445.539625 211.523233
L 465.069625 214.051211
L 473.439625 214.888871
L 480.693625 215.402736
L 487.389625 215.66992
L 494.085625 215.722296
L 500.781625 215.556982
L 508.035625 215.143637
L 515.847625 214.457772
L 524.775625 213.435922
L 538.725625 211.572829
L 552.675625 209.78237
L 561.045625 208.923044
L 568.857625 208.34833
L 576.111625 208.048336
L 582.807625 207.986585
L 589.503625 208.13251
L 593.967625 208.340191
L 593.967625 208.340191
" style="fill:none;stroke:#fde725;stroke-linecap:square;stroke-width:2.0;"/>
</g>
<g id="patch_3">
<path d="M 36.525625 301.006875
L 594.525625 301.006875
" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-linejoin:miter;"/>
</g>
<g id="patch_4">
<path d="M 36.525625 301.006875
L 36.525625 13.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 -4
" id="mfeaeec6ca7" style="stroke:#000000;stroke-width:0.5;"/>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mfeaeec6ca7" y="301.006875"/>
</g>
</g>
<g id="text_1">
<!-- 0 -->
<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(32.708125 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="176.025625" xlink:href="#mfeaeec6ca7" y="301.006875"/>
</g>
</g>
<g id="text_2">
<!-- 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(172.208125 314.125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-35"/>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="315.525625" xlink:href="#mfeaeec6ca7" y="301.006875"/>
</g>
</g>
<g id="text_3">
<!-- 10 -->
<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(307.890625 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_4">
<g id="line2d_4">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="455.025625" xlink:href="#mfeaeec6ca7" y="301.006875"/>
</g>
</g>
<g id="text_4">
<!-- 15 -->
<g transform="translate(447.390625 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_5">
<g id="line2d_5">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="594.525625" xlink:href="#mfeaeec6ca7" y="301.006875"/>
</g>
</g>
<g id="text_5">
<!-- 20 -->
<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(586.890625 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_6">
<defs>
<path d="M 0 0
L 4 0
" id="mf0d5103cc2" style="stroke:#000000;stroke-width:0.5;"/>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mf0d5103cc2" y="301.006875"/>
</g>
</g>
<g id="text_6">
<!-- −20 -->
<defs>
<path d="M 10.59375 35.5
L 73.1875 35.5
L 73.1875 27.203125
L 10.59375 27.203125
z
" id="BitstreamVeraSans-Roman-2212"/>
</defs>
<g transform="translate(7.2 304.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-2212"/>
<use x="83.7890625" xlink:href="#BitstreamVeraSans-Roman-32"/>
<use x="147.412109375" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_7">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mf0d5103cc2" y="253.006875"/>
</g>
</g>
<g id="text_7">
<!-- −10 -->
<g transform="translate(7.2 256.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-2212"/>
<use x="83.7890625" xlink:href="#BitstreamVeraSans-Roman-31"/>
<use x="147.412109375" xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_8">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mf0d5103cc2" y="205.006875"/>
</g>
</g>
<g id="text_8">
<!-- 0 -->
<g transform="translate(24.890625 208.318125)scale(0.12 -0.12)">
<use xlink:href="#BitstreamVeraSans-Roman-30"/>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_9">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mf0d5103cc2" y="157.006875"/>
</g>
</g>
<g id="text_9">
<!-- 10 -->
<g transform="translate(17.255625 160.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_5">
<g id="line2d_10">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mf0d5103cc2" y="109.006875"/>
</g>
</g>
<g id="text_10">
<!-- 20 -->
<g transform="translate(17.255625 112.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_11">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mf0d5103cc2" y="61.006875"/>
</g>
</g>
<g id="text_11">
<!-- 30 -->
<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(17.255625 64.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_7">
<g id="line2d_12">
<g>
<use style="stroke:#000000;stroke-width:0.5;" x="36.525625" xlink:href="#mf0d5103cc2" y="13.006875"/>
</g>
</g>
<g id="text_12">
<!-- 40 -->
<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(17.255625 16.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>
</g>
</g>
<defs>
<clipPath id="pfe85bdbd9d">
<rect height="288.0" width="558.0" x="36.525625" y="13.006875"/>
</clipPath>
</defs>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment