Public
Edited
May 11
symbolLegend = plot({
autosize: "pad",
data: [
{
name: "values",
values: circleLabels
}
],
scales: [
{
name: "symbolColor",
type: "ordinal",
domain: {data: "values", field: "data"},
range: Greens
},
{
name: "symbolSize",
type: "ordinal",
domain: circleLabels,
range: sizeArrayForLegend
}
],
legends: [Object.assign({offset: 0}, symbolLegendDef)]
})
symbolLegendDef = {
return {
type: "symbol",
title: "Total Animal Units by Facility",
fill: "symbolColor",
size: "symbolSize",
direction: 'Horizontal',
columns: undefined,
rowPadding: 5,
columnPadding: 5,
clipHeight: undefined,
titleOrient: 'Top',
symbolStrokeColor: '#000',
symbolStrokeWidth: 0.4
};
}
height = 525
width = 850
path_points = d3.geoPath().projection(newprojection)
path_basemap = d3.geoPath().projection(newprojection)
format = d3.format("1")
//proportional symbols
//radius = d3.scaleSqrt([0, d3.max(attribute)], [0, 3])
radius = d3.scaleSqrt()
.domain([300, 999.9]) // from your data
.range([0, 7]); // in pixels
//radius = d3.scaleThreshold()
// .domain(naturalbreaks)
// .range(radiusArray)
// sizeArrayForLegend = Array.from(radiusArray, d=>Math.PI*Math.pow(d, 2))
sizeArrayForLegend = circleLabels.map(d => Math.pow(radius(d), 2) * Math.PI)
// radiusArray = [5, 7, 12, 17, 22]
radiusArray = Array.from(naturalbreaks.slice(1), d => format(Math.pow(d, 2)))
circleLabels = Array.from(naturalbreaks.slice(1), d => format(Math.pow(d, 2)))
colors = d3.scaleThreshold()
.domain(naturalbreaks)
.range(Greens)
Greens = ['#','#','#','#','#','#']
naturalbreaks = simple.ckmeans(attribute, 6).map(v => v.pop())
d3.max(attribute)
attribute = Array.from(points.features, d=>Math.sqrt(d.properties[animalunits]))
filteredPoints = {
return {
...points,
features: points.features.filter(d => d.properties.states_sim !== "District of Columbia")
};
}
csv_data = d3.csvParse(await FileAttachment("md_afos_attributes.csv").text(),({FacilityID, TotalAnima}) => [FacilityID, +TotalAnima])
animalunits = "TotalAnima"
idName = "FacilityID"
//import the point data (geojson)
points = FileAttachment("md_afos.json").json()
//import the polygon base map data
basepolygons = FileAttachment("iacounty_wgs84.json").json()
newd3 = require("d3@5")
import {legend} from "@d3/color-legend"
newsimple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
newformat = d => `${d}%`
counties = FileAttachment("iacounty_wgs84.json").json()
county_Features = topojson.feature(counties, counties.objects.iacounty_wgs84)
newcsv_data = newd3.csvParse(await FileAttachment("iacounties.csv").text(),({NAMELSAD, AAR}) => [NAMELSAD, +AAR])
data = Object.assign(new Map(newcsv_data), {title: "Age Adjusted Rate of Colorectal Cancer Deaths"})
AARChoro = Array.from(newcsv_data.values(), d => d[1])
PuRd = [newd3.color("#f1eef6"), newd3.color("#d7b5d8"), newd3.color("#df65b0"), newd3.color("#dd1c77"),newd3.color("#980043")]
newnaturalbreaks = newsimple.ckmeans(AARChoro, PuRd.length).map(v => v.pop())
//choroquantile = d3.scaleQuantile()
// .domain(AARChoro)
// .range(["#edf8b1", "#7fcdbb", "#2c7fb8"])
//more information on sequential scales: https://observablehq.com/@d3/sequential-scales
// color = newd3.scaleSequentialQuantile([...data.values()], newd3.interpolateBlues)
// color = newd3.scaleQuantile()
// .domain(PctWhite)
// .range()
//color = newd3.scaleQuantile()
// .domain(choroquantile)
// .range(["#edf8b1", "#7fcdbb", "#2c7fb8"])
color = newd3.scaleQuantile()
.domain(AARChoro) // AARChoro should be an array of numbers
.range(["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"])
newwidth = 850
newheight = 525
margin = 100
//Rotate the map sets the longitude of origin for our UTM Zone 15N projection.
//projection = newd3.geoTransverseMercator().rotate([100,0]).fitExtent([[80, 80], [newwidth, newheight]], State_Features);
//d3 reference for projections: https://d3js.org/d3-geo
//use the following url for specific projection settings: https://github.com/veltman/d3-stateplane
//Use this code to set up the map projection (if different than geographic projection)
newprojection = newd3.geoAlbers().fitExtent([[margin, margin], [newwidth, newheight]], county_Features)
//projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], Counties)
//Using a path generator to project geometry onto the map
newpath = newd3.geoPath().projection(newprojection);
choropleth = {
const svg = newd3.create("svg")
.attr("viewBox", [45, 20, width, height])
.style("background-color", "white");
svg.append("g")
.attr("transform", "translate(550,41)")
.append(() =>
legend({
color: color,
title: data.title,
width: 250,
tickFormat: ".1f"
})
);
svg.append("g")
.selectAll("path")
.data(county_Features.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.75)
.attr("fill", d => color(data.get(d.properties.NAMELSAD)))
.attr("d", newpath)
.append("title")
.text(d => "AAR : " + data.get(d.properties.NAMELSAD));
svg.append("g")
svg.append("g")
.selectAll("circle")
.data(filteredPoints.features
.map(d => (d.value = d.properties[animalunits], d)) // or Math.sqrt(...) if needed
.sort((a, b) => b.value - a.value))
//.data(filteredPoints.features
//.map(d => (d.value = Math.sqrt(d.properties[animalunits]), d))
//.sort((a, b) => b.value - a.value))
.join("circle")
.attr("transform", d => `translate(${path_points.centroid(d)})`)
.attr("r", d => radius(d.value))
.attr("fill", d => colors(d.value))
.attr("fill-opacity", 0.08)
.attr("stroke", "#D17FDA")
.attr("stroke-width", 0.3)
.append("title")
.text(d => `${d.properties[idName]} : ${format(d.properties[animalunits])}`);
const symLegendNode = symbolLegend.cloneNode(true); // clone Plot SVG
const symLegendGroup = newd3.select(symLegendNode).select("g");
svg.append("g")
.attr("transform", "translate(160,45)") // adjust position as needed
.node()
.appendChild(symLegendGroup.node());
return svg.node();
}
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.
