Old school D3 from simpler times

All examples By author By category About

jhnwllr

Full window Github gist

GBIF logo manipulation

Built with blockbuilder.org

<!DOCTYPE html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<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