Old school D3 from simpler times

All examples By author By category About

eoiny

Full window Github gist

barNotes

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from eoiny's block: barNotes

forked from eoiny's block: barNotes

forked from eoiny's block: barNotes

forked from eoiny's block: barNotes

forked from eoiny's block: barNotes

forked from anonymous's block: barNotes

forked from anonymous's block: barNotes

forked from eoiny's block: barNotes

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="bars.js" type="text/javascript"></script>
  <style>
    .bar {
  fill: steelblue;
}

.year {
  font-family:Georgia,serif;
  font-size:22px;
  fill: #ccc;
  opacity:0.45;
  shape-rendering: crispEdges;
}

.axis {
  font: 8px sans-serif;
  stroke-width: 0.4px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
  stroke-width: 0.6px;
}

.tick text{
  font: 10px sans-serif;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.annotation {
  font-family:Helvetica,sans-serif;
  font-size:12px;
  fill: red;
  opacity:0.85;
  shape-rendering: crispEdges;
}
    
div.tooltip{
  position:absolute;
  text-align:center;
  width:120px;
  padding:2px;
  font-size:10px;
  font-family:Helvetica,sans-serif;
  background:#ffffff;
  pointer-events:none;
  opacity:0;
  border:1px solid #ccc;
  z-index: 120;
}

div.tooltip .h3{ text-align: left; font-size:8px; }
    
  </style>
</head>

<body>
  <body onload="createViz()">

<div id = "tooltip" class = "tooltip"></div>
<div id="chart"></div>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="bars.js" type="text/javascript"></script>
  <style>
    .bar {
  fill: steelblue;
}
​
.year {
  font-family:Georgia,serif;
  font-size:22px;
  fill: #ccc;
  opacity:0.45;
  shape-rendering: crispEdges;
}
​
.axis {
  font: 8px sans-serif;
  stroke-width: 0.4px;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
  stroke-width: 0.6px;
}
​
.tick text{
  font: 10px sans-serif;
  stroke: #ccc;
  shape-rendering: crispEdges;
}
​
.x.axis path {
  display: none;
}
​
​
.annotation {
  font-family:Helvetica,sans-serif;
  font-size:12px;
  fill: red;
  opacity:0.85;
  shape-rendering: crispEdges;
}
    
div.tooltip{
  position:absolute;
  text-align:center;
  width:120px;
  padding:2px;
  font-size:10px;
  font-family:Helvetica,sans-serif;
  background:#ffffff;
  pointer-events:none;
  opacity:0;
  border:1px solid #ccc;
  z-index: 120;
}
​
div.tooltip .h3{ text-align: left; font-size:8px; }
    
  </style>
</head>
​
<body>
  <body onload="createViz()">
​
<div id = "tooltip" class = "tooltip"></div>
<div id="chart"></div>
</body>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js