My first data visualization with D3.js
A client wanted a chart "that didn't look like the typical one from a template library." That's how I ended up deep in D3 and hand-drawn SVG.
Tag
SVG
Articles about SVG vector graphics.
'%3e%3cg%20id='Izquierda'%20transform='matrix(1.37783,0,0,-1.37783,-155.418,951.131)'%3e%3cg%20class='menor-que'%3e%3cg%20transform='matrix(0.725781,0,0,-0.725781,112.799,690.312)'%3e%3cpath%20d='M5.735,400C5.686,394.648%207.702,389.281%2011.781,385.202L274.846,122.136C282.909,114.074%20296,114.074%20304.062,122.136L333.278,151.352C341.34,159.414%20341.34,172.505%20333.278,180.568L113.846,400L290.412,576.566L441.893,425.647L337.186,643.533L337.066,643.448C336.108,645.323%20334.845,647.081%20333.278,648.648L304.062,677.864C296,685.926%20282.909,685.926%20274.846,677.864L11.781,414.798C7.702,410.719%205.686,405.352%205.735,400Z'%20style='fill:rgb(74,160,93);'/%3e%3c/g%3e%3cg%20id='Punta'%20transform='matrix(0.102791,0.102791,0.102791,-0.102791,374.711,356.622)'%3e%3cpath%20d='M415.248,146.684C415.248,133.051%20404.179,121.982%20390.546,121.982L316.442,121.982C302.809,121.982%20291.741,133.051%20291.741,146.684L291.741,220.788C291.741,234.421%20302.809,245.489%20316.442,245.489L390.546,245.489C404.179,245.489%20415.248,234.421%20415.248,220.788L415.248,146.684Z'%20style='fill:rgb(74,160,93);'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg%20id='Derecha'%20transform='matrix(-1.37783,-1.68735e-16,-1.68735e-16,1.37783,955.418,-151.131)'%3e%3cg%20class='mayor-que'%3e%3cg%20transform='matrix(-0.725781,-8.88825e-17,-8.88825e-17,0.725781,693.424,109.688)'%3e%3cpath%20d='M462.934,156.552C463.892,154.677%20465.155,152.919%20466.722,151.352L495.938,122.136C504,114.074%20517.091,114.074%20525.154,122.136L788.219,385.202C792.298,389.281%20794.314,394.648%20794.265,400C794.314,405.352%20792.298,410.719%20788.219,414.798L525.154,677.864C517.091,685.926%20504,685.926%20495.938,677.864L466.722,648.648C458.66,640.586%20458.66,627.495%20466.722,619.432L686.154,400L509.588,223.434L358.107,374.353L462.814,156.467L462.934,156.552Z'%20style='fill:rgb(74,160,93);'/%3e%3c/g%3e%3cg%20id='Punta1'%20serif:id='Punta'%20transform='matrix(0.102791,0.102791,0.102791,-0.102791,374.711,356.622)'%3e%3cpath%20d='M415.248,146.684C415.248,133.051%20404.179,121.982%20390.546,121.982L316.442,121.982C302.809,121.982%20291.741,133.051%20291.741,146.684L291.741,220.788C291.741,234.421%20302.809,245.489%20316.442,245.489L390.546,245.489C404.179,245.489%20415.248,234.421%20415.248,220.788L415.248,146.684Z'%20style='fill:rgb(74,160,93);'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg%20id='Centro'%20transform='matrix(0.258068,-0.258068,0.258068,0.258068,259.988,443.809)'%3e%3cg%20class='rombo'%3e%3cpath%20d='M415.248,146.684C415.248,133.051%20404.179,121.982%20390.546,121.982L316.442,121.982C302.809,121.982%20291.741,133.051%20291.741,146.684L291.741,220.788C291.741,234.421%20302.809,245.489%20316.442,245.489L390.546,245.489C404.179,245.489%20415.248,234.421%20415.248,220.788L415.248,146.684Z'%20style='fill:rgb(74,160,93);'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e){kind=small}
Japp Articles about SVG vector graphics.
A client wanted a chart "that didn't look like the typical one from a template library." That's how I ended up deep in D3 and hand-drawn SVG.