JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="bydate"></div>
	<div id="bylocation"></div>
</body>

CSS

body {
	font: 10px sans-serif;
}

/* Styles for line chart */
.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.x.axis path {
	display: none;
}

.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
}

/* Styles for circlepack */
.node {
	cursor: pointer;
}

.node:hover {
	stroke: #000;
	stroke-width: 1.5px;
}

.node--leaf {
	fill: white;
}

.label {
	font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-anchor: middle;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.label,
.node--root,
.node--leaf {
	pointer-events: none;
}

JavaScript

var data={
	"by_date":[
		{"date":"2014-01-01", "count":10},
		{"date":"2014-02-01", "count":20},
		{"date":"2014-03-01", "count":30},
		{"date":"2014-04-01", "count":15},
		{"date":"2014-05-01", "count":20}
	],
	"by_location": {
		"name":"World","children":[
			{
				"name":"United States", "children":[{"name":"New York", "children":[{"name":"Albany","count":5}, {"name":"NYC","count":5}]}]
			},
			{
				"name":"Canda", "children":[
					{
						"name":"Alberta", "children":[{"name":"Edmonton","count":5},{"name":"Calgary","count":5}]
					},
					{
						"name":"British Columbia", "children":[{"name":"Victoria","count":2},{"name":"Vancouver","count":8}]
					}
				]
			},
			{
				"name":"China", "children":[{"name":"Beijing","count":30}]
			},
			{
				"name":"India", "children":[{"name":"Bangalore","count":15}]
			},
			{
				"name":"Germany", "children":[{"name":"Frankfurt","count":20}]
			}
		]
	}
};

function by_date(data) {
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
		width = 500 - margin.left - margin.right,
		height = 500 - margin.top - margin.bottom;

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

	var x = d3.time.scale()
	    .range([0, width]);

	var y = d3.scale.linear()
	    .range([height, 0]);

	var xAxis = d3.svg.axis()
	    .scale(x)
	    .orient("bottom");

	var yAxis = d3.svg.axis()
	    .scale(y)
	    .orient("left");

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

	var svg = d3.select("#bydate").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 + ")");

	  data.forEach(function(d) {
	    d.date = parseDate(d.date);
	    d.count = +d.count;
	  });

	  x.domain(d3.extent(data, function(d) { return d.date; }));
	  y.domain(d3.extent(data, function(d) { return d.count; }));

	  svg.append("g")
	   ...