Giving life to the logo via d3
xxxxxxxxxx
<html>
<head>
<meta charset="UTF-8">
<title>Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
/* background-color: blue; */
margin: 30px;
}
</style>
</head>
<body translate="no">
<div class="container centered">
<div id="myGraph"></div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3script.js"></script>
<script>
var data = {
bubbles: [
{
id: "bigdata1",
color: '#42ADB4',
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 ',
value: 3,
percent: 100
}, {
id: "bigdata2",
color: '#4A83BB',
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 ',
value: 6,
percent: 130
}, {
id: "bigdata3",
color: '#0FB6ED',
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 ',
value: 2.5,
percent: 110
}, {
id: "bigdata4",
color: '#F9DD64',
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 ',
value: 5,
percent: 90
}, {
id: "bigdata5",
color: '#934C69',
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 ',
value: 1.5,
percent: 100
}, {
id: "bigdata6",
color: '#FF6D2D',
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 ',
value: 10,
percent: 110
}, {
id: "bigdata7",
color: '#FF6D2D',
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 ',
value: 3,
percent: 130
}, {
id: "bigdata8",
color: '#FE2D43',
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 ',
value: 4,
percent: 105
}
],
entities: [{
id: "bigdata",
name: "Big Data",
gradient: ["#FFA924", '#FFA924'],
values: [{
date: 'Fri Jan 01 2017 00:00:00 GMT+0400',
value: 0
}, {
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 ',
value: 40
}, {
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 ',
value: 60
}, {
date: 'Fri Jan 10 2017 00:00:00 GMT+0400 ',
value: 30
}, {
date: 'Fri Jan 11 2017 00:00:00 GMT+0400 ',
value: 0
}]
}, {
id: "AI",
name: "AI",
gradient: ["#40ADB5", '#40ADB5'],
values: [{
date: 'Fri Jan 01 2017 00:00:00 GMT+0400',
value: 0
}, {
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 ',
value: 70
}, {
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 ',
value: 50
}, {
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 ',
value: 95
}, {
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 ',
value: 50
}, {
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 10 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 11 2017 00:00:00 GMT+0400 ',
value: 0
}]
},
{
id: "Startups",
name: "Startups",
gradient: ["#A54452", '#A54452'],
values: [{
date: 'Fri Jan 01 2017 00:00:00 GMT+0400',
value: 0
}, {
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 ',
value: 0
}, {
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 ',
value: 40
}, {
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 ',
value: 60
}, {
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 ',
value: 90
}, {
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 ',
value: 40
}, {
date: 'Fri Jan 10 2017 00:00:00 GMT+0400 ',
value: 80
}, {
date: 'Fri Jan 11 2017 00:00:00 GMT+0400 ',
value: 0
}]
}, {
id: "Privacy",
name: "Privacy",
gradient: ["#FF6C2A", '#FF6C2A'],
values: [{
date: 'Fri Jan 01 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 (TBIT)',
value: 20
}, {
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 (TBIT)',
value: 50
}, {
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 (TBIT)',
value: 40
}, {
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 (TBIT)',
value: 60
}, {
date: 'Fri Jan 10 2017 00:00:00 GMT+0400 (TBIT)',
value: 15
}, {
date: 'Fri Jan 11 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}]
}, {
id: "Science",
name: "Science",
gradient: ["#2AB0D5", '#2AB0D5'],
values: [{
date: 'Fri Jan 01 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 (TBIT)',
value: 20
}, {
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 (TBIT)',
value: 60
}, {
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 (TBIT)',
value: 45
}, {
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 (TBIT)',
value: 30
}, {
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 (TBIT)',
value: 50
}, {
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 (TBIT)',
value: 20
}, {
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 (TBIT)',
value: 20
}, {
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 10 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 11 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}]
}, {
id: "Marketing",
name: "marketing",
gradient: ["#29FAEB", '#29FAEB'],
values: [{
date: 'Fri Jan 01 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 (TBIT)',
value: 15
}, {
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 (TBIT)',
value: 50
}, {
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 (TBIT)',
value: 25
}, {
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 (TBIT)',
value: 50
}, {
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 10 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 11 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}]
}, {
id: "Journalism",
name: "Journalism",
gradient: ["#FFFBB5", "#FFDE20"],
values: [{
date: 'Fri Jan 01 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 02 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}, {
date: 'Fri Jan 03 2017 00:00:00 GMT+0400 (TBIT)',
value: 17
}, {
date: 'Fri Jan 04 2017 00:00:00 GMT+0400 (TBIT)',
value: 10
}, {
date: 'Fri Jan 05 2017 00:00:00 GMT+0400 (TBIT)',
value: 25
}, {
date: 'Fri Jan 06 2017 00:00:00 GMT+0400 (TBIT)',
value: 30
}, {
date: 'Fri Jan 07 2017 00:00:00 GMT+0400 (TBIT)',
value: 40
}, {
date: 'Fri Jan 08 2017 00:00:00 GMT+0400 (TBIT)',
value: 65
}, {
date: 'Fri Jan 09 2017 00:00:00 GMT+0400 (TBIT)',
value: 35
}, {
date: 'Fri Jan 10 2017 00:00:00 GMT+0400 (TBIT)',
value: 35
}, {
date: 'Fri Jan 11 2017 00:00:00 GMT+0400 (TBIT)',
value: 0
}]
}
]
}
var chart = renderChartArea()
.svgHeight(500)
.svgWidth(Math.min(window.innerWidth - 40, 1000))
.backgroundFill('white')
.data(data)
window.chart = chart;
d3.select("#myGraph")
.call(chart);
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js