cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              path {
  fill: none;
  stroke: grey;
  stroke-width: 1px;
}
.axis text, .label {
  font: 12px sans-serif;
}
.label--yright {
  fill: red;
}
.label--yleft {
  fill: steelblue;
}
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1px;
  opacity: 0.5;
}
.axis--yright {
  fill: red;
}
.axis--yleft {
  fill: steelblue;
}
.axis--yleft .tick line {
  stroke: steelblue;
  stroke-width: 1px;
}
.line1 {
  stroke: steelblue;
  stroke-width: 2px;
  fill: none;
}
.bars {
  stroke: red;
}
            
          
!
            
              var graph1 = [
  {
    "date": "2006-03",
    "total": 10
  },
  {
    "date": "2006-04",
    "total": 15
  },
  {
    "date": "2006-05",
    "total": 22
  },
  {
    "date": "2006-06",
    "total": 28
  },
  {
    "date": "2006-07",
    "total": 57
  },
  {
    "date": "2006-08",
    "total": 77
  },
  {
    "date": "2006-09",
    "total": 104
  },
  {
    "date": "2006-10",
    "total": 137
  },
  {
    "date": "2006-11",
    "total": 180
  },
  {
    "date": "2006-12",
    "total": 228
  },
  {
    "date": "2007-01",
    "total": 287
  },
  {
    "date": "2007-02",
    "total": 346
  },
  {
    "date": "2007-03",
    "total": 520
  },
  {
    "date": "2007-04",
    "total": 653
  },
  {
    "date": "2007-05",
    "total": 717
  },
  {
    "date": "2007-06",
    "total": 765
  },
  {
    "date": "2007-07",
    "total": 799
  },
  {
    "date": "2007-08",
    "total": 838
  },
  {
    "date": "2007-09",
    "total": 863
  },
  {
    "date": "2007-10",
    "total": 896
  },
  {
    "date": "2007-11",
    "total": 917
  },
  {
    "date": "2007-12",
    "total": 943
  },
  {
    "date": "2008-01",
    "total": 978
  },
  {
    "date": "2008-02",
    "total": 1001
  },
  {
    "date": "2008-03",
    "total": 1042
  },
  {
    "date": "2008-04",
    "total": 1095
  },
  {
    "date": "2008-05",
    "total": 1133
  },
  {
    "date": "2008-06",
    "total": 1157
  },
  {
    "date": "2008-07",
    "total": 1179
  },
  {
    "date": "2008-08",
    "total": 1209
  },
  {
    "date": "2008-09",
    "total": 1232
  },
  {
    "date": "2008-10",
    "total": 1265
  },
  {
    "date": "2008-11",
    "total": 1298
  },
  {
    "date": "2008-12",
    "total": 1318
  },
  {
    "date": "2009-01",
    "total": 1365
  },
  {
    "date": "2009-02",
    "total": 1399
  },
  {
    "date": "2009-03",
    "total": 1453
  },
  {
    "date": "2009-04",
    "total": 1499
  },
  {
    "date": "2009-05",
    "total": 1526
  },
  {
    "date": "2009-06",
    "total": 1549
  },
  {
    "date": "2009-07",
    "total": 1573
  },
  {
    "date": "2009-08",
    "total": 1586
  },
  {
    "date": "2009-09",
    "total": 1601
  },
  {
    "date": "2009-10",
    "total": 1607
  },
  {
    "date": "2009-11",
    "total": 1617
  },
  {
    "date": "2009-12",
    "total": 1629
  },
  {
    "date": "2010-01",
    "total": 1638
  },
  {
    "date": "2010-02",
    "total": 1645
  },
  {
    "date": "2010-03",
    "total": 1649
  },
  {
    "date": "2010-04",
    "total": 1689
  },
  {
    "date": "2010-05",
    "total": 1694
  },
  {
    "date": "2010-06",
    "total": 1701
  },
  {
    "date": "2010-07",
    "total": 1706
  },
  {
    "date": "2010-08",
    "total": 1715
  },
  {
    "date": "2010-09",
    "total": 1724
  },
  {
    "date": "2010-10",
    "total": 1733
  },
  {
    "date": "2010-11",
    "total": 1736
  },
  {
    "date": "2010-12",
    "total": 1742
  },
  {
    "date": "2011-01",
    "total": 1753
  },
  {
    "date": "2011-02",
    "total": 1760
  },
  {
    "date": "2011-03",
    "total": 1781
  },
  {
    "date": "2011-04",
    "total": 1789
  },
  {
    "date": "2011-05",
    "total": 1795
  },
  {
    "date": "2011-06",
    "total": 1799
  },
  {
    "date": "2011-07",
    "total": 1805
  },
  {
    "date": "2011-08",
    "total": 1808
  },
  {
    "date": "2011-09",
    "total": 1812
  },
  {
    "date": "2011-10",
    "total": 1817
  },
  {
    "date": "2011-11",
    "total": 1822
  },
  {
    "date": "2011-12",
    "total": 1824
  },
  {
    "date": "2012-01",
    "total": 1830
  },
  {
    "date": "2012-02",
    "total": 1832
  },
  {
    "date": "2012-03",
    "total": 1845
  },
  {
    "date": "2012-04",
    "total": 1851
  },
  {
    "date": "2012-05",
    "total": 1858
  },
  {
    "date": "2012-06",
    "total": 1860
  },
  {
    "date": "2012-07",
    "total": 1867
  },
  {
    "date": "2012-08",
    "total": 1872
  },
  {
    "date": "2012-09",
    "total": 1875
  },
  {
    "date": "2012-10",
    "total": 1879
  },
  {
    "date": "2012-11",
    "total": 1880
  },
  {
    "date": "2012-12",
    "total": 1883
  },
  {
    "date": "2013-01",
    "total": 1890
  },
  {
    "date": "2013-02",
    "total": 1895
  },
  {
    "date": "2013-03",
    "total": 1899
  },
  {
    "date": "2013-04",
    "total": 1905
  },
  {
    "date": "2013-05",
    "total": 1907
  },
  {
    "date": "2013-06",
    "total": 1908
  },
  {
    "date": "2013-07",
    "total": 1911
  },
  {
    "date": "2013-08",
    "total": 1913
  },
  {
    "date": "2013-09",
    "total": 1916
  },
  {
    "date": "2013-10",
    "total": 1919
  },
  {
    "date": "2013-11",
    "total": 1923
  },
  {
    "date": "2013-12",
    "total": 1928
  },
  {
    "date": "2014-01",
    "total": 1929
  },
  {
    "date": "2014-02",
    "total": 1932
  },
  {
    "date": "2014-03",
    "total": 1933
  },
  {
    "date": "2014-04",
    "total": 1936
  },
  {
    "date": "2014-05",
    "total": 1939
  },
  {
    "date": "2014-06",
    "total": 1942
  },
  {
    "date": "2014-07",
    "total": 1943
  },
  {
    "date": "2014-08",
    "total": 1945
  },
  {
    "date": "2014-09",
    "total": 1948
  },
  {
    "date": "2014-11",
    "total": 1950
  },
  {
    "date": "2014-12",
    "total": 1951
  },
  {
    "date": "2015-01",
    "total": 1954
  },
  {
    "date": "2015-02",
    "total": 1960
  },
  {
    "date": "2015-03",
    "total": 1962
  },
  {
    "date": "2015-04",
    "total": 1963
  },
  {
    "date": "2015-05",
    "total": 1964
  },
  {
    "date": "2015-06",
    "total": 1965
  },
  {
    "date": "2015-08",
    "total": 1966
  },
  {
    "date": "2015-10",
    "total": 1969
  },
  {
    "date": "2015-11",
    "total": 1970
  },
  {
    "date": "2015-12",
    "total": 1971
  },
  {
    "date": "2016-01",
    "total": 1972
  },
  {
    "date": "2016-02",
    "total": 1975
  },
  {
    "date": "2016-03",
    "total": 1977
  },
  {
    "date": "2016-04",
    "total": 1978
  },
  {
    "date": "2016-06",
    "total": 1981
  },
  {
    "date": "2016-09",
    "total": 1984
  }
];

