Base Scores
Score = FileAttachment("Score@2.geojson").json()
Arizona = FileAttachment("Arizona Boundary 2nd.geojson").json()
d3 = require("d3@6")
chart = {
const width = 1075,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], Arizona);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Score.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.attr("fill", d => color(d.properties.Base_Base))
.style('fill-opacity','.5')
.style("stroke-width", "1")
.style("stroke", "#ccc")
svg.selectAll('text')
.data(Score.features)
.enter()
.append('text')
.attr('x','160')
.attr('y',function(d,i){return i*15+10})
.attr('font-size','.65em')
.attr('text-anchor','end')
.text(function(d){return d.properties.Name_Name})
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Arizona.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "white")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke", "#ccc")
return svg.node();
}
color = d3.scaleQuantize([4, 15], d3.schemeYlOrBr[9])
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.
