[D3js] Filtrer des valeurs sur csv

**Naunau75** · 15/06/2018, 18h09

Bonjour à tous,

je suis vraiment débutant et souhaiterais filtrer des données sur un csv.
Mon csv ressemble à cela :

prénom année dpt nombre
pierre 1980 75 32
pierre . 1982 . 32 . 100
pierre . 1980 . 66 . 45
alain . 1977 . 12 . 8
...

J'ai fait un filter sur mes données csv (Pierre et 1980) mais ça ne fonctionne pas.
Voici une partie du code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.department {
        cursor: pointer;
        stroke: black;
        stroke-width: .5px;
}
.department:hover {
        stroke: #555;
        stroke-width: 2px;
}
div.tooltip {
        position: absolute;
        opacity:0.8;
        z-index:1000;
        text-align:left;
        border-radius:4px;
        padding:8px;
        color:#fff;
        background-color:#000;
        font: 12px sans-serif;
        max-width: 300px;
}
#svg {
        display: block;
        margin: auto;
}
/* This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/). */
.YlOrRd .q0-9{fill:rgb(255,255,204)}
.YlOrRd .q1-9{fill:rgb(255,237,160)}
.YlOrRd .q2-9{fill:rgb(254,217,118)}
.YlOrRd .q3-9{fill:rgb(254,178,76)}
.YlOrRd .q4-9{fill:rgb(253,141,60)}
.YlOrRd .q5-9{fill:rgb(252,78,42)}
.YlOrRd .q6-9{fill:rgb(227,26,28)}
.YlOrRd .q7-9{fill:rgb(189,0,38)}
.YlOrRd .q8-9{fill:rgb(128,0,38)}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script type="text/javascript">
var width = 700, height = 550;
 
// Create a path object to manipulate geo data
var path = d3.geoPath();
 
// Define projection property
var projection = d3.geoConicConformal() // Lambert-93
        .center([2.454071, 46.279229]) // Center on France
        .scale(3000)
        .translate([width / 2 - 50, height / 2]);
 
path.projection(projection); // Assign projection to path object
 
// Create the DIV that will contain our map
var svg = d3.select('body').append("svg")
        .attr("id", "svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "YlOrRd");
 
// Append the group that will contain our paths
var deps = svg.append("g");
 
// Load GeoJSON data and run a function for each entry
d3.json('france.json', function(req, fr) {
        var features = deps
                .selectAll("path")
                .data(topojson.feature(fr, fr.objects.departements).features)
                .enter()
                .append("path")
                .attr('id', function(d) {return "d" + d.properties.code;})
                .attr("d", path);
 
var newData = data.filter(filterCriteria);
function filterCriteria(e) {
    return e.preusuel == 'Pierre' || e.annais == 1980;
}
 
        d3.csv("dpt2016.txt", function(csv) {
                // Quantile scales map an input domain to a discrete range, 0...max(population) to 1...9
                var quantile = d3.scaleQuantile()
                        .domain([0, Math.sqrt(d3.max(csv, function(e) { return +e.nombre; }))])
                .range(d3.range(9));
 
 
                var legend = svg.append('g')
                        .attr('transform', 'translate(525, 150)')
                        .attr('id', 'legend');
 
                legend.selectAll('.colorbar')
                        .data(d3.range(9))
                        .enter().append('svg:rect')
                        .attr('y', function(d) { return d * 20 + 'px'; })
                        .attr('height', '20px')
                        .attr('width', '20px')
                        .attr('x', '0px')
                        .attr("class", function(d) { return "q" + d + "-9"; });
 
                var legendScale = d3.scaleSqrt()
                .domain([0, d3.max(csv, function(e) { return +e.nombre; })])
                .range([0, 9 * 20]);
 
                var legendAxis = svg.append("g")
                        .attr('transform', 'translate(550, 150)')
                        .call(d3.axisRight(legendScale).ticks(6));
 
                csv.forEach(function(e,i) {
                        var tooltip = "<b>Département : </b>" + e.dpt + "<br>" + "<b>Nbre naissance : </b>" + e.nombre + "<br>";
                        if (e.nombre > 0) {
                                var tooltip = tooltip + "<b>Prénom : </b>" + e.preusuel + "<br>" + "<b>Année : </b>" + e.annais + "<br>";
                        }
                        d3.select("#d" + e.dpt)
                                .attr("class", function(d) {return "department q" + quantile(Math.sqrt(+e.nombre)) + "-9";})
                                .on("mouseover", function(d) {
                                        div.transition()
                                                .duration(200)
                                                .style("opacity", .9);
                                        div.html(tooltip)
                                                .style("left", (d3.event.pageX + 30) + "px")
                                                .style("top", (d3.event.pageY - 30) + "px");
                                })
                                .on("mouseout", function(d) {
                                        div.transition()
                                                .duration(500)
                                                .style("opacity", 0);
                                        div.html("")
                                                .style("left", "0px")
                                                .style("top", "0px");
                                });
                });
        });
 
});
 
// Append a DIV for the tooltip
var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
</script>

**psychadelic** · 16/06/2018, 02h33

Bon déjà pour pouvoir commencer, ton csv est bizarre

Mon csv ressemble à cela :

prénom année dpt nombre
pierre 1980 75 32
pierre . 1982 . 32 . 100
pierre . 1980 . 66 . 45
alain . 1977 . 12 . 8

Parce que à la base csv signifie Comma Separated Values, et il n'y a aucune virgules dans ton "csv".
Mettons que ce soient en fait des points, mais la encore la première ligne n'en présente aucun...