Published
Edited
May 15, 2019
Fork of Radar chart
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof curveSelect = select({
title: "Curve type",
options: curveTypes,
value: "curveCardinalClosed"
})
Insert cell
curveSelect
Insert cell
axesDomain = mydata11[0].map(d =>d.industry)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
radarLine = d3.lineRadial()
.curve(d3["curveCardinalClosed"])
.radius(d => rScale(d))
.angle((d, i) => i * angleSlice)
Insert cell
Insert cell
rScale = d3.scaleLinear()
.domain([0, maxValue])
.range([0, radius])
Insert cell
color = d3.scaleOrdinal()
.range(["#EDC951","#CC333F","#00A0B0"])
Insert cell
Insert cell
Insert cell
catogary = d => ["State", "Immigrant Owned Business", "Native Owned Business"][d]//useful
Insert cell
newdata=d3.csv("https://raw.githubusercontent.com/TianyuSu/Innovation-Immigration/master/Data_Radar/2017_radar.csv")
Insert cell
industry = ["Agriculture","Educational and health services","Other services","Leisure and hospitality"
,"Construction","Manufacturing","Transportation and utilities", "Financial activities","Professional and business services"
,"Wholesale & retail trade","Mining","Information"].sort(function(x,y){return d3.ascending(x, y)})
Insert cell
z = require('https://bundle.run/zebras@0.0.11')
Insert cell
//nstate = z.unique(z.getCol("State",newdata))
Insert cell
///////////test data set
data11= z.filter(r => r.State == "Connecticut", newdata)
Insert cell
Insert cell
Insert cell
Insert cell
indusSort = selectState[0].values.sort(function(x,y){
return d3.ascending(x.industry, y.industry)
})
Insert cell
indusSort[0].industry
Insert cell
newIndusSort = {
var all = []
for(var i = 0; i<industry.length; i++){
if(industry[i]==indusSort[i].industry){
var row = {}
row.indmaj2 =indusSort[i].indmaj2;
row.distriNative= indusSort[i].distriNative;
row.distrImmi = indusSort[i].distrImmi;
row.distr=indusSort[i].distr;
row.industry = industry[i];
row.State = indusSort[i].State;
}else{
var row = {}
row.indmaj2 =0;
row.distriNative= 0;
row.distrImmi = 0;
row.distr=0;
row.industry = industry[i];
row.State = indusSort[i].State;
} all.push(row);
}return all;
}
Insert cell
nest = d3.nest()
.key(function(d){
return d.State;
})
// .key(function(d){
// return d.industry;
// })
.entries(newdata)
Insert cell
Insert cell
Insert cell
//import {select} from "@jashkenas/inputs"
Insert cell
//import {curveTypes} from "@palewire/d3-curves-inputs"
Insert cell
Insert cell
Insert cell

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.
Learn more