JSFiddle - React, Tailwind, and code Playground

by mariocatch

HTML

<body>

</body>

JavaScript

var h = 300;
var w = 400;

sales = [
	{"month": 1, "sales": 20},
  {"month": 2, "sales": 30},
  {"month": 3, "sales": 80},
  {"month": 4, "sales": 100},
  {"month": 5, "sales": 15},
  {"month": 6, "sales": 30},
  {"month": 7, "sales": 55},
  {"month": 8, "sales": 90},
  {"month": 9, "sales": 130},
  {"month": 10, "sales": 10},
  {"month": 11, "sales": 5},
  {"month": 12, "sales": 25},
];

var line = d3.svg.line()
	.x(function(d, i) {
  	return d.month*20
  })
  .y(function(d,i) {
  	return h - d.sales;
  })
  .interpolate('linaer');
  
var svg = d3.select('body')
	.append('svg')
  .attr({
  	width: w,
    height: h,
  });
  
var viz = svg.append('path')
	.attr({
  	d: line(sales),
    "stroke": 'purple',
    "stroke-width": 2,
    "fill": "none"
  });


var labels = svg.selectAll('text')
	.data(sales)
  .enter()
  .append('text')
  .text(function(d) {
  	return d.sales;
  })
  .attr({
  	x: function(d, i) {
    	return d.month*20 + 10;
    },
    y: function(d, i) {
    	return h - d.sales;
    },
    "font-size": "12px",
    "font-family": "sans-serif",
    "fill": "#666",
    "text-anchor": "start",
    "dy": ".35em",
    "font-weight": function(d, i) {
    	if(i === 0 || i === sales.length-1) {
      	return "bold";
      } else {
      	return "normal";
      }
    }
  })