Built with blockbuilder.org
xxxxxxxxxx <svg height="1000" width="1000"> <g fill="none" stroke="black" transform = "scale(0.1)"> <path d="m 1561.93,0 c 92.69,0 163.93,13.1914 237.1,40.1094 0,269.6996 -160.89,462.4216 -445.08,601.2886 C 1136.47,750.465 868.793,806.926 624.672,806.926 731.789,1128.44 653.711,1527.38 549.902,1746.37 434.895,1516.95 363.109,1123.63 473.539,803.633 256.684,787.82 84.7148,693.359 11.957,568.801 c -5.49606,-9.5 -16.50388,-29.75 -9.91794,-33.211 5.1836,-2.781 13.57424,5.699 18.75784,10.43 78.3554,72.539 182.1091,107.878 281.7231,107.878 230.218,0 392.742,-191.046 507.574,-305.82 C 1056.89,101.309 1298.11,-0.511719 1561.93,0" /> </g></svg><svg xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:cc="https://creativecommons.org/ns#" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="https://www.w3.org/2000/svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 -10 1229.44 247.67997" height="491.64081" width="1204.16" xml:space="preserve" id="svg2" version="1.1"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="https://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs id="defs6" /><g transform="matrix(1.3333333,0,0,-1.3333333,0,232.85333)" id="g10"><g transform="scale(0.1)" id="g12"> <path id="path14" style="fill:#4ca93b;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 769.047,894.766 c 0,340.784 166.316,635.704 661.183,635.704 0,-341.52 -224.65,-635.704 -661.183,-635.704" /><path id="path16" style="fill:#47a138;fill-opacity:;fill-rule:nonzero;stroke:none" d="m 1561.93,0 c 92.69,0 163.93,13.1914 237.1,40.1094 0,269.6996 -160.89,462.4216 -445.08,601.2886 C 1136.47,750.465 868.793,806.926 624.672,806.926 731.789,1128.44 653.711,1527.38 549.902,1746.37 434.895,1516.95 363.109,1123.63 473.539,803.633 256.684,787.82 84.7148,693.359 11.957,568.801 c -5.49606,-9.5 -16.50388,-29.75 -9.91794,-33.211 5.1836,-2.781 13.57424,5.699 18.75784,10.43 78.3554,72.539 182.1091,107.878 281.7231,107.878 230.218,0 392.742,-191.046 507.574,-305.82 C 1056.89,101.309 1298.11,-0.511719 1561.93,0" /><path id="path18" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 2512.89,1266.58 -120,-61.5 c -5.99,-3 -12,-7.5 -18,-7.5 -4.5,0 -9,3 -12,10.5 -26.99,64.49 -65.99,88.49 -106.49,88.49 h -99 c -58.49,0 -107.99,-49.49 -107.99,-107.99 V 744.602 c 0,-58.5 49.5,-108 107.99,-108 h 73.5 c 60,0 106.49,48 106.49,108 v 70.492 c 0,10.5 -4.5,15 -15,15 H 2181.4 c -10.5,0 -15,4.504 -15,15 V 972.59 c 0,10.5 4.5,15 15,15 h 313.49 c 10.5,0 14.99,-4.5 14.99,-15 V 744.602 c 0,-155.993 -109.49,-265.493 -278.98,-265.493 h -73.5 c -170.99,0 -278.99,109.5 -278.99,265.493 v 443.978 c 0,155.99 108,265.49 278.99,265.49 h 99 c 124.49,0 191.99,-51 236.99,-121.5 13.5,-22.5 28.5,-46.49 28.5,-55.49 0,-4.51 -3,-7.5 -9,-10.5" /><path id="path20" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 3097.88,788.098 c 0,59.996 -48,106.496 -108,106.496 h -164.99 c -10.49,0 -15,-4.504 -15,-15 V 666.602 c 0,-10.5 4.51,-15 15,-15 h 164.99 c 58.5,0 108,46.5 108,107.996 z m 0,385.482 c 0,58.5 -49.5,107.99 -108,107.99 h -164.99 c -10.49,0 -15,-4.49 -15,-14.99 v -199.49 c 0,-10.5 4.51,-15 15,-15 h 164.99 c 58.5,0 108,49.5 108,107.99 z m -108,-679.471 H 2652.4 c -10.49,0 -15,4.5 -15,15 v 914.961 c 0,10.5 4.51,15 15,15 h 337.48 c 171,0 279,-109.5 279,-278.99 v -15 c 0,-55.5 -36,-119.99 -79.5,-161.99 -4.51,-3 -6,-7.5 -6,-10.5 0,-3.004 1.49,-7.5 6,-10.496 43.5,-42.004 79.5,-114 79.5,-169.5 v -22.492 c 0,-169.5 -108,-275.993 -279,-275.993" /><path id="path22" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 3568.89,494.109 H 3426.4 c -10.5,0 -15,4.5 -15,15 v 914.961 c 0,10.5 4.5,15 15,15 h 142.49 c 10.5,0 15,-4.5 15,-15 V 509.109 c 0,-10.5 -4.5,-15 -15,-15" /><path id="path24" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 4317.36,1281.57 h -356.98 c -10.5,0 -15,-4.49 -15,-14.99 v -199.49 c 0,-10.5 4.5,-15 15,-15 h 292.49 c 10.5,0 15,-4.5 15,-15 V 909.594 c 0,-10.5 -4.5,-15 -15,-15 h -292.49 c -10.5,0 -15,-4.504 -15,-15 V 509.109 c 0,-10.5 -4.5,-15 -15,-15 h -142.49 c -10.5,0 -15,4.5 -15,15 v 914.961 c 0,10.5 4.5,15 15,15 h 529.47 c 10.5,0 15,-4.5 15,-15 v -127.5 c 0,-10.49 -4.5,-15 -15,-15" /></g></g></svg><head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script>var svg = d3.select("svg") var dataset = [ 5, 4, 3, 2];var totalHeight = 234;var data = [{text:"John", value:10, date:"dog"}]; var yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, totalHeight*0.2]);var colorScale = d3.scaleLinear() .domain([0, d3.max(dataset)/2, d3.max(dataset)]) .range(["#96e782", "#abc024", "#45136b"]); var bars = svg.selectAll(".bars") .data(dataset) .enter().append("rect") .attr("class", "bars") .attr("width", 29) .attr("height", 0) .attr("x", function(d,i) { return (i*30) + 282; }) .attr("y", totalHeight) .style("fill", function(d) { return colorScale(d); }); bars.on("mouseover", function(d) { d3.select(this) .style("fill", "#D3D3D3"); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(1111) .style("fill", function(d) { return colorScale(d); }); }); bars.transition().duration(500) .delay(function(d,i) { return i*200; }) .attr("y", function(d) { return totalHeight - yScale(d); }) .attr("height", function(d) { return yScale(d); });svg.append("text") .text("Analytics Blog") .attr("y", 234) .attr("x", 399) .attr("font-size", 64) .attr("font-family", "Helvetica") </script></body> https://d3js.org/d3.v4.min.js