Verified Commit a42308fc authored by Bastien Durel's avatar Bastien Durel
Browse files

dataviz

parent b76faa89
/covid.csv
/covid_corrected.csv
/login.inc.php
<?php
$port = 5432;
if (file_exists('login.inc.php')) {
include_once 'login.inc.php';
}
else
die('Cannot connect');
$dsn = "pgsql:host=$host;port=$port;dbname=$db";
//var_dump($dsn);
$conn = new PDO($dsn, $user, $password,
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
$sql = "select * from covid_agg order by jour";
$rs = $conn->prepare($sql);
$rs->execute();
$array = [];
while ($row = $rs->fetch(PDO::FETCH_ASSOC)) {
$array[] = $row;
}
echo json_encode($array);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<title>Stats COVID Santé publique France</title>
<style>
#svg {
display: block;
margin: auto;
}
#chart {
margin-top: 20px;
border: 1px solid #DEDEDE;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.line2 {
stroke: red;
}
.horizontalGrid {
fill : none;
shape-rendering : crispEdges;
stroke : lightgrey;
stroke-width : 1px;
}
.verticalLine {
fill : none;
shape-rendering : crispEdges;
stroke : lightgrey;
stroke-width : 1px;
}
.tooltip {
position: absolute;
opacity:0.8;
z-index:1000;
text-align:left;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
padding:8px;
color:#fff;
background-color:#000;
font: 12px sans-serif;
max-width: 300px;
height: 53px;
}
</style>
</head>
<body>
<div id="container">
<div id="chart"></div>
</div>
<script>
const margin = {top: 20, right: 30, bottom: 30, left: 60},
width = document.getElementById("container").offsetWidth * 0.95 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
const parseTime = d3.timeParse("%Y-%m-%d");
const dateFormat = d3.timeFormat("%Y-%m-%d");
const x = d3.scaleTime()
.range([0, width]);
const y = d3.scaleLinear()
.range([height, 0]);
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.rea));
const line2 = d3.line()
.x(d => x(d.date))
.y(d => y(d.hosp));
const svg = d3.select("#chart").append("svg")
.attr("id", "svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var map = {};
d3.json("data.php").then(function(data) {
data.forEach(function(d) {
d.date = parseTime(d.jour);
d.hosp = +d.hosp;
d.rea = +d.rea;
d.dc = +d.dc;
map[d.date] = d;
});
x.domain(d3.extent(data, d => parseTime(d.jour)));
y.domain([0, d3.max(data, d => d.rea)]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text("Pts");
svg.selectAll("y axis").data(y.ticks(10)).enter()
.append("line")
.attr("class", "horizontalGrid")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", d => y(d))
.attr("y2", d => y(d));
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("path")
.datum(data)
.attr("class", "line line2")
.attr("d", line2);
});
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.attr("x", width - 300)
.attr("y", 0)
.style("opacity", 0);
var verticalLine = svg.append("line")
.attr("class", "verticalLine")
.attr("x1",0)
.attr("y1",0)
.attr("x2",0)
.attr("y2",height)
.style("opacity", 0);
d3.select("#chart").on("mousemove", function() {
var mouse_x = d3.mouse(this)[0];
var mouse_y = d3.mouse(this)[1];
if (mouse_x < margin.left || mouse_x > (width + margin.left) || mouse_y < margin.top || mouse_y > (400 - margin.bottom)) {
return ;
}
var selectedDate = x.invert(mouse_x - margin.left);
verticalLine.attr("x1", mouse_x - margin.left);
verticalLine.attr("x2", mouse_x - margin.left);
verticalLine.style("opacity", 1);
selectedDate.setHours(0,0,0,0);
var entry = map[selectedDate];
if (typeof entry === "undefined") {
return ;
}
div.style("opacity", .9);
div.style("left", (d3.event.pageX + 30) + "px")
.style("top", (d3.event.pageY - 60) + "px")
.html("<b>Date : </b>" + dateFormat(entry.date) + "<br>"
+ "<b>Morts : </b>" + entry.dc + "<br>"
+ "<b>Réanimations : </b>" + entry.rea + "<br>"
+ "<b>Hospitalisations : </b>" + entry.hosp + "<br>");
}).on("mouseout", function() {
var mouse_x = d3.mouse(this)[0];
var mouse_y = d3.mouse(this)[1];
// Si la position de la souris est en dehors de la zone du graphique, on masque la ligne et le tooltip
if (mouse_x < margin.left || mouse_x > (width + margin.left) || mouse_y < margin.top || mouse_y > (400 - margin.bottom)) {
div.style("opacity", 0);
verticalLine.style("opacity", 0);
}
});
</script>
</body>
</html>
<?php
$host = 'postgresql.host';
$user = 'pg_user';
$password = 'pg_pw';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment