JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="timeline"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
</body>
JavaScript
var dataMetric = [
{
"id": 1,
"title": "Little Inc",
"metrics": {
"offers": 665,
"shares": 20,
"landings": 1124,
"leads": 1102,
"purchases": 88,
"friends": 74
}
},
{
"id": 2,
"title": "Marvin LLC",
"metrics": {
"offers": 20,
"shares": 4,
"landings": 20,
"leads": 25,
"purchases": 28,
"friends": 18
}
},
{
"id": 3,
"title": "Hodkiewicz, Jacobson and O'Conner",
"metrics": {
"offers": 834,
"shares": 8,
"landings": 759,
"leads": 683,
"purchases": 41,
"friends": 35
}
},
{
"id": 4,
"title": "Harber, Fahey and Berge",
"metrics": {
"offers": 233,
"shares": 5,
"landings": 352,
"leads": 348,
"purchases": 31,
"friends": 25
}
}
];
var metrics = ["offers", "shares", "landings", "leads", "purchases", "friends"];
var width = 500,
height = 200,
colors = {'0': '#6ff500', '1': '#ffad0a', '2': '#f90035', '3': '#6fD000'},
stack = d3.layout.stack().offset("expand");
var svg = d3.select("#timeline").append("svg")
.attr("width", width)
.attr("height", height);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var color = d3.scale.linear()
.range(["#0D0", "#060"]);
streamed_history(dataMetric)
function streamed_history(data) {
var m = [];
data_array = metrics.forEach(function (f, metricIndex) {
for (var index in data) {
m[index] = m[index] || [];
m[index].push({x:...