Old school D3 from simpler times

All examples By author By category About

bumbeishvili

Full window Github gist

Datafest Tbilisi - logo like area visual

DataFest Tbilisi

Giving life to the logo via d3

<!DOCTYPE html>

<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