var graph2 = [
  {
    "date": "2006-03",
    "total": 10
  },
  {
    "date": "2006-04",
    "total": 5
  },
  {
    "date": "2006-05",
    "total": 7
  },
  {
    "date": "2006-06",
    "total": 6
  },
  {
    "date": "2006-07",
    "total": 29
  },
  {
    "date": "2006-08",
    "total": 20
  },
  {
    "date": "2006-09",
    "total": 27
  },
  {
    "date": "2006-10",
    "total": 33
  },
  {
    "date": "2006-11",
    "total": 43
  },
  {
    "date": "2006-12",
    "total": 48
  },
  {
    "date": "2007-01",
    "total": 59
  },
  {
    "date": "2007-02",
    "total": 59
  },
  {
    "date": "2007-03",
    "total": 174
  },
  {
    "date": "2007-04",
    "total": 133
  },
  {
    "date": "2007-05",
    "total": 64
  },
  {
    "date": "2007-06",
    "total": 48
  },
  {
    "date": "2007-07",
    "total": 34
  },
  {
    "date": "2007-08",
    "total": 39
  },
  {
    "date": "2007-09",
    "total": 25
  },
  {
    "date": "2007-10",
    "total": 33
  },
  {
    "date": "2007-11",
    "total": 21
  },
  {
    "date": "2007-12",
    "total": 26
  },
  {
    "date": "2008-01",
    "total": 35
  },
  {
    "date": "2008-02",
    "total": 23
  },
  {
    "date": "2008-03",
    "total": 41
  },
  {
    "date": "2008-04",
    "total": 53
  },
  {
    "date": "2008-05",
    "total": 38
  },
  {
    "date": "2008-06",
    "total": 24
  },
  {
    "date": "2008-07",
    "total": 22
  },
  {
    "date": "2008-08",
    "total": 30
  },
  {
    "date": "2008-09",
    "total": 23
  },
  {
    "date": "2008-10",
    "total": 33
  },
  {
    "date": "2008-11",
    "total": 33
  },
  {
    "date": "2008-12",
    "total": 20
  },
  {
    "date": "2009-01",
    "total": 47
  },
  {
    "date": "2009-02",
    "total": 34
  },
  {
    "date": "2009-03",
    "total": 54
  },
  {
    "date": "2009-04",
    "total": 46
  },
  {
    "date": "2009-05",
    "total": 27
  },
  {
    "date": "2009-06",
    "total": 23
  },
  {
    "date": "2009-07",
    "total": 24
  },
  {
    "date": "2009-08",
    "total": 13
  },
  {
    "date": "2009-09",
    "total": 15
  },
  {
    "date": "2009-10",
    "total": 6
  },
  {
    "date": "2009-11",
    "total": 10
  },
  {
    "date": "2009-12",
    "total": 12
  },
  {
    "date": "2010-01",
    "total": 9
  },
  {
    "date": "2010-02",
    "total": 7
  },
  {
    "date": "2010-03",
    "total": 4
  },
  {
    "date": "2010-04",
    "total": 40
  },
  {
    "date": "2010-05",
    "total": 5
  },
  {
    "date": "2010-06",
    "total": 7
  },
  {
    "date": "2010-07",
    "total": 5
  },
  {
    "date": "2010-08",
    "total": 9
  },
  {
    "date": "2010-09",
    "total": 9
  },
  {
    "date": "2010-10",
    "total": 9
  },
  {
    "date": "2010-11",
    "total": 3
  },
  {
    "date": "2010-12",
    "total": 6
  },
  {
    "date": "2011-01",
    "total": 11
  },
  {
    "date": "2011-02",
    "total": 7
  },
  {
    "date": "2011-03",
    "total": 21
  },
  {
    "date": "2011-04",
    "total": 8
  },
  {
    "date": "2011-05",
    "total": 6
  },
  {
    "date": "2011-06",
    "total": 4
  },
  {
    "date": "2011-07",
    "total": 6
  },
  {
    "date": "2011-08",
    "total": 3
  },
  {
    "date": "2011-09",
    "total": 4
  },
  {
    "date": "2011-10",
    "total": 5
  },
  {
    "date": "2011-11",
    "total": 5
  },
  {
    "date": "2011-12",
    "total": 2
  },
  {
    "date": "2012-01",
    "total": 6
  },
  {
    "date": "2012-02",
    "total": 2
  },
  {
    "date": "2012-03",
    "total": 13
  },
  {
    "date": "2012-04",
    "total": 6
  },
  {
    "date": "2012-05",
    "total": 7
  },
  {
    "date": "2012-06",
    "total": 2
  },
  {
    "date": "2012-07",
    "total": 7
  },
  {
    "date": "2012-08",
    "total": 5
  },
  {
    "date": "2012-09",
    "total": 3
  },
  {
    "date": "2012-10",
    "total": 4
  },
  {
    "date": "2012-11",
    "total": 1
  },
  {
    "date": "2012-12",
    "total": 3
  },
  {
    "date": "2013-01",
    "total": 7
  },
  {
    "date": "2013-02",
    "total": 5
  },
  {
    "date": "2013-03",
    "total": 4
  },
  {
    "date": "2013-04",
    "total": 6
  },
  {
    "date": "2013-05",
    "total": 2
  },
  {
    "date": "2013-06",
    "total": 1
  },
  {
    "date": "2013-07",
    "total": 3
  },
  {
    "date": "2013-08",
    "total": 2
  },
  {
    "date": "2013-09",
    "total": 3
  },
  {
    "date": "2013-10",
    "total": 3
  },
  {
    "date": "2013-11",
    "total": 4
  },
  {
    "date": "2013-12",
    "total": 5
  },
  {
    "date": "2014-01",
    "total": 1
  },
  {
    "date": "2014-02",
    "total": 3
  },
  {
    "date": "2014-03",
    "total": 1
  },
  {
    "date": "2014-04",
    "total": 3
  },
  {
    "date": "2014-05",
    "total": 3
  },
  {
    "date": "2014-06",
    "total": 3
  },
  {
    "date": "2014-07",
    "total": 1
  },
  {
    "date": "2014-08",
    "total": 2
  },
  {
    "date": "2014-09",
    "total": 3
  },
  {
    "date": "2014-11",
    "total": 2
  },
  {
    "date": "2014-12",
    "total": 1
  },
  {
    "date": "2015-01",
    "total": 3
  },
  {
    "date": "2015-02",
    "total": 6
  },
  {
    "date": "2015-03",
    "total": 2
  },
  {
    "date": "2015-04",
    "total": 1
  },
  {
    "date": "2015-05",
    "total": 1
  },
  {
    "date": "2015-06",
    "total": 1
  },
  {
    "date": "2015-08",
    "total": 1
  },
  {
    "date": "2015-10",
    "total": 3
  },
  {
    "date": "2015-11",
    "total": 1
  },
  {
    "date": "2015-12",
    "total": 1
  },
  {
    "date": "2016-01",
    "total": 1
  },
  {
    "date": "2016-02",
    "total": 3
  },
  {
    "date": "2016-03",
    "total": 2
  },
  {
    "date": "2016-04",
    "total": 1
  },
  {
    "date": "2016-06",
    "total": 3
  },
  {
    "date": "2016-09",
    "total": 3
  }
];

