dataviz & research
Published
Edited
Jan 21, 2022
2 forks
Histogramme
charger des données
créer des bin
compter / bins
dessiner bar chart
data_normal = Array.from({length: 200}, d3.randomNormal(1, 1))
bin = d3.bin()
data = bin(data_normal)
histogram(data)
histogram = (data, w=200, h=100) => {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, w, h])
.attr("width", w)
.attr("height", h);
// créer les axes / scales
const xScale = d3.scaleLinear()
.domain([data[0].x0, data[data.length - 1].x1])
.range([0, w])
const yScale = d3.scaleLinear()
.domain([0, d3.max(data.map(d => d.length))])
.range([0, h])
svg.selectAll(".hist").data(data).enter().append("rect")
svg.selectAll("rect")
.attr("id", (d, i) => "hist_" + i)
.attr("class", "hist")
.attr("x", d => xScale(d.x0))
.attr("y", d => h - yScale(d.length))
.attr("height", d => yScale(d.length))
.attr("width", d => xScale(d.x1) - xScale(d.x0))
// créer les marques
return svg.node()
}
Geo map
topojson = require ("topojson-client@3")
world = d3.json("https://unpkg.com/world-atlas@1/world/50m.json")
countries = topojson.feature(world, world.objects.countries)
countries
d3geo = require('d3-geo-projection')
geo_map()
countries_codes = d3.csv("https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.csv")
countries_hash = new Map(countries_codes.map(d => [d['country-code'], d.name]))
geo_map = (w=400, h=400, g) => {
const svg =
g ||
d3
.create("svg")
.attr("viewBox", [0, 0, w, h])
.attr("width", w)
.attr("height", h);
let margin = { top: 10, right: 10, bottom: 10, left: 10 };
let width = w - margin.left - margin.right,
height = h - margin.top - margin.bottom;
let projection = d3geo.geoKavrayskiy7()
.fitSize([width*1.2, width*2/3*1.2], countries)
.translate([width*0.46, width*2/3*0.6])
let path = d3.geoPath(projection)
// world map
svg.append("g").selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.style('fill-opacity', 0.1)
.attr("name-country", d => {
return countries_hash.get(d.id)
})
.on("mouseenter", (e, d) => {
svg.append("text")
.attr("id", "legend")
.attr("x", e.offsetX)
.attr("y", e.offsetY)
.text(countries_hash.get(d.id))
}).on("mouseleave", (e, d) => {
svg.selectAll("#legend").remove()
})
return svg.node()
}
html`
<table border=1>
<tr>
<td>${geo_map()} Carte géographique</td>
<td>${histogram(data)} Histogramme</td>
<td>CCC</td>
</tr>
</table>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
