D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
inspired12
Full window
Github gist
Elections and Bar Graphs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 710.6 201.4" style="enable-background:new 0 0 710.6 201.4;" xml:space="preserve"> <g> <rect id="stripe" x="-0.4" y="0.4" style="fill:#B22234;" width="711" height="28"/> </g> <g> <rect id="stripe_1_" x="-0.4" y="57.4" style="fill:#B22234;" width="711" height="29"/> </g> <g> <rect id="stripe_2_" x="-0.4" y="115.4" style="fill:#B22234;" width="711" height="28"/> </g> <g> <rect id="stripe_3_" x="-0.4" y="172.4" style="fill:#B22234;" width="711" height="29"/> </g> <rect x="-0.4" y="0.4" style="fill:#3C3B6E;" width="285" height="201"/> <g> <polygon style="fill:#FFFFFF;" points="24.3,12.4 21.7,20.4 13.4,20.4 20.1,25.2 17.5,33.1 24.3,28.1 31.1,33 28.5,25.2 35.3,20.4 26.9,20.4 "/> <polygon style="fill:#FFFFFF;" points="71.4,12.4 68.8,20.4 60.5,20.4 67.2,25.2 64.7,33.1 71.4,28.1 78.2,33 75.6,25.2 82.4,20.4 74,20.4 "/> <polygon style="fill:#FFFFFF;" points="118.6,12.4 116,20.4 107.6,20.4 114.4,25.2 111.8,33.1 118.6,28.1 125.3,33 122.7,25.2 129.5,20.4 121.1,20.4 "/> <polygon style="fill:#FFFFFF;" points="165.7,12.4 163.1,20.4 154.7,20.4 161.5,25.2 158.9,33.1 165.7,28.1 172.5,33 169.9,25.2 176.6,20.4 168.3,20.4 "/> <polygon style="fill:#FFFFFF;" points="212.8,12.4 210.2,20.4 201.9,20.4 208.6,25.2 206,33.1 212.8,28.1 219.6,33 217,25.2 223.8,20.4 215.4,20.4 "/> <polygon style="fill:#FFFFFF;" points="255.7,25.2 253.2,33.1 259.9,28.1 266.7,33 264.1,25.2 270.9,20.4 262.5,20.4 259.9,12.4 257.3,20.4 249,20.4 "/> <polygon style="fill:#FFFFFF;" points="50.5,40.4 47.9,32.4 45.3,40.4 36.9,40.4 43.7,45.3 41.1,53.2 47.9,48.3 54.6,53.2 52.1,45.3 58.8,40.4 "/> <polygon style="fill:#FFFFFF;" points="97.6,40.4 95,32.4 92.4,40.4 84,40.4 90.8,45.3 88.2,53.2 95,48.3 101.8,53.2 99.2,45.3 106,40.4 "/> <polygon style="fill:#FFFFFF;" points="144.7,40.4 142.1,32.4 139.5,40.4 131.2,40.4 137.9,45.3 135.3,53.2 142.1,48.3 148.9,53.2 146.3,45.3 153.1,40.4 "/> <polygon style="fill:#FFFFFF;" points="191.8,40.4 189.2,32.4 186.7,40.4 178.3,40.4 185.1,45.3 182.5,53.2 189.2,48.3 196,53.2 193.4,45.3 200.2,40.4 "/> <polygon style="fill:#FFFFFF;" points="239,40.4 236.4,32.4 233.8,40.4 225.4,40.4 232.2,45.3 229.6,53.2 236.4,48.3 243.1,53.2 240.6,45.3 247.3,40.4 "/> <g> <polygon style="fill:#FFFFFF;" points="24.3,57.4 21.7,65.4 13.4,65.4 20.1,70.4 17.5,78.3 24.3,73.4 31.1,78.4 28.5,70.4 35.3,65.4 26.9,65.4 "/> <polygon style="fill:#FFFFFF;" points="71.4,57.4 68.8,65.4 60.5,65.4 67.2,70.4 64.7,78.3 71.4,73.4 78.2,78.4 75.6,70.4 82.4,65.4 74,65.4 "/> <polygon style="fill:#FFFFFF;" points="118.6,57.4 116,65.4 107.6,65.4 114.4,70.4 111.8,78.3 118.6,73.4 125.3,78.4 122.7,70.4 129.5,65.4 121.1,65.4 "/> <polygon style="fill:#FFFFFF;" points="165.7,57.4 163.1,65.4 154.7,65.4 161.5,70.4 158.9,78.3 165.7,73.4 172.5,78.4 169.9,70.4 176.6,65.4 168.3,65.4 "/> <polygon style="fill:#FFFFFF;" points="212.8,57.4 210.2,65.4 201.9,65.4 208.6,70.4 206,78.3 212.8,73.4 219.6,78.4 217,70.4 223.8,65.4 215.4,65.4 "/> <polygon style="fill:#FFFFFF;" points="255.7,70.4 253.2,78.3 259.9,73.4 266.7,78.4 264.1,70.4 270.9,65.4 262.5,65.4 259.9,57.4 257.3,65.4 249,65.4 "/> <polygon style="fill:#FFFFFF;" points="50.5,85.4 47.9,77.4 45.3,85.4 36.9,85.4 43.7,90.5 41.1,98.5 47.9,93.6 54.6,98.6 52.1,90.4 58.8,85.4 "/> <polygon style="fill:#FFFFFF;" points="97.6,85.4 95,77.4 92.4,85.4 84,85.4 90.8,90.5 88.2,98.5 95,93.6 101.8,98.6 99.2,90.4 106,85.4 "/> <polygon style="fill:#FFFFFF;" points="144.7,85.4 142.1,77.4 139.5,85.4 131.2,85.4 137.9,90.5 135.3,98.5 142.1,93.6 148.9,98.6 146.3,90.4 153.1,85.4 "/> <polygon style="fill:#FFFFFF;" points="191.8,85.4 189.2,77.4 186.7,85.4 178.3,85.4 185.1,90.5 182.5,98.5 189.2,93.6 196,98.6 193.4,90.4 200.2,85.4 "/> <polygon style="fill:#FFFFFF;" points="239,85.4 236.4,77.4 233.8,85.4 225.4,85.4 232.2,90.5 229.6,98.5 236.4,93.6 243.1,98.6 240.6,90.4 247.3,85.4 "/> </g> <g> <polygon style="fill:#FFFFFF;" points="24.3,100.4 21.7,108.4 13.4,108.4 20.1,113.4 17.5,121.4 24.3,116.5 31.1,121.5 28.5,113.4 35.3,108.4 26.9,108.4 "/> <polygon style="fill:#FFFFFF;" points="71.4,100.4 68.8,108.4 60.5,108.4 67.2,113.4 64.7,121.4 71.4,116.5 78.2,121.5 75.6,113.4 82.4,108.4 74,108.4 "/> <polygon style="fill:#FFFFFF;" points="118.6,100.4 116,108.4 107.6,108.4 114.4,113.4 111.8,121.4 118.6,116.5 125.3,121.5 122.7,113.4 129.5,108.4 121.1,108.4 "/> <polygon style="fill:#FFFFFF;" points="165.7,100.4 163.1,108.4 154.7,108.4 161.5,113.4 158.9,121.4 165.7,116.5 172.5,121.5 169.9,113.4 176.6,108.4 168.3,108.4 "/> <polygon style="fill:#FFFFFF;" points="212.8,100.4 210.2,108.4 201.9,108.4 208.6,113.4 206,121.4 212.8,116.5 219.6,121.5 217,113.4 223.8,108.4 215.4,108.4 "/> <polygon style="fill:#FFFFFF;" points="255.7,113.4 253.2,121.4 259.9,116.5 266.7,121.5 264.1,113.4 270.9,108.4 262.5,108.4 259.9,100.4 257.3,108.4 249,108.4 "/> <polygon style="fill:#FFFFFF;" points="50.5,128.4 47.9,120.4 45.3,128.4 36.9,128.4 43.7,133.5 41.1,141.6 47.9,136.7 54.6,141.7 52.1,133.5 58.8,128.4 "/> <polygon style="fill:#FFFFFF;" points="97.6,128.4 95,120.4 92.4,128.4 84,128.4 90.8,133.5 88.2,141.6 95,136.7 101.8,141.7 99.2,133.5 106,128.4 "/> <polygon style="fill:#FFFFFF;" points="144.7,128.4 142.1,120.4 139.5,128.4 131.2,128.4 137.9,133.5 135.3,141.6 142.1,136.7 148.9,141.7 146.3,133.5 153.1,128.4 "/> <polygon style="fill:#FFFFFF;" points="191.8,128.4 189.2,120.4 186.7,128.4 178.3,128.4 185.1,133.5 182.5,141.6 189.2,136.7 196,141.7 193.4,133.5 200.2,128.4 "/> <polygon style="fill:#FFFFFF;" points="239,128.4 236.4,120.4 233.8,128.4 225.4,128.4 232.2,133.5 229.6,141.6 236.4,136.7 243.1,141.7 240.6,133.5 247.3,128.4 "/> <g> <polygon style="fill:#FFFFFF;" points="24.3,146.4 21.7,154.4 13.4,154.4 20.1,159.1 17.5,167 24.3,162 31.1,166.9 28.5,159.1 35.3,154.4 26.9,154.4 "/> <polygon style="fill:#FFFFFF;" points="71.4,146.4 68.8,154.4 60.5,154.4 67.2,159.1 64.7,167 71.4,162 78.2,166.9 75.6,159.1 82.4,154.4 74,154.4 "/> <polygon style="fill:#FFFFFF;" points="118.6,146.4 116,154.4 107.6,154.4 114.4,159.1 111.8,167 118.6,162 125.3,166.9 122.7,159.1 129.5,154.4 121.1,154.4 "/> <polygon style="fill:#FFFFFF;" points="165.7,146.4 163.1,154.4 154.7,154.4 161.5,159.1 158.9,167 165.7,162 172.5,166.9 169.9,159.1 176.6,154.4 168.3,154.4 "/> <polygon style="fill:#FFFFFF;" points="212.8,146.4 210.2,154.4 201.9,154.4 208.6,159.1 206,167 212.8,162 219.6,166.9 217,159.1 223.8,154.4 215.4,154.4 "/> <polygon style="fill:#FFFFFF;" points="255.7,159.1 253.2,167 259.9,162 266.7,166.9 264.1,159.1 270.9,154.4 262.5,154.4 259.9,146.4 257.3,154.4 249,154.4 "/> <polygon style="fill:#FFFFFF;" points="50.5,174.4 47.9,166.4 45.3,174.4 36.9,174.4 43.7,179.2 41.1,187.1 47.9,182.2 54.6,187.1 52.1,179.2 58.8,174.4 "/> <polygon style="fill:#FFFFFF;" points="97.6,174.4 95,166.4 92.4,174.4 84,174.4 90.8,179.2 88.2,187.1 95,182.2 101.8,187.1 99.2,179.2 106,174.4 "/> <polygon style="fill:#FFFFFF;" points="144.7,174.4 142.1,166.4 139.5,174.4 131.2,174.4 137.9,179.2 135.3,187.1 142.1,182.2 148.9,187.1 146.3,179.2 153.1,174.4 "/> <polygon style="fill:#FFFFFF;" points="191.8,174.4 189.2,166.4 186.7,174.4 178.3,174.4 185.1,179.2 182.5,187.1 189.2,182.2 196,187.1 193.4,179.2 200.2,174.4 "/> <polygon style="fill:#FFFFFF;" points="239,174.4 236.4,166.4 233.8,174.4 225.4,174.4 232.2,179.2 229.6,187.1 236.4,182.2 243.1,187.1 240.6,179.2 247.3,174.4 "/> </g> </g> </g> <g> <path d="M306.5,34.2h2.6v10.5c0,1.4-0.1,2.5-0.3,3.2s-0.5,1.3-0.8,1.8c-0.3,0.5-0.7,0.9-1.1,1.3c-1.5,1.3-3.4,1.9-5.7,1.9 c-2.4,0-4.3-0.6-5.8-1.9c-0.4-0.4-0.8-0.8-1.1-1.3c-0.3-0.5-0.6-1.1-0.8-1.8c-0.2-0.7-0.3-1.8-0.3-3.3V34.2h2.6v10.5 c0,1.7,0.2,2.9,0.6,3.6s1,1.2,1.8,1.6c0.8,0.4,1.8,0.6,2.9,0.6c1.6,0,2.8-0.4,3.8-1.2c0.5-0.4,0.9-1,1.1-1.6s0.3-1.6,0.3-3.1V34.2z "/> <path d="M327.4,34.2h2.5v18.4h-2.3l-12.3-14.2v14.2h-2.5V34.2h2.1l12.4,14.3V34.2z"/> <path d="M333.9,34.2h2.6v18.4h-2.6V34.2z"/> <path d="M339,34.2h15.4v2.3H348v16.1h-2.6V36.6H339V34.2z"/> <path d="M356.9,34.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V34.2z"/> <path d="M370.4,52.6V34.2h6.2c2.5,0,4.5,0.4,5.9,1.1c1.5,0.8,2.6,1.9,3.5,3.3s1.3,3,1.3,4.8c0,1.2-0.2,2.4-0.7,3.5s-1.2,2.1-2,3 c-0.9,0.9-1.9,1.5-3.1,2c-0.7,0.3-1.3,0.5-1.9,0.5c-0.6,0.1-1.7,0.1-3.3,0.1H370.4z M376.4,36.6h-3.3v13.7h3.4 c1.3,0,2.3-0.1,3.1-0.3c0.7-0.2,1.3-0.4,1.8-0.7c0.5-0.3,0.9-0.6,1.3-1c1.3-1.3,2-3,2-5c0-2-0.7-3.6-2-4.8 c-0.5-0.5-1.1-0.8-1.7-1.1c-0.6-0.3-1.2-0.5-1.8-0.6S377.6,36.6,376.4,36.6z"/> <path d="M402.7,44.9l-2-1.2c-1.3-0.8-2.2-1.5-2.7-2.3c-0.5-0.7-0.8-1.6-0.8-2.6c0-1.5,0.5-2.6,1.5-3.5c1-0.9,2.3-1.4,3.9-1.4 c1.5,0,2.9,0.4,4.2,1.3v3c-1.3-1.3-2.8-1.9-4.3-1.9c-0.9,0-1.6,0.2-2.1,0.6c-0.6,0.4-0.8,0.9-0.8,1.5c0,0.6,0.2,1.1,0.6,1.5 c0.4,0.5,1.1,1,2,1.5l2,1.2c2.2,1.3,3.4,3,3.4,5.1c0,1.5-0.5,2.7-1.5,3.6c-1,0.9-2.3,1.4-3.9,1.4c-1.8,0-3.5-0.6-5-1.7v-3.3 c1.4,1.8,3.1,2.7,4.9,2.7c0.8,0,1.5-0.2,2.1-0.7c0.5-0.5,0.8-1,0.8-1.7C405.2,47,404.3,45.9,402.7,44.9z"/> <path d="M409,34.2h15.4v2.3h-6.4v16.1h-2.6V36.6H409V34.2z"/> <path d="M430,34.1h1.9l8.3,18.5h-2.7l-2.5-5.5h-7.9l-2.3,5.5h-2.7L430,34.1z M433.9,44.9l-3-6.7l-2.8,6.7H433.9z"/> <path d="M437.9,34.2h15.4v2.3h-6.4v16.1h-2.6V36.6h-6.3V34.2z"/> <path d="M455.8,34.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V34.2z"/> <path d="M473.8,44.9l-2-1.2c-1.3-0.8-2.2-1.5-2.7-2.3c-0.5-0.7-0.8-1.6-0.8-2.6c0-1.5,0.5-2.6,1.5-3.5c1-0.9,2.3-1.4,3.9-1.4 c1.5,0,2.9,0.4,4.2,1.3v3c-1.3-1.3-2.8-1.9-4.3-1.9c-0.9,0-1.6,0.2-2.1,0.6c-0.6,0.4-0.8,0.9-0.8,1.5c0,0.6,0.2,1.1,0.6,1.5 c0.4,0.5,1.1,1,2,1.5l2,1.2c2.2,1.3,3.4,3,3.4,5.1c0,1.5-0.5,2.7-1.5,3.6c-1,0.9-2.3,1.4-3.9,1.4c-1.8,0-3.5-0.6-5-1.7v-3.3 c1.4,1.8,3.1,2.7,4.9,2.7c0.8,0,1.5-0.2,2.1-0.7c0.5-0.5,0.8-1,0.8-1.7C476.2,47,475.4,45.9,473.8,44.9z"/> <path d="M498.2,34c2.8,0,5.2,0.9,7.1,2.7c1.9,1.8,2.8,4.1,2.8,6.8s-1,5-2.9,6.7c-1.9,1.8-4.3,2.7-7.2,2.7c-2.8,0-5.1-0.9-6.9-2.7 c-1.8-1.8-2.8-4-2.8-6.7c0-2.8,0.9-5,2.8-6.8S495.3,34,498.2,34z M498.3,36.5c-2.1,0-3.8,0.7-5.2,2c-1.4,1.3-2,3-2,5 c0,2,0.7,3.6,2,5s3.1,2,5.1,2c2.1,0,3.8-0.7,5.1-2s2.1-3,2.1-5c0-2-0.7-3.6-2.1-4.9C502,37.1,500.3,36.5,498.3,36.5z"/> <path d="M511.4,34.2h9.8v2.3H514v5.1h7.2v2.3H514v8.6h-2.6V34.2z"/> <path d="M534.7,34.1h1.9l8.3,18.5h-2.7l-2.5-5.5h-7.9l-2.3,5.5h-2.7L534.7,34.1z M538.6,44.9l-3-6.7l-2.8,6.7H538.6z"/> <path d="M561.5,34.2h2.5v18.4h-2.7V38.3l-5.7,7.1h-0.5l-5.7-7.1v14.3h-2.6V34.2h2.5l6.1,7.6L561.5,34.2z"/> <path d="M567.9,34.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V34.2z"/> <path d="M581.5,52.7V34.2h4.6c1.9,0,3.3,0.5,4.4,1.4c1.1,0.9,1.6,2.2,1.6,3.7c0,1.1-0.3,2-0.8,2.8s-1.3,1.4-2.3,1.8 c0.6,0.4,1.2,0.9,1.7,1.6s1.4,1.8,2.4,3.5c0.6,1,1.2,1.8,1.5,2.4l1,1.3h-3.1l-0.8-1.2c0,0-0.1-0.1-0.2-0.2l-0.5-0.7l-0.8-1.3 l-0.9-1.4c-0.5-0.8-1-1.4-1.5-1.8c-0.5-0.4-0.9-0.8-1.2-1c-0.4-0.2-1-0.3-1.8-0.3h-0.7v8H581.5z M584.9,36.5h-0.8v5.8h1 c1.3,0,2.3-0.1,2.7-0.3c0.5-0.2,0.9-0.6,1.2-1c0.3-0.5,0.4-1,0.4-1.6c0-0.6-0.2-1.1-0.5-1.6c-0.3-0.5-0.7-0.8-1.3-1 C587.1,36.6,586.2,36.5,584.9,36.5z"/> <path d="M597.7,34.2h2.6v18.4h-2.6V34.2z"/> <path d="M620.3,48.4v2.9c-1.9,1.1-4.2,1.6-6.7,1.6c-2.1,0-3.8-0.4-5.2-1.2c-1.4-0.8-2.6-2-3.4-3.4s-1.3-3-1.3-4.7 c0-2.7,1-4.9,2.9-6.8c1.9-1.8,4.3-2.7,7.1-2.7c1.9,0,4.1,0.5,6.4,1.5v2.8c-2.2-1.2-4.3-1.8-6.3-1.8c-2.1,0-3.9,0.7-5.3,2 c-1.4,1.3-2.1,3-2.1,5c0,2,0.7,3.7,2.1,5s3.1,2,5.3,2C616,50.4,618.2,49.8,620.3,48.4z"/> <path d="M630.1,34.1h1.9l8.3,18.5h-2.7l-2.5-5.5h-7.9l-2.3,5.5h-2.7L630.1,34.1z M634,44.9l-3-6.7l-2.8,6.7H634z"/> <path d="M297.2,108.1h7v2.5h-11.7v-0.2l1.1-1.3c1.7-2.1,3.1-4,4.1-5.5s1.7-2.6,2-3.4s0.5-1.5,0.5-2.3c0-1-0.3-1.9-0.9-2.5 s-1.4-0.9-2.3-0.9c-0.7,0-1.5,0.2-2.2,0.7c-0.7,0.4-1.4,1-1.9,1.8v-3.3c1.4-1.2,2.9-1.8,4.4-1.8c1.6,0,2.9,0.5,4,1.6 c1,1.1,1.6,2.4,1.6,4.1c0,0.7-0.1,1.5-0.4,2.4c-0.3,0.8-0.7,1.8-1.4,2.9c-0.7,1.1-1.8,2.6-3.4,4.5L297.2,108.1z"/> <path d="M312,92c1.7,0,3.1,0.9,4.2,2.7s1.7,4,1.7,6.7c0,2.8-0.6,5.1-1.7,6.8s-2.5,2.6-4.3,2.6c-1.8,0-3.2-0.9-4.3-2.6 s-1.6-4-1.6-6.8c0-2.8,0.6-5.1,1.7-6.8C308.8,92.9,310.2,92,312,92z M312,94.5h-0.1c-1,0-1.8,0.6-2.4,1.9c-0.6,1.2-0.9,2.9-0.9,5.1 c0,2.2,0.3,3.9,0.9,5.1s1.4,1.9,2.4,1.9s1.8-0.6,2.4-1.9s0.9-2.9,0.9-5c0-2.1-0.3-3.8-0.9-5.1C313.7,95.1,313,94.5,312,94.5z"/> <path d="M324.1,92.2h2.6v18.4h-2.6V92.2z"/> <path d="M340.4,92.2l0.3-0.2l1.6,2c-1.4,0.9-2.6,1.9-3.5,3c-0.9,1.1-1.6,2.3-2.1,3.8c1-0.5,1.9-0.8,2.9-0.8c1.5,0,2.7,0.5,3.7,1.5 s1.5,2.3,1.5,3.8c0,1.5-0.5,2.8-1.6,3.9s-2.4,1.6-3.9,1.6c-1.7,0-3.1-0.6-4.2-1.8c-1.1-1.2-1.6-2.8-1.6-4.8c0-1.5,0.3-2.9,0.8-4.4 c0.5-1.5,1.3-2.8,2.4-4.1C337.6,94.5,338.9,93.3,340.4,92.2z M336.1,103.5c-0.1,0.4-0.1,0.9-0.1,1.4c0,1,0.3,1.9,0.9,2.6 s1.4,1,2.3,1c0.8,0,1.5-0.3,2.1-0.9s0.8-1.3,0.8-2.2c0-0.9-0.3-1.6-0.9-2.2c-0.6-0.5-1.4-0.8-2.3-0.8c-0.5,0-0.9,0.1-1.3,0.2 C337.2,102.8,336.7,103.1,336.1,103.5z"/> <path d="M355,110.7V92.2h5.8c1.8,0,3.2,0.5,4.2,1.4s1.6,2.2,1.6,3.8c0,1.1-0.3,2-0.8,2.8s-1.3,1.4-2.2,1.8c-0.9,0.4-2.3,0.6-4,0.6 h-2v8H355z M360.4,94.6h-2.7v5.8h2.9c1.1,0,1.9-0.3,2.5-0.8s0.9-1.2,0.9-2.2C363.9,95.5,362.7,94.6,360.4,94.6z"/> <path d="M369,110.7V92.2h4.6c1.9,0,3.3,0.5,4.4,1.4c1.1,0.9,1.6,2.2,1.6,3.7c0,1.1-0.3,2-0.8,2.8s-1.3,1.4-2.3,1.8 c0.6,0.4,1.2,0.9,1.7,1.6s1.4,1.8,2.4,3.5c0.6,1,1.2,1.8,1.5,2.4l1,1.3h-3.1l-0.8-1.2c0,0-0.1-0.1-0.2-0.2l-0.5-0.7l-0.8-1.3 l-0.9-1.4c-0.5-0.8-1-1.4-1.5-1.8c-0.5-0.4-0.9-0.8-1.2-1c-0.4-0.2-1-0.3-1.8-0.3h-0.7v8H369z M372.4,94.5h-0.8v5.8h1 c1.3,0,2.3-0.1,2.7-0.3c0.5-0.2,0.9-0.6,1.2-1c0.3-0.5,0.4-1,0.4-1.6c0-0.6-0.2-1.1-0.5-1.6s-0.7-0.8-1.3-1 C374.7,94.6,373.7,94.5,372.4,94.5z"/> <path d="M385.2,92.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V92.2z"/> <path d="M403.3,102.9l-2-1.2c-1.3-0.8-2.2-1.5-2.7-2.3c-0.5-0.7-0.8-1.6-0.8-2.6c0-1.5,0.5-2.6,1.5-3.5c1-0.9,2.3-1.4,3.9-1.4 c1.5,0,2.9,0.4,4.2,1.3v3c-1.3-1.3-2.8-1.9-4.3-1.9c-0.9,0-1.6,0.2-2.1,0.6c-0.6,0.4-0.8,0.9-0.8,1.5c0,0.6,0.2,1.1,0.6,1.5 c0.4,0.5,1.1,1,2,1.5l2,1.2c2.2,1.3,3.4,3,3.4,5.1c0,1.5-0.5,2.7-1.5,3.6c-1,0.9-2.3,1.4-3.9,1.4c-1.8,0-3.5-0.6-5-1.7v-3.3 c1.4,1.8,3.1,2.7,4.9,2.7c0.8,0,1.5-0.2,2.1-0.7c0.5-0.5,0.8-1,0.8-1.7C405.7,105,404.9,103.9,403.3,102.9z"/> <path d="M411.1,92.2h2.6v18.4h-2.6V92.2z"/> <path d="M417.9,110.6V92.2h6.2c2.5,0,4.5,0.4,5.9,1.1c1.5,0.8,2.6,1.9,3.5,3.3s1.3,3,1.3,4.8c0,1.2-0.2,2.4-0.7,3.5s-1.2,2.1-2,3 c-0.9,0.9-1.9,1.5-3.1,2c-0.7,0.3-1.3,0.5-1.9,0.5c-0.6,0.1-1.7,0.1-3.3,0.1H417.9z M423.8,94.6h-3.3v13.7h3.4 c1.3,0,2.3-0.1,3.1-0.3c0.7-0.2,1.3-0.4,1.8-0.7c0.5-0.3,0.9-0.6,1.3-1c1.3-1.3,2-3,2-5c0-2-0.7-3.6-2-4.8 c-0.5-0.5-1.1-0.8-1.7-1.1c-0.6-0.3-1.2-0.5-1.8-0.6S425.1,94.6,423.8,94.6z"/> <path d="M438.1,92.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V92.2z"/> <path d="M466.2,92.2h2.5v18.4h-2.3l-12.3-14.2v14.2h-2.5V92.2h2.1l12.4,14.3V92.2z"/> <path d="M471.1,92.2h15.4v2.3h-6.4v16.1h-2.6V94.6h-6.3V92.2z"/> <path d="M489,92.2h2.6v18.4H489V92.2z"/> <path d="M501.6,92.1h1.9l8.3,18.5H509l-2.5-5.5h-7.9l-2.3,5.5h-2.7L501.6,92.1z M505.5,102.9l-3-6.7l-2.8,6.7H505.5z"/> <path d="M513.7,92.2h2.6v16h8.3v2.4h-10.9V92.2z"/> <path d="M550.4,106.4v2.9c-1.9,1.1-4.2,1.6-6.7,1.6c-2.1,0-3.8-0.4-5.2-1.2c-1.4-0.8-2.6-2-3.4-3.4s-1.3-3-1.3-4.7 c0-2.7,1-4.9,2.9-6.8c1.9-1.8,4.3-2.7,7.1-2.7c1.9,0,4.1,0.5,6.4,1.5v2.8c-2.2-1.2-4.3-1.8-6.3-1.8c-2.1,0-3.9,0.7-5.3,2 c-1.4,1.3-2.1,3-2.1,5c0,2,0.7,3.7,2.1,5s3.1,2,5.3,2C546.1,108.4,548.2,107.8,550.4,106.4z"/> <path d="M560.2,92.1h1.9l8.3,18.5h-2.7l-2.5-5.5h-7.9l-2.3,5.5h-2.7L560.2,92.1z M564,102.9l-3-6.7l-2.8,6.7H564z"/> <path d="M586.9,92.2h2.5v18.4h-2.3l-12.3-14.2v14.2h-2.5V92.2h2.1l12.4,14.3V92.2z"/> <path d="M593.4,110.6V92.2h6.2c2.5,0,4.5,0.4,5.9,1.1c1.5,0.8,2.6,1.9,3.5,3.3s1.3,3,1.3,4.8c0,1.2-0.2,2.4-0.7,3.5s-1.2,2.1-2,3 c-0.9,0.9-1.9,1.5-3.1,2c-0.7,0.3-1.3,0.5-1.9,0.5c-0.6,0.1-1.7,0.1-3.3,0.1H593.4z M599.3,94.6H596v13.7h3.4 c1.3,0,2.3-0.1,3.1-0.3c0.7-0.2,1.3-0.4,1.8-0.7c0.5-0.3,0.9-0.6,1.3-1c1.3-1.3,2-3,2-5c0-2-0.7-3.6-2-4.8 c-0.5-0.5-1.1-0.8-1.7-1.1c-0.6-0.3-1.2-0.5-1.8-0.6S600.6,94.6,599.3,94.6z"/> <path d="M613.6,92.2h2.6v18.4h-2.6V92.2z"/> <path d="M620.4,110.6V92.2h6.2c2.5,0,4.5,0.4,5.9,1.1c1.5,0.8,2.6,1.9,3.5,3.3s1.3,3,1.3,4.8c0,1.2-0.2,2.4-0.7,3.5s-1.2,2.1-2,3 c-0.9,0.9-1.9,1.5-3.1,2c-0.7,0.3-1.3,0.5-1.9,0.5c-0.6,0.1-1.7,0.1-3.3,0.1H620.4z M626.3,94.6H623v13.7h3.4 c1.3,0,2.3-0.1,3.1-0.3c0.7-0.2,1.3-0.4,1.8-0.7c0.5-0.3,0.9-0.6,1.3-1c1.3-1.3,2-3,2-5c0-2-0.7-3.6-2-4.8 c-0.5-0.5-1.1-0.8-1.7-1.1c-0.6-0.3-1.2-0.5-1.8-0.6S627.6,94.6,626.3,94.6z"/> <path d="M645,92.1h1.9l8.3,18.5h-2.7l-2.5-5.5h-7.9l-2.3,5.5h-2.7L645,92.1z M648.9,102.9l-3-6.7l-2.8,6.7H648.9z"/> <path d="M652.9,92.2h15.4v2.3h-6.4v16.1h-2.6V94.6h-6.3V92.2z"/> <path d="M670.7,92.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V92.2z"/> <path d="M688.8,102.9l-2-1.2c-1.3-0.8-2.2-1.5-2.7-2.3c-0.5-0.7-0.8-1.6-0.8-2.6c0-1.5,0.5-2.6,1.5-3.5c1-0.9,2.3-1.4,3.9-1.4 c1.5,0,2.9,0.4,4.2,1.3v3c-1.3-1.3-2.8-1.9-4.3-1.9c-0.9,0-1.6,0.2-2.1,0.6c-0.6,0.4-0.8,0.9-0.8,1.5c0,0.6,0.2,1.1,0.6,1.5 c0.4,0.5,1.1,1,2,1.5l2,1.2c2.2,1.3,3.4,3,3.4,5.1c0,1.5-0.5,2.7-1.5,3.6c-1,0.9-2.3,1.4-3.9,1.4c-1.8,0-3.5-0.6-5-1.7v-3.3 c1.4,1.8,3.1,2.7,4.9,2.7c0.8,0,1.5-0.2,2.1-0.7c0.5-0.5,0.8-1,0.8-1.7C691.2,105,690.4,103.9,688.8,102.9z"/> <path d="M298.2,160.9l-2-1.2c-1.3-0.8-2.2-1.5-2.7-2.3c-0.5-0.7-0.8-1.6-0.8-2.6c0-1.5,0.5-2.6,1.5-3.5c1-0.9,2.3-1.4,3.9-1.4 c1.5,0,2.9,0.4,4.2,1.3v3c-1.3-1.3-2.8-1.9-4.3-1.9c-0.9,0-1.6,0.2-2.1,0.6s-0.8,0.9-0.8,1.5c0,0.6,0.2,1.1,0.6,1.5s1.1,1,2,1.5 l2,1.2c2.2,1.3,3.4,3,3.4,5.1c0,1.5-0.5,2.7-1.5,3.6c-1,0.9-2.3,1.4-3.9,1.4c-1.8,0-3.5-0.6-5-1.7v-3.3c1.4,1.8,3.1,2.7,4.9,2.7 c0.8,0,1.5-0.2,2.1-0.7s0.8-1,0.8-1.7C300.6,163,299.8,161.9,298.2,160.9z"/> <path d="M306,150.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3H306V150.2z"/> <path d="M325.4,150.1h1.9l8.3,18.5h-2.7l-2.5-5.5h-7.9l-2.3,5.5h-2.7L325.4,150.1z M329.3,160.9l-3-6.7l-2.8,6.7H329.3z"/> <path d="M337.6,168.7v-18.4h4.6c1.9,0,3.3,0.5,4.4,1.4c1.1,0.9,1.6,2.2,1.6,3.7c0,1.1-0.3,2-0.8,2.8c-0.5,0.8-1.3,1.4-2.3,1.8 c0.6,0.4,1.2,0.9,1.7,1.6s1.4,1.8,2.4,3.5c0.6,1,1.2,1.8,1.5,2.4l1,1.3h-3.1l-0.8-1.2c0,0-0.1-0.1-0.2-0.2l-0.5-0.7l-0.8-1.3 l-0.9-1.4c-0.5-0.8-1-1.4-1.5-1.8s-0.9-0.8-1.2-1s-1-0.3-1.8-0.3h-0.7v8H337.6z M341,152.5h-0.8v5.8h1c1.3,0,2.3-0.1,2.7-0.3 c0.5-0.2,0.9-0.6,1.2-1c0.3-0.5,0.4-1,0.4-1.6c0-0.6-0.2-1.1-0.5-1.6c-0.3-0.5-0.7-0.8-1.3-1C343.3,152.6,342.3,152.5,341,152.5z" /> <path d="M369.7,164.4v2.9c-1.9,1.1-4.2,1.6-6.7,1.6c-2.1,0-3.8-0.4-5.2-1.2s-2.6-2-3.4-3.4c-0.8-1.4-1.3-3-1.3-4.7 c0-2.7,1-4.9,2.9-6.8c1.9-1.8,4.3-2.7,7.1-2.7c1.9,0,4.1,0.5,6.4,1.5v2.8c-2.2-1.2-4.3-1.8-6.3-1.8c-2.1,0-3.9,0.7-5.3,2 c-1.4,1.3-2.1,3-2.1,5c0,2,0.7,3.7,2.1,5s3.1,2,5.3,2C365.4,166.4,367.6,165.8,369.7,164.4z"/> <path d="M385.9,150.2h2.6v18.4h-2.6v-8h-10.3v8H373v-18.4h2.6v8h10.3V150.2z"/> <path d="M400.1,150.2h10.4v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V150.2z"/> <path d="M428.3,150.2h2.5v18.4h-2.3l-12.3-14.2v14.2h-2.5v-18.4h2.1l12.4,14.3V150.2z"/> <path d="M444.7,159.6h6.2v7.8c-2.3,1-4.5,1.5-6.8,1.5c-3,0-5.5-0.9-7.3-2.7c-1.8-1.8-2.7-4-2.7-6.6c0-2.8,0.9-5,2.8-6.9 s4.3-2.7,7.1-2.7c1,0,2,0.1,3,0.3c0.9,0.2,2.1,0.6,3.5,1.2v2.7c-2.2-1.3-4.4-1.9-6.5-1.9c-2,0-3.7,0.7-5.1,2.1s-2.1,3.1-2.1,5 c0,2.1,0.7,3.8,2.1,5.1c1.4,1.3,3.2,2,5.3,2c1.1,0,2.3-0.2,3.8-0.7l0.3-0.1v-3.8h-3.5V159.6z"/> <path d="M454.7,150.2h2.6v18.4h-2.6V150.2z"/> <path d="M476.1,150.2h2.5v18.4h-2.3L464,154.5v14.2h-2.5v-18.4h2.1l12.4,14.3V150.2z"/> <path d="M482.5,150.2H493v2.3h-7.8v5.6h7.5v2.4h-7.5v5.7h8.1v2.3h-10.7V150.2z"/> <path d="M503.4,168.7v-18.4h5.8c1.8,0,3.2,0.5,4.2,1.4c1,0.9,1.6,2.2,1.6,3.8c0,1.1-0.3,2-0.8,2.8c-0.5,0.8-1.3,1.4-2.2,1.8 c-0.9,0.4-2.3,0.6-4,0.6h-2v8H503.4z M508.8,152.6H506v5.8h2.9c1.1,0,1.9-0.3,2.5-0.8c0.6-0.5,0.9-1.2,0.9-2.2 C512.3,153.5,511.1,152.6,508.8,152.6z"/> <path d="M526.3,150c2.8,0,5.2,0.9,7.1,2.7c1.9,1.8,2.8,4.1,2.8,6.8s-1,5-2.9,6.7c-1.9,1.8-4.3,2.7-7.2,2.7c-2.8,0-5.1-0.9-6.9-2.7 c-1.8-1.8-2.8-4-2.8-6.7c0-2.8,0.9-5,2.8-6.8S523.5,150,526.3,150z M526.5,152.5c-2.1,0-3.8,0.7-5.2,2c-1.4,1.3-2,3-2,5 c0,2,0.7,3.6,2,5s3.1,2,5.1,2c2.1,0,3.8-0.7,5.1-2c1.4-1.3,2.1-3,2.1-5c0-2-0.7-3.6-2.1-4.9C530.1,153.1,528.5,152.5,526.5,152.5z" /> <path d="M539.4,168.7v-18.4h5.8c1.8,0,3.2,0.5,4.2,1.4c1,0.9,1.6,2.2,1.6,3.8c0,1.1-0.3,2-0.8,2.8c-0.5,0.8-1.3,1.4-2.2,1.8 c-0.9,0.4-2.3,0.6-4,0.6h-2v8H539.4z M544.8,152.6H542v5.8h2.9c1.1,0,1.9-0.3,2.5-0.8c0.6-0.5,0.9-1.2,0.9-2.2 C548.3,153.5,547.1,152.6,544.8,152.6z"/> <path d="M566.1,150.2h2.6v10.5c0,1.4-0.1,2.5-0.3,3.2c-0.2,0.7-0.5,1.3-0.8,1.8c-0.3,0.5-0.7,0.9-1.1,1.3c-1.5,1.3-3.4,1.9-5.7,1.9 c-2.4,0-4.3-0.6-5.8-1.9c-0.4-0.4-0.8-0.8-1.1-1.3c-0.3-0.5-0.6-1.1-0.8-1.8c-0.2-0.7-0.3-1.8-0.3-3.3v-10.4h2.6v10.5 c0,1.7,0.2,2.9,0.6,3.6c0.4,0.7,1,1.2,1.8,1.6c0.8,0.4,1.8,0.6,2.9,0.6c1.6,0,2.8-0.4,3.8-1.2c0.5-0.4,0.9-1,1.1-1.6 s0.3-1.6,0.3-3.1V150.2z"/> <path d="M572.4,150.2h2.6v16h8.3v2.4h-10.9V150.2z"/> <path d="M591.5,150.1h1.9l8.3,18.5h-2.7l-2.5-5.5h-7.9l-2.3,5.5h-2.7L591.5,150.1z M595.4,160.9l-3-6.7l-2.8,6.7H595.4z"/> <path d="M603.7,168.7v-18.4h4.6c1.9,0,3.3,0.5,4.4,1.4c1.1,0.9,1.6,2.2,1.6,3.7c0,1.1-0.3,2-0.8,2.8c-0.5,0.8-1.3,1.4-2.3,1.8 c0.6,0.4,1.2,0.9,1.7,1.6s1.4,1.8,2.4,3.5c0.6,1,1.2,1.8,1.5,2.4l1,1.3h-3.1l-0.8-1.2c0,0-0.1-0.1-0.2-0.2l-0.5-0.7l-0.8-1.3 l-0.9-1.4c-0.5-0.8-1-1.4-1.5-1.8s-0.9-0.8-1.2-1s-1-0.3-1.8-0.3h-0.7v8H603.7z M607.2,152.5h-0.8v5.8h1c1.3,0,2.3-0.1,2.7-0.3 c0.5-0.2,0.9-0.6,1.2-1c0.3-0.5,0.4-1,0.4-1.6c0-0.6-0.2-1.1-0.5-1.6c-0.3-0.5-0.7-0.8-1.3-1C609.4,152.6,608.5,152.5,607.2,152.5z "/> <path d="M620,150.2h2.6v18.4H620V150.2z"/> <path d="M625.1,150.2h15.4v2.3h-6.4v16.1h-2.6v-16.1h-6.3V150.2z"/> <path d="M654.1,150.2h3.2l-6.8,8.7v9.7h-2.7v-9.7l-6.8-8.7h3.2l4.9,6.3L654.1,150.2z"/> </g> </svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script> <script> var svg = d3.select("body").append("svg").attr("width",window.innerWidth).attr("height",window.innerHeight); d3.csv("data.csv",function(root){ var names = Object.keys(root[0]); svg.selectAll("rect").data(root).enter() .append("rect").style("fill","#b22234") .attr("x",0).attr("y",function(d,i){ return i*40}) .attr("height",20).attr("width",function(d,i){ return d[names[i]]*200; }) .append("title").text(function(d,i){ return names[i]; }); }); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js