Public
Edited
Feb 3, 2023
2 forks
Importers
statemap = new Map(states.features.map(d => [d.id, d]))
statemesh = topojson.mesh(dataa, dataa.objects.data, (a, b) => a == b)
temp = topojson.feature(dataa, dataa.objects.data)
projection2 = d3.geoMercator().fitExtent([[0, 0], [width, height]], statemesh)
url2 = `https://minio.lab.sspcloud.fr/projet-cartiflette/diffusion/shapefiles-test/2022/REGION/crs4326/FRANCE_ENTIERE/metropole/topojson/raw.topojson`
dataa = d3.json(url2);
url = `https://minio.lab.sspcloud.fr/projet-cartiflette/diffusion/shapefiles-test/2022/COMMUNE/crs4326/departement/${dep}/topojson/raw.topojson`
projection = d3.geoMercator().fitExtent([[0, 0], [width, height]], communes)
communes = topojson.feature(data, data.objects.data)
borders = topojson.mesh(data, data.objects.data, (a, b) => a !== b)
max_pop = Math.log(Math.max(...communes.features.map(d => d.properties.POPULATION)))
min_pop = Math.log(Math.min(...communes.features.map(d => d.properties.POPULATION)))
min_value = Math.min(...data_filtered.map(d => d.value))
max_value = Math.max(...data_filtered.map(d => d.value))
viewof extrait = {
return Inputs.table(data_filtered, {height: 200, layout: "auto", maxWidth: 500})
}
import {Legend} from "@d3/color-legend"
import {Choropleth} from "271261860678801f"
import {Scrubber} from "@mbostock/scrubber"
N = d3.map(data_filtered, (d) => d.city_cog)
V = d3.map(data_filtered, d => d.value).map(d => d == null ? NaN : +d);
Im = new d3.InternMap(N.map((id, i) => [id, i]));
communes.features
If = communes.features.map(d => d.id);
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/choropleth
function Choropleth_test1(data, {
id = d => d.id, // given d in data, returns the feature id
value = () => undefined, // given d in data, returns the quantitative value
title, // given a feature f and possibly a datum d, returns the hover text
format, // optional format specifier for the title
scale = d3.scaleSequential, // type of color scale
domain, // [min, max] values; input of color scale
range = d3.interpolateBlues, // output of color scale
width = 640, // outer width, in pixels
height, // outer height, in pixels
projection, // a D3 projection; null for pre-projected geometry
features, // a GeoJSON feature collection
featureId = d => d.id, // given a feature, returns its id
borders, // a GeoJSON object for stroking borders
outline = projection && projection.rotate ? {type: "Sphere"} : null, // a GeoJSON object for the background
unknown = "#ccc", // fill color for missing data
fill = "white", // fill color for outline
stroke = "white", // stroke color for borders
strokeLinecap = "round", // stroke line cap for borders
strokeLinejoin = "round", // stroke line join for borders
strokeWidth, // stroke width for borders
strokeOpacity, // stroke opacity for borders
} = {}) {
// Compute values.
const N = d3.map(data, id);
const V = d3.map(data, value).map(d => d == null ? NaN : +d);
const Im = new d3.InternMap(N.map((id, i) => [id, i]));
const If = d3.map(features.features, featureId);
// Compute default domains.
if (domain === undefined) domain = d3.extent(V);
// Construct scales.
const color = scale(domain, range);
if (color.unknown && unknown !== undefined) color.unknown(unknown);
// Compute titles.
if (title === undefined) {
format = color.tickFormat(100, format);
title = (f, i) => `${f.properties.name}\n${format(V[i])}`;
} else if (title !== null) {
const T = title;
const O = d3.map(data, d => d);
title = (f, i) => T(f, O[i]);
}
// Compute the default height. If an outline object is specified, scale the projection to fit
// the width, and then compute the corresponding height.
if (height === undefined) {
if (outline === undefined) {
height = 400;
} else {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
height = dy;
}
}
// Construct a path generator.
const path = d3.geoPath(projection);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "width: 100%; height: auto; height: intrinsic;");
if (outline != null) svg.append("path")
.attr("fill", fill)
.attr("stroke", "currentColor")
.attr("d", path(outline));
const tooltip = svg.append("g").style("pointer-events", "none");
svg.append("g")
.selectAll("path")
.data(features.features)
.join("path")
.attr("fill", (d, i) => color(V[Im.get(If[i])]))
.attr("d", path)
.on("touchmove mousemove", function(event, d, i) {
tooltip.call(
callout,
`${d?.properties.NOM} ${V[Im.get(If[i])]}`
);
tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
d3.select(this)
.attr("stroke", "black")
.raise();
})
.on("touchend mouseleave", function() {
tooltip.call(callout, null);
d3.select(this)
.attr("stroke", null)
.lower();
});
if (borders != null) svg.append("path")
.attr("pointer-events", "none")
.attr("fill", "none")
.attr("stroke", stroke)
.attr("stroke-linecap", strokeLinecap)
.attr("stroke-linejoin", strokeLinejoin)
.attr("stroke-width", strokeWidth)
.attr("stroke-opacity", strokeOpacity)
.attr("d", path(borders));
return Object.assign(svg.node(), {scales: {color}});
}
const V = d3.map(data, value).map(d => d == null ? NaN : +d);
const Im = new d3.InternMap(N.map((id, i) => [id, i]));
const If = d3.map(features.features, featureId);
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.
