diff --git a/src/App.js b/src/App.js
index 5e344b0..471ca24 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,7 @@ import 'react-tabs/style/react-tabs.css';
 import isoCodes from './isoCodes.json';
 import './App.css';
 import Table from './Table';
-import Viz from './Viz';
+import Viz from './viz';
 
 moment.locale('FI');
 const headers = (showInfectionInfo) => [
diff --git a/src/Viz.js b/src/viz/Line.js
similarity index 54%
rename from src/Viz.js
rename to src/viz/Line.js
index aac3fe1..ad405c5 100644
--- a/src/Viz.js
+++ b/src/viz/Line.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import { XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries } from 'react-vis';
-import '../node_modules/react-vis/dist/style.css';
+import { HorizontalGridLines, LineSeries, makeVisFlexible, VerticalGridLines, XAxis, XYPlot, YAxis } from 'react-vis';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import orderBy from 'lodash/orderBy';
-import {isMobile} from 'react-device-detect';
+
 
 const formattedDate = (it) => moment(it.date).format('MM/DD/YYYY'); // Murica
-const mmdd = (it) => moment(it).format('DD-MM'); // Murica
+const mmdd = (it) => moment(it).format('DD-MM');
+
+const FlexXYPlot = makeVisFlexible(XYPlot);
 
-const Chart = ({ data }) => {
-    const orderedData = orderBy(data, it => moment(it.date).format('YYYYMMDD'), ['asc']);
-    const dataArr = Object.entries(
-        groupBy(orderedData, it => formattedDate(it)))
+const Line = ({ data }) => {
+    const orderedbyDateData = orderBy(data, it => moment(it.date).format('YYYYMMDD'), ['asc']);
+    const dataArr = Object.entries(groupBy(orderedbyDateData, it => formattedDate(it)))
         .reduce((acc, [date, data]) => {
             acc.push({
                 x: new Date(date),
@@ -20,15 +20,10 @@ const Chart = ({ data }) => {
             });
             return acc;
         }, []);
-
-
-
-    console.log(dataArr)
     return (
-        <XYPlot
-            xType="time"
-            width={isMobile ? 400 : 800}
-            height={500}>
+        <FlexXYPlot
+            margin={{ bottom: 50 }}
+            xType="time">
             <HorizontalGridLines/>
 
             <VerticalGridLines/>
@@ -38,8 +33,7 @@ const Chart = ({ data }) => {
             />
             <YAxis title="Todetut tapaukset"/>
             <LineSeries color={'red'} data={dataArr}/>
-        </XYPlot>
-
+        </FlexXYPlot>
     );
 };
-export default Chart;
\ No newline at end of file
+export default Line;
\ No newline at end of file
diff --git a/src/viz/Pie.js b/src/viz/Pie.js
new file mode 100644
index 0000000..88f54e7
--- /dev/null
+++ b/src/viz/Pie.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { makeVisFlexible, RadialChart } from 'react-vis';
+import groupBy from 'lodash/groupBy';
+
+import isoCodes from '../isoCodes.json';
+
+const colors = [
+    '#F66D44',
+    '#FEAE65',
+    '#E6F69D',
+    '#AADEA7',
+    '#64C2A6',
+    '#2D87BB',
+];
+
+const FlexRadialChart = makeVisFlexible(RadialChart);
+
+const Pie = ({ data }) => {
+    const groupedBySourceCountry = Object.entries(groupBy(data, 'infectionSourceCountry'))
+        .reduce((acc, [country, data], idx) => {
+            acc.push({
+                angle: data.length + 1,
+                label: isoCodes[country] ? isoCodes[country] : 'Tuntematon',
+                ...isoCodes[country] ? { color: colors[idx] } : { color: 'red' }
+            });
+            return acc;
+        }, []);
+    return (
+        <FlexRadialChart
+
+            colorType="literal"
+            data={groupedBySourceCountry}
+            showLabels={true}
+        />
+    );
+};
+export default Pie;
\ No newline at end of file
diff --git a/src/viz/index.js b/src/viz/index.js
new file mode 100644
index 0000000..c248b79
--- /dev/null
+++ b/src/viz/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import '../../node_modules/react-vis/dist/style.css';
+
+import Line from './Line';
+import Pie from './Pie';
+
+const Chart = ({ data }) => {
+    return (
+        <div>
+            <div style={{ height: '50vh' }}>
+                <Line data={data}/>
+            </div>
+            <div style={{ height: '50vh' }}>
+                <Pie data={data}/>
+            </div>
+        </div>
+    );
+};
+export default Chart;
\ No newline at end of file