data-visualization-2-draw

data-visualization-2-draw.js

import { map } from "lodash/fp";
import * as d3 from "d3";
const margin = { top: 50, right: 50, bottom: 100, left: 50 };
const container = {
  width: window.innerWidth,
  height: 480
};
const chart = {
  width: container.width - margin.left - margin.right,
  height: container.height - margin.top - margin.bottom
};
const draw = ({ rainfalls }) => {
  const { width, height } = chart;
  const xScale = d3
    .scalePoint()
    .domain(map("date", rainfalls))
    .range([0, width]);
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(map(({ value }) => +value, rainfalls))])
    .range([height, 0]);
  const line = d3
    .line()
    .x(({ date }) => xScale(date))
    .y(({ value }) => yScale(value));
  const svg = d3
    .select(".chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  svg
    .append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale))
    .selectAll("text");
  svg
    .append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale));
  svg
    .append("path")
    .datum(rainfalls)
    .attr("class", "line")
    .attr("d", line);
  svg
    .selectAll(".dot")
    .data(rainfalls)
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", ({ date }) => xScale(date))
    .attr("cy", ({ value }) => yScale(value))
    .attr("r", 5);
};
export { draw };