The avatar for @attharmirza
Atthar Mirza
Older brother. Graphics reporter.
Published
Edited
Sep 24, 2020
2 stars
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dimensions = {
let dms = {
width: width,
height: 500,
marginTop: 50,
marginLeft: 50
};

dms.marginBottom = dms.marginTop;
dms.marginRight = dms.marginLeft;

dms.chartWidth = d3.min([400, dms.width - dms.marginLeft - dms.marginRight]);
dms.chartHeight = dms.height - dms.marginTop - dms.marginBottom;

dms.spikeHeight = 30;
dms.spikeWidth = 12;

return dms;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mapWards = {
let attached = await FileAttachment("wards-wgs84.topojson").json();
let map = topojson.feature(attached, attached.objects["Ward_from_2012"]);

return map;
}
Insert cell
projection = d3
.geoAlbersUsa()
.fitSize(
[
dimensions.width - dimensions.marginLeft - dimensions.marginRight,
dimensions.height - dimensions.marginTop - dimensions.marginBottom
],
mapWards
)
// .translate([10,10])
Insert cell
path = d3.geoPath(projection)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
color = d3
.scaleQuantize()
.domain([0, 2])
.range([colorBright, colorLight, colorGray])
Insert cell
chloropleth = d3
.scaleSequential()
// .domain([d3.min(dataRace.values()), d3.max(dataRace.values())])
.domain([0, 1])
.interpolator(d3.interpolate(colorLight, colorBright))
Insert cell
years = d3
.scaleLinear()
.domain([2012, 2019])
.range([0, dimensions.chartWidth])
Insert cell
yearsBand = d3
.scaleBand()
.domain([2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019])
.range([0, dimensions.chartWidth])
.padding(0.2)
Insert cell
population = d3
.scaleLinear()
.domain([
0,
dataTotalArrestsAndPopulationPerYear.get(comparisonYear).population.black +
dataTotalArrestsAndPopulationPerYear.get(comparisonYear).population.white
])
.range([0, dimensions.chartWidth])
Insert cell
arrests = d3
.scaleLinear()
.domain([0, 4000])
.range([dimensions.chartHeight, 0])
Insert cell
arrestsPerCapita = d3
.scaleLinear()
// .domain([0, d3.max(dataArrestsPerWard(false, "black").values())])
.domain([0, d3.max(dataAveragedArrestsPerWardPerCapita("total").values())])
// .domain([0,500])
.range([0, dimensions.spikeHeight])
Insert cell
percentage = d3
.scaleLinear()
.domain([0, 100])
.range([dimensions.chartHeight, 0])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more