diff --git a/api/src/Controller/RepartitionDesVentesParRegion.php b/api/src/Controller/RepartitionDesVentesParRegion.php
new file mode 100644
index 0000000000000000000000000000000000000000..d6ab8456f4e9ed4a9c3581ae8b8742eaa5ae7f52
--- /dev/null
+++ b/api/src/Controller/RepartitionDesVentesParRegion.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Controller;
+
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+/**
+ * @Route("/repartition_des_ventes_par_region", name="repartition_des_ventes_par_region")
+ */
+
+class   RepartitionDesVentesParRegion extends AbstractController{
+  /**
+     * Entity Manager
+     */
+    private $em;
+    /**
+     * Creates a new instance of NombreDeVenteParJMA
+     */
+    public function __construct(EntityManagerInterface $em) {
+        $this->em = $em;
+    }
+    
+    public function __invoke(Request $data) { 
+   
+        $anneeFiltre = $data->query->get('anneeFiltre');
+        $query = "  SELECT
+                        COUNT(valeurs_fonciere.nature_mutation) AS nombre_de_vente,
+                         valeurs_fonciere.region AS region
+                    FROM
+                        App:ValeursFonciere AS valeurs_fonciere
+                    WHERE
+                        lower(valeurs_fonciere.nature_mutation) = 'vente'
+                        AND
+                        TO_CHAR(valeurs_fonciere.date_mutation, 'YYYY') = '$anneeFiltre'
+                    GROUP BY 
+                    region
+                   ORDER BY
+                   region";
+                
+                    
+        $nombreVentes = $this->em->createQuery($query)->getResult();
+        foreach ($nombreVentes as &$nombreVente){
+            $nombreVente['nombre_de_vente'] = intval($nombreVente['nombre_de_vente']);
+            $nombreVente['region'] =  $nombreVente["region"];
+        }
+        $res = new JsonResponse(
+            $nombreVentes,
+            Response::HTTP_OK
+        );
+        return $res;
+    }
+}
\ No newline at end of file
diff --git a/api/src/Entity/ValeursFonciere.php b/api/src/Entity/ValeursFonciere.php
index 47f5f5dfb44181e587400066603283b31ab84e6b..6023bdb337ca004a508dbf548c123e8aeee006ff 100644
--- a/api/src/Entity/ValeursFonciere.php
+++ b/api/src/Entity/ValeursFonciere.php
@@ -84,6 +84,26 @@ use Doctrine\ORM\Mapping as ORM;
  *         "route_name"="nombre_devente_parJMA",
  *         "controller"=NombreDeVenteParJMA::class,
  *         "pagination_enabled"=false,
+ *       },
+ *  "repartition_des_ventes_par_region"={
+ *      "method"="GET",
+ *      "openapi_context"={
+ *             "read"=false,
+ *              "parameters"={
+ *                  {
+ *                      "in"="query",
+ *                      "name"="anneeFiltre",
+ *                      "required"= true,
+ *                      "schema"= {
+ *                          "type"="number",
+ *                      },
+ *                      "example"="2016"
+ *                  }
+ *              }
+ *           },
+ *         "route_name"="repartition_des_ventes_par_region",
+ *         "controller"=RepartitionDesVentesParRegion::class,
+ *         "pagination_enabled"=false,
  *       }
  * })
  * @ORM\Entity(repositoryClass="App\Repository\ValeursFonciereRepository")
diff --git a/client/src/Helpers/PieSVG.js b/client/src/Helpers/PieSVG.js
new file mode 100644
index 0000000000000000000000000000000000000000..50089f3f31ba192ae29391a19a9f84458df359fc
--- /dev/null
+++ b/client/src/Helpers/PieSVG.js
@@ -0,0 +1,50 @@
+import React from "react";
+import * as d3 from "d3";
+
+const Arc = ({ data, index, createArc, colors, format }) => (
+  <g key={index} className="arc">
+    <path className="arc" d={createArc(data)} fill={colors(index)} />
+    <text
+      transform={`translate(${createArc.centroid(data)})`}
+      textAnchor="middle"
+      alignmentBaseline="middle"
+      fill="white"
+      fontSize="10"
+    >
+      {format(data.value)}
+    </text>
+  </g>
+);
+
+const Pie = props => {
+  const createPie = d3
+    .pie()
+    .value(d => d.value)
+    .sort(null);
+  const createArc = d3
+    .arc()
+    .innerRadius(props.innerRadius)
+    .outerRadius(props.outerRadius);
+  const colors = d3.scaleOrdinal(d3.schemeCategory10);
+  const format = d3.format(".2f");
+  const data = createPie(props.data);
+
+  return (
+    <svg width={props.width} height={props.height}>
+      <g transform={`translate(${props.outerRadius} ${props.outerRadius})`}>
+        {data.map((d, i) => (
+          <Arc
+            key={i}
+            data={d}
+            index={i}
+            createArc={createArc}
+            colors={colors}
+            format={format}
+          />
+        ))}
+      </g>
+    </svg>
+  );
+};
+
+export default Pie;
diff --git a/client/src/components/valeursfonciere/ Repartitiondesventesparregion.js b/client/src/components/valeursfonciere/ Repartitiondesventesparregion.js
new file mode 100644
index 0000000000000000000000000000000000000000..fb8182427a3f99e503aaf4e948add9583403207e
--- /dev/null
+++ b/client/src/components/valeursfonciere/ Repartitiondesventesparregion.js	
@@ -0,0 +1,92 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import * as d3 from "d3";
+import PieSVG from "../../Helpers/PieSVG";
+
+class  Repartitiondesventesparregion extends React.Component {
+	constructor(props) {
+	  super(props);
+  
+	  this.state = {annee: '2018',data: []};
+	  
+	};
+  
+	componentWillMount(){
+		console.log('Je suis appeler en premier!');
+	  }
+
+	  getData(){
+		fetch(`https://${document.domain}:8443/repartitionDesVentesParRegion?anneeFiltre=${this.state.annee}`)
+		  .then(response => {
+			if (response.ok) {
+			  const data = response.json()
+			  return data;
+			} else {
+			  throw new Error('Something went wrong ...');
+			}
+		  })
+		  .then(data => {
+			this.setState({data: data });
+		  })
+		  .catch(error => console.log("error"));
+	  }
+	
+	  componentDidMount(){
+		this.timerID = setInterval(
+			() => this.getData(),
+			1000
+		  );
+	
+	  }
+
+	handleChange(event) {
+	  this.setState({ annee: event.target.value});
+	};
+
+	render() {
+
+		function parseData(data) {
+			var arr = [];
+			data.map(function (thisList){
+				arr.push({
+					nombre_de_vente: thisList.nombre_de_vente | 0,
+				    dat : thisList.dat 
+				});
+			})
+			return arr;
+		}
+
+		const c  =parseData(this.state.data)
+
+		  const generateData = () =>
+		   c.map((item, index) => ({
+			  index: index,
+			  date: new Date(item.dat).toLocaleDateString('fr-FR', {day: 'numeric', year: 'numeric', month: 'long' }),
+			  value: item.nombre_de_vente
+			}));
+		   
+		  const data = generateData();
+		  console.log(data)
+		  
+	  return (
+	    <div>
+		  <div>
+        
+		  <input type="text" onChange={this.handleChange.bind(this)}/>
+
+        <span className="label">SVG Elements</span>
+          <PieSVG
+          data={data}
+          width={200}
+          height={200}
+          innerRadius={60}
+          outerRadius={100}
+        />
+      </div>
+		  		
+      </div>
+	  );
+	}
+  }
+  
+  export default  Repartitiondesventesparregion;
\ No newline at end of file