Increase graphic container width to show bigger numbers

package.json

@@ -57,6 +57,7 @@
     "svelte-loader": "3.1.2"
   },
   "dependencies": {
+    "d3-array": "^3.0.1",
     "d3-format": "2.0.0",
     "d3-scale": "4.0.0",
     "d3-scale-chromatic": "3.0.0",

src/components/explore/AggregationComparisonGraph.svelte

@@ -1,9 +1,8 @@
 <script>
   import { Axis } from '@graph-paper/guides';
 
-  import { DataGraphic } from '@graph-paper/datagraphic';
-
   import { tooltip as tooltipAction } from '@graph-paper/core/actions';
+  import DataGraphic from '../../graph-paper/datagraphic/DataGraphic.svelte';
 
   import ReferenceSymbol from '../ReferenceSymbol.svelte';
 

src/components/explore/AggregationsOverTimeGraph.svelte

@@ -4,10 +4,11 @@
   import { fly } from 'svelte/transition';
   import { cubicOut as easing } from 'svelte/easing';
 
-  import { DataGraphic } from '@graph-paper/datagraphic';
   import { Axis } from '@graph-paper/guides';
   import { Line } from '@graph-paper/elements';
 
+  import DataGraphic from '../../graph-paper/datagraphic/DataGraphic.svelte';
+
   import Tweenable from '../Tweenable.svelte';
   import Springable from '../Springable.svelte';
 

src/components/explore/ClientVolumeOverTimeGraph.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { DataGraphic } from '@graph-paper/datagraphic';
   import { Axis } from '@graph-paper/guides';
   import { Line } from '@graph-paper/elements';
 
   import Tweenable from '../Tweenable.svelte';
+  import DataGraphic from '../../graph-paper/datagraphic/DataGraphic.svelte';
 
   import FirefoxReleaseVersionMarkers from '../FirefoxReleaseVersionMarkers.svelte';
 

src/components/explore/CompareClientVolumeGraph.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { DataGraphic } from '@graph-paper/datagraphic';
   import { tooltip as tooltipAction } from '@graph-paper/core/actions/tooltip';
 
   import { Axis } from '@graph-paper/guides';
+  import DataGraphic from '../../graph-paper/datagraphic/DataGraphic.svelte';
 
   import Tweenable from '../Tweenable.svelte';
   import ChartTitle from './ChartTitle.svelte';

src/components/home/Proportion.svelte

@@ -1,8 +1,8 @@
 <script>
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { DataGraphic } from '@graph-paper/datagraphic';
   import { Axis } from '@graph-paper/guides';
+  import DataGraphic from '../../graph-paper/datagraphic/DataGraphic.svelte';
 
   import { createCatColorMap } from '../../utils/color-maps';
 

src/components/home/Quantile.svelte

@@ -1,9 +1,9 @@
 <script>
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { DataGraphic } from '@graph-paper/datagraphic';
   import { Axis } from '@graph-paper/guides';
   import Violin from './Violin.svelte';
+  import DataGraphic from '../../graph-paper/datagraphic/DataGraphic.svelte';
 
   import { formatCount, formatPercentDecimal } from '../../utils/formatters';
 

src/components/table/ProportionSM.svelte

@@ -1,7 +1,7 @@
 <script>
   import { tweened } from 'svelte/motion';
   import { cubicOut as easing } from 'svelte/easing';
-  import { DataGraphic } from '@graph-paper/datagraphic';
+  import DataGraphic from '../../graph-paper/datagraphic/DataGraphic.svelte';
 
   export let value;
   export let hovered = false;