Old school D3 from simpler times

All examples By author By category About

arpitnarechania

Full window Github gist

Calendar View + Day Hour Heat Map

Integrated Calendar View and Day Hour Heat Map in one chart.

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Calendar Heatmap</title>

<script src="https://d3js.org/d3.v3.min.js"></script>

<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<link href="d3-tip.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="main.js"></script>
</head>

<body>
<div id="calendarView"></div>
<div id="dayHourChart"></div>
</body>

<script>
    var defaultColorScheme = ["#E57373","#BA68C8","#7986CB","#A1887F","#90A4AE","#AED581","#9575CD","#FF8A65","#4DB6AC","#FFF176","#64B5F6","#00E676"];
    var colorSchemeNeutralDayHourMap = ["white","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b"];

var dataset = [];
    dataset.push({month:1 , year: 2017, day_segment_id: 1, month_segment_id: 1,weekday_id: 1,amount:132, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 2, month_segment_id: 1,weekday_id: 2,amount:21, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 3, month_segment_id: 1,weekday_id: 3,amount:142, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 4, month_segment_id: 1,weekday_id: 4,amount:122, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 5, month_segment_id: 1,weekday_id: 5,amount:242, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 6, month_segment_id: 2,weekday_id: 1,amount:12, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 1, month_segment_id: 2,weekday_id: 2,amount:322, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 2, month_segment_id: 2,weekday_id: 3,amount:143, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 3, month_segment_id: 2,weekday_id: 4,amount:165, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 4, month_segment_id: 2,weekday_id: 5,amount:142, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 5, month_segment_id: 3,weekday_id: 1,amount:112, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 6, month_segment_id: 3,weekday_id: 2,amount:54, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 1, month_segment_id: 3,weekday_id: 3,amount:242, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 2, month_segment_id: 3,weekday_id: 4,amount:41, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 3, month_segment_id: 3,weekday_id: 5,amount:232, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 4, month_segment_id: 4,weekday_id: 1,amount:18, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 5, month_segment_id: 4,weekday_id: 2,amount:85, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 6, month_segment_id: 4,weekday_id: 3,amount:194, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 1, month_segment_id: 4,weekday_id: 4,amount:23, meta_numsegs_month:4,meta_numsegs_day: 24});
    dataset.push({month:1 , year: 2017, day_segment_id: 2, month_segment_id: 4,weekday_id: 5,amount:13, meta_numsegs_month:4,meta_numsegs_day: 24});
    
    var dom_elements = [{data:dataset,primary:"#calendarView",secondary:"#dayHourChart",categoryName:"amount",isForwarUnit:true,unitName:"rs",colorSchemeDayHourMap:colorSchemeNeutralDayHourMap,colorScheme:[colorSchemeNeutralDayHourMap[0],colorSchemeNeutralDayHourMap[colorSchemeNeutralDayHourMap.length - 1]]}];

var timeTicksInDay = ["12:30am","1:30am","2:30am","3:30am","4:30am","5:30am","6:30am","7:30am","8:30am","9:30am","10:30am","11:30am","12:30pm","1:30pm","2:30pm","3:30pm","4:30pm","5:30pm","6:30pm","7:30pm","8:30pm","9:30pm","10:30pm","11:30pm"];
    var monthsFullName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    calendarViewHeatMap (dom_elements, 2017, 0, timeTicksInDay, monthsFullName);
</script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery-3.1.1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js