Old school D3 from simpler times

All examples By author By category About

jrjames83

Full window Github gist

JS Bin [Line Charts with SVG and D3add your bin description] // source http://jsbin.com/xiqawa

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Line Charts with SVG and D3add your bin description]">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
// Line Chart

var h = 500;
var w = 900;

monthlySales = [
  {"month":10, "sales":100},
  {"month":20, "sales":130},
  {"month":30, "sales":250},
  {"month":40, "sales":300},
  {"month":50, "sales":265},
  {"month":60, "sales":225},
  {"month":70, "sales":180},
  {"month":80, "sales":120},
  {"month":90, "sales":140},
  {"month":100, "sales":133}
  
];

function kpiColor(d) {
  if (d>250) {
    return "#33CC66";
  } else {
    return "#666666";
  }
}

function showMinMax(ds, col, val, type) {
  var max = d3.max(ds, function(d) {return d[col];});
  var min = d3.min(ds, function(d) {return d[col];});
  
  if (type=="minmax" && (val==max || val==min)) {
      return val;
    
   } else if (type=="all") {
     return val;
  }
}

var svg = d3.select("body").append("svg").attr({
  width: w, 
  height: h
});

var dots = svg.selectAll("circle").data(monthlySales).enter()
.append("circle")
.attr({
  cx: function(d) {return d.month*3;},
  cy: function(d) {return h-d.sales;},
  r: 5,
  "fill": function(d) {
    return kpiColor(d.sales);
  }
});

var labels = svg.selectAll("text")
  .data(monthlySales)
  .enter()
  .append("text")
  .text(function (d) {
    return showMinMax(monthlySales, 'sales', d.sales, 'all'); // change 4th arg
  })
.attr({
  x: function(d) {return (d.month*3)-25;},
  y: function(d) {return h-d.sales;},
  "font-size": "12px",
  "text-anchor": "start",
  "fill": "#666666"
});
</script>

<script id="jsbin-source-javascript" type="text/javascript">// Line Chart

var h = 500;
var w = 900;

monthlySales = [
  {"month":10, "sales":100},
  {"month":20, "sales":130},
  {"month":30, "sales":250},
  {"month":40, "sales":300},
  {"month":50, "sales":265},
  {"month":60, "sales":225},
  {"month":70, "sales":180},
  {"month":80, "sales":120},
  {"month":90, "sales":140},
  {"month":100, "sales":133}
  
];

function kpiColor(d) {
  if (d>250) {
    return "#33CC66";
  } else {
    return "#666666";
  }
}

function showMinMax(ds, col, val, type) {
  var max = d3.max(ds, function(d) {return d[col];});
  var min = d3.min(ds, function(d) {return d[col];});
  
  if (type=="minmax" && (val==max || val==min)) {
      return val;
    
   } else if (type=="all") {
     return val;
  }
}

var svg = d3.select("body").append("svg").attr({
  width: w, 
  height: h
});

var dots = svg.selectAll("circle").data(monthlySales).enter()
.append("circle")
.attr({
  cx: function(d) {return d.month*3;},
  cy: function(d) {return h-d.sales;},
  r: 5,
  "fill": function(d) {
    return kpiColor(d.sales);
  }
});

var labels = svg.selectAll("text")
  .data(monthlySales)
  .enter()
  .append("text")
  .text(function (d) {
    return showMinMax(monthlySales, 'sales', d.sales, 'all'); // change 4th arg
  })
.attr({
  x: function(d) {return (d.month*3)-25;},
  y: function(d) {return h-d.sales;},
  "font-size": "12px",
  "text-anchor": "start",
  "fill": "#666666"
});

</script></body>
</html>

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