✨ Add basic line chart component

components/LineChart.js

@@ -0,0 +1,88 @@
+import React, { useRef, useEffect } from 'react'
+import { select } from 'd3-selection'
+import { scaleLinear } from 'd3-scale'
+import { line } from 'd3-shape'
+import { axisLeft, axisBottom } from 'd3-axis'
+import { extent, max } from 'd3-array'
+
+// Example lineChart taken from https://www.newline.co/fullstack-d3 by Amelia Wattenberger
+
+// Draw canvas
+
+export const LineChart = ({
+  data,
+  yAccessor,
+  xAccessor,
+  aspectRatio = 0.4,
+}) => {
+  const wrapperRef = useRef()
+
+  useEffect(() => {
+    if (!wrapperRef.current) {
+      return
+    }
+
+    const dimensions = {
+      width: 1000,
+      height: 1000 * aspectRatio,
+      margin: {
+        top: 15,
+        right: 15,
+        bottom: 40,
+        left: 60,
+      },
+    }
+    dimensions.boundedWidth =
+      dimensions.width - dimensions.margin.left - dimensions.margin.right
+    dimensions.boundedHeight =
+      dimensions.height - dimensions.margin.top - dimensions.margin.bottom
+    const wrapper = select(wrapperRef.current)
+      .append('svg')
+      .attr('viewBox', `0 0 ${dimensions.width} ${dimensions.height}`)
+
+    const bounds = wrapper
+      .append('g')
+      .style(
+        'transform',
+        `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
+      )
+
+    // Create scales
+
+    const yScale = scaleLinear()
+      .domain([0, max(data, yAccessor)])
+      .range([dimensions.boundedHeight, 0])
+
+    const xScale = scaleLinear()
+      .domain(extent(data, xAccessor))
+      .range([0, dimensions.boundedWidth])
+
+    // Draw data
+
+    const lineGenerator = line()
+      .x((d) => xScale(xAccessor(d)))
+      .y((d) => yScale(yAccessor(d)))
+
+    bounds
+      .append('path')
+      .attr('d', lineGenerator(data))
+      .attr('fill', 'none')
+      .attr('stroke', '#af9358')
+      .attr('stroke-width', 2)
+
+    // Draw peripherals
+
+    const yAxisGenerator = axisLeft().scale(yScale)
+
+    bounds.append('g').call(yAxisGenerator)
+
+    const xAxisGenerator = axisBottom().scale(xScale).ticks(null, 'd')
+
+    bounds
+      .append('g')
+      .call(xAxisGenerator)
+      .style('transform', `translateY(${dimensions.boundedHeight}px)`)
+  }, [wrapperRef])
+
+  return <div ref={wrapperRef} />
+}

data/district_count.json

@@ -0,0 +1,226 @@
+{
+  "schema": {
+    "fields": [
+      {
+        "name": "index",
+        "type": "integer"
+      },
+      {
+        "name": "region_id",
+        "type": "string"
+      },
+      {
+        "name": "year",
+        "type": "string"
+      },
+      {
+        "name": "measure",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "integer"
+      },
+      {
+        "name": "statistic",
+        "type": "string"
+      }
+    ],
+    "primaryKey": ["index"],
+    "pandas_version": "0.20.0"
+  },
+  "data": [
+    {
+      "index": 0,
+      "region_id": "DG",
+      "year": "1995",
+      "measure": "GEM001",
+      "value": 14626,
+      "statistic": "11111"
+    },
+    {
+      "index": 1,
+      "region_id": "DG",
+      "year": "1996",
+      "measure": "GEM001",
+      "value": 14561,
+      "statistic": "11111"
+    },
+    {
+      "index": 2,
+      "region_id": "DG",
+      "year": "1997",
+      "measure": "GEM001",
+      "value": 14302,
+      "statistic": "11111"
+    },
+    {
+      "index": 3,
+      "region_id": "DG",
+      "year": "1998",
+      "measure": "GEM001",
+      "value": 14197,
+      "statistic": "11111"
+    },
+    {
+      "index": 4,
+      "region_id": "DG",
+      "year": "1999",
+      "measure": "GEM001",
+      "value": 13854,
+      "statistic": "11111"
+    },
+    {
+      "index": 5,
+      "region_id": "DG",
+      "year": "2000",
+      "measure": "GEM001",
+      "value": 13837,
+      "statistic": "11111"
+    },
+    {
+      "index": 6,
+      "region_id": "DG",
+      "year": "2001",
+      "measure": "GEM001",
+      "value": 13416,
+      "statistic": "11111"
+    },
+    {
+      "index": 7,
+      "region_id": "DG",
+      "year": "2002",
+      "measure": "GEM001",
+      "value": 13148,
+      "statistic": "11111"
+    },
+    {
+      "index": 8,
+      "region_id": "DG",
+      "year": "2003",
+      "measure": "GEM001",
+      "value": 12631,
+      "statistic": "11111"
+    },
+    {
+      "index": 9,
+      "region_id": "DG",
+      "year": "2004",
+      "measure": "GEM001",
+      "value": 12431,
+      "statistic": "11111"
+    },
+    {
+      "index": 10,
+      "region_id": "DG",
+      "year": "2005",
+      "measure": "GEM001",
+      "value": 12340,
+      "statistic": "11111"
+    },
+    {
+      "index": 11,
+      "region_id": "DG",
+      "year": "2006",
+      "measure": "GEM001",
+      "value": 12312,
+      "statistic": "11111"
+    },
+    {
+      "index": 12,
+      "region_id": "DG",
+      "year": "2007",
+      "measure": "GEM001",
+      "value": 12263,
+      "statistic": "11111"
+    },
+    {
+      "index": 13,
+      "region_id": "DG",
+      "year": "2008",
+      "measure": "GEM001",
+      "value": 12227,
+      "statistic": "11111"
+    },
+    {
+      "index": 14,
+      "region_id": "DG",
+      "year": "2009",
+      "measure": "GEM001",
+      "value": 11993,
+      "statistic": "11111"
+    },
+    {
+      "index": 15,
+      "region_id": "DG",
+      "year": "2010",
+      "measure": "GEM001",
+      "value": 11442,
+      "statistic": "11111"
+    },
+    {
+      "index": 16,
+      "region_id": "DG",
+      "year": "2011",
+      "measure": "GEM001",
+      "value": 11292,
+      "statistic": "11111"
+    },
+    {
+      "index": 17,
+      "region_id": "DG",
+      "year": "2012",
+      "measure": "GEM001",
+      "value": 11220,
+      "statistic": "11111"
+    },
+    {
+      "index": 18,
+      "region_id": "DG",
+      "year": "2013",
+      "measure": "GEM001",
+      "value": 11161,
+      "statistic": "11111"
+    },
+    {
+      "index": 19,
+      "region_id": "DG",
+      "year": "2014",
+      "measure": "GEM001",
+      "value": 11116,
+      "statistic": "11111"
+    },
+    {
+      "index": 20,
+      "region_id": "DG",
+      "year": "2015",
+      "measure": "GEM001",
+      "value": 11092,
+      "statistic": "11111"
+    },
+    {
+      "index": 21,
+      "region_id": "DG",
+      "year": "2016",
+      "measure": "GEM001",
+      "value": 11059,
+      "statistic": "11111"
+    },
+    {
+      "index": 22,
+      "region_id": "DG",
+      "year": "2017",
+      "measure": "GEM001",
+      "value": 11054,
+      "statistic": "11111"
+    },
+    {
+      "index": 23,
+      "region_id": "DG",
+      "year": "2018",
+      "measure": "GEM001",
+      "value": 11014,
+      "statistic": "11111"
+    }
+  ]
+}

package.json

@@ -33,7 +33,13 @@
   "homepage": "https://github.com/datenguide/explorable_explanations#readme",
   "dependencies": {
     "clsx": "^1.1.0",
+    "d3-array": "^2.4.0",
+    "d3-axis": "^1.0.12",
+    "d3-line": "^0.0.1",
     "d3-request": "^1.0.6",
+    "d3-scale": "^3.2.1",
+    "d3-selection": "^1.4.1",
+    "d3-shape": "^1.3.7",
     "react-map-gl": "^5.2.5",
     "topojson": "^3.0.2"
   },
@@ -51,6 +57,19 @@
     "@storybook/addon-links": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
+    "@types/babel__core": "^7.1.7",
+    "@types/babel__preset-env": "^7.9.0",
+    "@types/d3-axis": "^1.0.12",
+    "@types/d3-request": "^1.0.5",
+    "@types/d3-scale": "^2.2.0",
+    "@types/d3-selection": "^1.4.1",
+    "@types/eslint": "6.8.0",
+    "@types/prettier": "2.0.0",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-map-gl": "^5.2.3",
+    "@types/sass": "^1.16.0",
+    "@types/topojson": "^3.2.2",
     "babel-eslint": "10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -75,11 +94,6 @@
     "sass-loader": "^8.0.2",
     "webpack-cli": "^3.3.11"
   },
-  "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-map-gl": "^5.2.5"
-  },
   "eslintConfig": {
     "parser": "babel-eslint",
     "rules": {

stories/3-LineChart.stories.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { LineChart } from '../components/LineChart'
+
+import rawData from '../data/district_count.json'
+
+export default {
+  title: 'LineChart',
+  component: LineChart,
+}
+
+export const lineChart = () => {
+  return (
+    <LineChart
+      data={rawData.data}
+      yAccessor={(e) => e.value}
+      xAccessor={(e) => e.year}
+      aspectRatio={0.9}
+    />
+  )
+}