maciejsmolinski/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>A simple d3 chart</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <svg id="viz"></svg>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

## index.js
import "./styles.css";

import { scaleLinear } from "d3-scale";
import { extent } from "d3-array";
import { select } from "d3-selection";
import { line } from "d3-shape";

const [WIDTH, HEIGHT] = [500, 500];
const OFFSET = 25;

const first = ([x, y]) => x;
const second = ([x, y]) => y;
const toString = item => item.toString();

const draw = (data = []) => {
  const xScale = scaleLinear()
    .domain(extent(data.map(first)))
    .range([0 + OFFSET, WIDTH - OFFSET]);

  const yScale = scaleLinear()
    .domain(extent(data.map(second)))
    .range([0 + OFFSET, HEIGHT - OFFSET]);

  const lineGen = line()
    .x(d => xScale(first(d)))
    .y(d => HEIGHT - yScale(second(d)));

  const $svg = select("#viz");
  const $points = $svg.selectAll(".point").data(data, toString);
  const $line = $svg.selectAll(".line").data(data, toString);

  $line
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("d", lineGen(data))
    .attr("style", "stroke: #ccc; fill: none");

  $line.exit().remove();

  $points
    .enter()
    .append("circle")
    .attr("class", "point")
    .attr("cx", d => xScale(first(d)))
    .attr("cy", d => HEIGHT - yScale(second(d)))
    .attr("r", 3);

  $points.exit().remove();
};

const data = [
  [0, 24],
  [5, 12],
  [10, 54],
  [15, 13],
  [20, 31],
  [25, 64],
  [30, 31],
  [35, 85],
  [40, 67],
  [45, 81],
  [50, 58]
];

const drawLoop = items => {
  draw(items || data.map(item => [first(item), Math.random() * 100]));
  setTimeout(drawLoop, 3000);
};

drawLoop(data);

## styles.scss
body {
  font-family: sans-serif;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}

svg {
  outline: 1px solid #ccc;
  width: 500px;
  height: 500px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>A simple d3 chart</title>
	<meta charset="UTF-8" />
	</head>

	<body>
	<div id="app">
	<svg id="viz"></svg>
	</div>

	<script src="src/index.js"></script>
	</body>
	</html>
	import "./styles.css";

	import { scaleLinear } from "d3-scale";
	import { extent } from "d3-array";
	import { select } from "d3-selection";
	import { line } from "d3-shape";

	const [WIDTH, HEIGHT] = [500, 500];
	const OFFSET = 25;

	const first = ([x, y]) => x;
	const second = ([x, y]) => y;
	const toString = item => item.toString();

	const draw = (data = []) => {
	const xScale = scaleLinear()
	.domain(extent(data.map(first)))
	.range([0 + OFFSET, WIDTH - OFFSET]);

	const yScale = scaleLinear()
	.domain(extent(data.map(second)))
	.range([0 + OFFSET, HEIGHT - OFFSET]);

	const lineGen = line()
	.x(d => xScale(first(d)))
	.y(d => HEIGHT - yScale(second(d)));

	const $svg = select("#viz");
	const $points = $svg.selectAll(".point").data(data, toString);
	const $line = $svg.selectAll(".line").data(data, toString);

	$line
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", lineGen(data))
	.attr("style", "stroke: #ccc; fill: none");

	$line.exit().remove();

	$points
	.enter()
	.append("circle")
	.attr("class", "point")
	.attr("cx", d => xScale(first(d)))
	.attr("cy", d => HEIGHT - yScale(second(d)))
	.attr("r", 3);

	$points.exit().remove();
	};

	const data = [
	[0, 24],
	[5, 12],
	[10, 54],
	[15, 13],
	[20, 31],
	[25, 64],
	[30, 31],
	[35, 85],
	[40, 67],
	[45, 81],
	[50, 58]
	];

	const drawLoop = items => {
	draw(items \|\| data.map(item => [first(item), Math.random() * 100]));
	setTimeout(drawLoop, 3000);
	};

	drawLoop(data);
	body {
	font-family: sans-serif;
	}

	#app {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 40px 0;
	}

	svg {
	outline: 1px solid #ccc;
	width: 500px;
	height: 500px;
	}