D3 Curve Step Link
by KgomDr
HTML
Popular / About
Will Chen’s Block a11626a31c65ba5d319fcf8b8870f281
Updated September 24, 2019
Employees Hierarchy Chart using d3.js
Open
Built with blockbuilder.org
forked from bumbeishvili's block: Employees Hierarchy Chart using d3.js
index.html
#
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Redesigned - Company Employees Hierarchy Chart </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<style>
.full-container {
background-color: red;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
/* ######################## DEPARTMENT INFO ############################*/
.department-information {
font-family: 'Roboto', sans-serif;
display:none;
box-shadow: 0 0 5px #999999;
position: absolute;
max-width: 200px;
top: 60px;
left: 20px;
padding: 10px;
background-color: white;
}
.department-information .dept-name {
color: #26a69a;
font-weight: bold;
}
.department-information .dept-description {
margin-top: 10px;
color: #959b9a;
font-size: 13px;
}
.department-information .dept-emp-count {
margin-top: 10px;
color: #959b9a;
font-size: 13px;
}
/* ############################## SEARCHBOX ######################################### */
.user-search-box {
overflow: hidden;
position: absolute;
right: 0;
height: 100%;
top: 0;
width: 0;
...
JavaScript
d3.select(window).on('keydown', console.log)