chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 980, 710]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend(color, Crimes));
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("fill", d => {
if (data.get(d.properties.name) != undefined ) {
return color(data.get(d.properties.name))}
else {return "gray"}
})
.attr("d", path)
.on("click", clicked)
.on("mousemove", function(event, d) {
tooltip.style("visibility", "hidden");
/*return tooltip
.style("top", event.pageY - 10 + "px")
.style("left", event.pageX + 10 + "px");*/
})
.append("title")
.text(d => `${d.properties.name}
${format(data.get(d.properties.name))}`);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
svg.append("g")
.attr("fill", "brown")
.attr("fill-opacity", 0.5)
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.selectAll("circle")
.data(data_unemp
.filter(d => d.position)
.sort((a, b) => d3.descending(a.value, b.value)))
.join("circle")
.attr("transform", d => `translate(${d.position})`)
.attr("r", d => radius(d.value))
.append("title")
.text(d => `${d.title}
${format(d.value)}`);
function clicked(event, d) {
console.log("here")
if (data.get(d.properties.name) != undefined ) {
var state_name = d.properties.name;
//console.log(d.properties.name, "translate(" + p[0] + "," + p[1] + ")")
console.log("I'm in" ,d.properties.name)
var wanted = data1.filter( function(item){return (item.State==d.properties.name);} )[0];
console.log("Won", wanted)
var label_list = ['murder', 'Robbery', 'Aggravated_assault', "Property_crime" , "Burglary", "rape", "theft"]
var value_list = label_list.map(function (value, label) {
return wanted[value];
})
console.log("parfait", value_list)
const myDiv = document.getElementById("svg-tooltip");
//let canvas = DOM.canvas(200, 200);
//let context = canvas.getContext("2d");
//image.onload = function() {}
myDiv.innerHTML = "";
//myDiv.append(canvas);
myDiv.append(pie_chart(label_list, value_list, state_name));
tooltip.style("visibility", "visible")
.style("top", event.pageY - 10 + "px")
.style("left", event.pageX + 10 + "px");
}
else {
const myDiv = document.getElementById("svg-tooltip");
tooltip.style("visibility", "visible")
.style("top", event.pageY - 10 + "px")
.style("left", event.pageX + 10 + "px")
.style("background-color", "white")
.html("Sorry, no data is available<br> for this state yet.");} }
return svg.node();
}
data_unemp = d3.csvParse(await files[year-2015].text(), ({State, Unemployment_rate}) => [State, +Unemployment_rate]).map(([State, Unemployment_rate]) => {
const id = get_id(State);
const feature = features.get(id);
return {
id,
position: feature && path.centroid(feature),
title: feature && feature.properties.name,
value: +Unemployment_rate
};
})
function get_id(state){
var wanted = data1.filter( function(item){return (item.State== state);} )[0];
var a = wanted.id;
if (parseInt(a) > 9){return a}
else{return 0+a}
}
radius = d3.scaleSqrt([0, d3.max(data, d => d.value)], [0, 40])
features = new Map(topojson.feature(us, us.objects.states).features.map(d => [d.id, d]))
data_filter_comparaison = d3.csvParse(await files[year_crimes_comparaison-2015].text(), d3.autoType)
//color = d3.scaleQuantize([1, 10], d3.schemeReds[6])
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.
