I am wondering how i can add colors to my colorpleth map, based on values of a csv file. I simply don’t get the point where i match those values to the different states of the us.
This is the json i used to create the map:
Json
My csv/Excel File looks like this:
States Column
With another Column named Shootings/Mio and values, which should represent the values for the individual colouring
Here you find my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
</head>
<body>
<div class="home"></div>
<script src="./test_script.js"></script>
</body>
</html>
And here you find my JS
let fetchData = async () => {
dataset = d3.csv("Shootings.csv");
return dataset;
};
const width = 900;
const height = 600;
const svg = d3
.select(".home")
.append("svg")
.attr("width", width)
.attr("height", height);
const projection = d3
.geoAlbersUsa()
.translate([width / 2, height / 2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
const path = d3.geoPath().projection(projection);
fetchData().then((dataset) => {
var Shootings = dataset.map(function(d){
return d['ShootingsMio']
})
var states = dataset.map(function(d){
return d['state_y']})
var col_range_low = "#fff";
var col_range_high = "#002837";
var range_low = Math.min(...Shootings);
var range_high= Math.max(...Shootings);
console.log(Shootings)
console.log(range_low)
console.log(range_high)
var color = d3.scaleLinear()
.range([col_range_low, col_range_high])
.domain([range_low,range_high])
.interpolate(d3.interpolateLab);
const tooltip = d3
.select(".home")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
const g = svg.append("g");
d3.json(
"https://gist.githubusercontent.com/Bradleykingz/3aa5206b6819a3c38b5d73cb814ed470/raw/a476b9098ba0244718b496697c5b350460d32f99/us-states.json"
).then((world) => {
g.selectAll("path")
.data(world.features)
.enter()
.append("path")
.attr("d", path)
.attr("class", "state")
//.style("fill" How add filling based on the ShootingsMio column?
})
});
It looks like this momentanely
Server
If anyone could help me i would really appreciate that!