// Common params for graph
		var bodyWidth = $(window).width();
	 	var bodyHeight = $(window).height();
		var margin = {top: 10, right: 70, bottom: 50, left: 50},

		width = bodyWidth - margin.left - margin.right,
		height = bodyHeight - margin.top - margin.bottom;

		var svg = d3.select("body").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		// X axis

		var x = d3.time.scale()
			.domain([new Date(2006, 01), new Date(2016, 12)])
			.range([0, width]);

		var xaxis = d3.svg.axis().scale(x)
			.orient("bottom").ticks(16).tickSize(-height);

		var xaxisg = svg.append("g")
			.attr("class", "axis axis--x")
			.attr("transform", "translate(0," + height + ")")
			.call(xaxis);

		svg.append("text")
			.attr("class", "label label--x")
			.attr("text-anchor", "end")
			.attr("x", width)
			.attr("y", height + 30)
			.text("Time (month, year)");

		// Y axis

		var totalUser  = graph1[graph1.length - 1].total;

		// Left axis (percent of people total)
		var y0 = d3.scale.linear().range([height, 0]);
		y0.domain([0, totalUser]);

		// Right axis (Number of people per day)
		var y1 = d3.scale.linear().range([height, 0]);
		y1.domain([0, 200]); // Here the value is 200

		var yAxisLeft = d3.svg.axis().scale(y0)
			.orient("left").ticks(10).tickSize(-width).tickFormat(function(d) { return parseInt((d / totalUser) * 100, 10) + "%"; });

		var yAxisRight = d3.svg.axis().scale(y1)
			.orient("right").ticks(10);

		svg.append("g")
			.attr("class", "axis axis--y axis--yleft")
			.call(yAxisLeft);

		svg.append("text")
			.attr("class", "label label--yleft")
			.attr("text-anchor", "end")
			.attr("x", -6)
			.attr("y", -35)
			.attr("transform", "rotate(-90)")
			.text("Amount of users (%)");

		svg.append("g")
			.attr("class", "axis axis--y axis--yright")
			.attr("transform", "translate(" + width + " ,0)")
			.call(yAxisRight);

		svg.append("text")
			.attr("class", "label label--yright")
			.attr("text-anchor", "end")
			.attr("x", 0)
			.attr("y", width + 45)
			.attr("transform", "rotate(-90)")
			.text("Usernames taken per month");


		// LINE

		var line = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y0(d.total); });

		// DATAs

		var parseDate = d3.time.format("%Y-%m").parse;

		graph1.forEach(function(d) {
			d.date = parseDate(d.date);
			d.total = +d.total;
		});

		graph2.forEach(function(d) {
			d.date = parseDate(d.date);
			d.total = +d.total;
		});

		// BARS

		svg.selectAll('rect')
			.data(graph2)
			.enter()
			.append('rect')
			.attr("class", "bars")
			.attr('x', function (d) {
				return x(d.date);
			})
			.attr('y', function (d) {
				return height;
			})
			.attr('width', 1)
			.attr("height", 0)
			.transition()
			.duration(200)
			.delay(function (d, i) {
				return i * 25;
			})
			.attr('y', function (d) {
				return y1(d.total);
			})
			.attr("height", function(d) { return height - y1(d.total); })
			.attr('fill', 'grey');


		// LINE

		var path = svg.append("path") // Add the line path.
			.attr("class", "line1")
			.attr("d", line(graph1));

		var totalLength = path.node().getTotalLength();

		path.attr("stroke-dasharray", totalLength + " " + totalLength)
			.attr("stroke-dashoffset", totalLength)
			.transition()
			.duration(3025)
			.ease("linear")
			.attr("stroke-dashoffset", 0);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console