times = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00","06:00","07:00","08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00","21:00", "22:00", "23:00"]
years = [2013, 2014, 2015, 2016, 2017]
allQuery = ({
'$select' : `CASE( (violation_time like '12:__A'), "00:00", (violation_time like '01:__A'), "01:00", (violation_time like '02:__A'), "02:00", (violation_time like '03:__A'), "03:00", (violation_time like '04:__A'), "04:00", (violation_time like '05:__A'), "05:00", (violation_time like '06:__A'), "06:00, (violation_time like '07:__A'), "07:00", (violation_time like '08:__A'), "08:00", (violation_time like '09:__A'), "09:00",(violation_time like '10:__A'), "10:00", (violation_time like '11:__A'), "11:00", (violation_time like '12:__P'), "12:00", (violation_time like '01:__P'), "13:00", (violation_time like '02:__P'), "14:00", (violation_time like '03:__P'), "15:00", (violation_time like '04:__P'), "16:00", (violation_time like '05:__P'), "17:00", (violation_time like '06:__P'), "18:00", (violation_time like '07:__P'), "19:00", (violation_time like '08:__P'), "20:00", (violation_time like '09:__P'), "21:00", (violation_time like '10:__P'), "22:00", (violation_time like '11:__P'), "23:00") as time, count(*) as count`,
'$group': 'time',
'$where': "(violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A' OR violation_time like '06:__A' OR violation_time like '07:__A' OR violation_time like '08:__A' OR violation_time like '09:__A' OR violation_time like '10:__A' OR violation_time like '11:__A' OR violation_time like '12:__P' OR violation_time like '01:__P' OR violation_time like '02:__P' OR violation_time like '03:__P' OR violation_time like '04:__P' OR violation_time like '05:__P' OR violation_time like '06:__P' OR violation_time like '07:__P' OR violation_time like '08:__P' OR violation_time like '09:__P' OR violation_time like '10:__P' OR violation_time like '11:__P') AND (issue_date like '__/__/2012')"
})
testUrl = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(allQuery)
yearText = (await fetch(testUrl, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
query = ({
'$select' : `CASE((violation_time like '12:__A'), "00:00", (violation_time like '01:__A'), "01:00", (violation_time like '02:__A'), "02:00", (violation_time like '03:__A'), "03:00", (violation_time like '04:__A'), "04:00", (violation_time like '05:__A'), "05:00", (violation_time like '06:__A'), "06:00",(violation_time like '07:__A'), "07:00", (violation_time like '08:__A'), "08:00",(violation_time like '09:__A'), "09:00" ,(violation_time like '10:__A'), "10:00",(violation_time like '11:__A'), "11:00", (violation_time like '12:__P'), "12:00", (violation_time like '01:__P'), "13:00", (violation_time like '02:__P'), "14:00", (violation_time like '03:__P'), "15:00", (violation_time like '04:__P'), "16:00", (violation_time like '05:__P'), "17:00", (violation_time like '06:__P'), "18:00", (violation_time like '07:__P'), "19:00", (violation_time like '08:__P'), "20:00", (violation_time like '09:__P'), "21:00", (violation_time like '10:__P'), "22:00", (violation_time like '11:__P'), "23:00") as time, count(*) as count`,
'$group': 'time',
'$where' : "(violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A' OR violation_time like '06:__A' OR violation_time like '07:__A' OR violation_time like '08:__A' OR violation_time like '09:__A' OR violation_time like '10:__A' OR violation_time like '11:__A' OR violation_time like '12:__P' OR violation_time like '01:__P' OR violation_time like '02:__P' OR violation_time like '03:__P' OR violation_time like '04:__P' OR violation_time like '05:__P' OR violation_time like '06:__P' OR violation_time like '07:__P' OR violation_time like '08:__P' OR violation_time like '09:__P' OR violation_time like '10:__P' OR violation_time like '11:__P') AND (issue_date like '__/__/2012')"
})
url = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(query)
yearZero = (await fetch(url, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
query1 = ({
'$select' : `CASE((violation_time like '12:__A'), "00:00", (violation_time like '01:__A'), "01:00", (violation_time like '02:__A'), "02:00", (violation_time like '03:__A'), "03:00", (violation_time like '04:__A'), "04:00", (violation_time like '05:__A'), "05:00", (violation_time like '06:__A'), "06:00",(violation_time like '07:__A'), "07:00", (violation_time like '08:__A'), "08:00",(violation_time like '09:__A'), "09:00" ,(violation_time like '10:__A'), "10:00",(violation_time like '11:__A'), "11:00", (violation_time like '12:__P'), "12:00", (violation_time like '01:__P'), "13:00", (violation_time like '02:__P'), "14:00", (violation_time like '03:__P'), "15:00", (violation_time like '04:__P'), "16:00", (violation_time like '05:__P'), "17:00", (violation_time like '06:__P'), "18:00", (violation_time like '07:__P'), "19:00", (violation_time like '08:__P'), "20:00", (violation_time like '09:__P'), "21:00", (violation_time like '10:__P'), "22:00", (violation_time like '11:__P'), "23:00") as time, count(*) as count`,
'$group': 'time',
'$where' : "(violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A' OR violation_time like '06:__A' OR violation_time like '07:__A' OR violation_time like '08:__A' OR violation_time like '09:__A' OR violation_time like '10:__A' OR violation_time like '11:__A' OR violation_time like '12:__P' OR violation_time like '01:__P' OR violation_time like '02:__P' OR violation_time like '03:__P' OR violation_time like '04:__P' OR violation_time like '05:__P' OR violation_time like '06:__P' OR violation_time like '07:__P' OR violation_time like '08:__P' OR violation_time like '09:__P' OR violation_time like '10:__P' OR violation_time like '11:__P') AND (issue_date like '__/__/2013')"
})
//
// " issue_date like '__/__/2013' AND (violation_time like '10:__P' OR violation_time like '11:00P' OR violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A') AND violation like 'PHTO SCHOOL ZN SPEED VIOLATION'
url1 = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(query1)
yearOneInput = (await fetch(url1, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
obj1 = yearOneInput.slice()
yearOneMap = new Map(obj1.map(d => [d.time, d.count]))
query2 = ({
'$select' : `CASE((violation_time like '12:__A'), "00:00", (violation_time like '01:__A'), "01:00", (violation_time like '02:__A'), "02:00", (violation_time like '03:__A'), "03:00", (violation_time like '04:__A'), "04:00", (violation_time like '05:__A'), "05:00", (violation_time like '06:__A'), "06:00",(violation_time like '07:__A'), "07:00", (violation_time like '08:__A'), "08:00",(violation_time like '09:__A'), "09:00" ,(violation_time like '10:__A'), "10:00",(violation_time like '11:__A'), "11:00", (violation_time like '12:__P'), "12:00", (violation_time like '01:__P'), "13:00", (violation_time like '02:__P'), "14:00", (violation_time like '03:__P'), "15:00", (violation_time like '04:__P'), "16:00", (violation_time like '05:__P'), "17:00", (violation_time like '06:__P'), "18:00", (violation_time like '07:__P'), "19:00", (violation_time like '08:__P'), "20:00", (violation_time like '09:__P'), "21:00", (violation_time like '10:__P'), "22:00", (violation_time like '11:__P'), "23:00") as time, count(*) as count`,
'$group': 'time',
'$where' : "(violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A' OR violation_time like '06:__A' OR violation_time like '07:__A' OR violation_time like '08:__A' OR violation_time like '09:__A' OR violation_time like '10:__A' OR violation_time like '11:__A' OR violation_time like '12:__P' OR violation_time like '01:__P' OR violation_time like '02:__P' OR violation_time like '03:__P' OR violation_time like '04:__P' OR violation_time like '05:__P' OR violation_time like '06:__P' OR violation_time like '07:__P' OR violation_time like '08:__P' OR violation_time like '09:__P' OR violation_time like '10:__P' OR violation_time like '11:__P') AND (issue_date like '__/__/2014')"
})
url2 = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(query2)
yearTwoInput = (await fetch(url2, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
maxYearTwo = d3.max(yearTwoInput, d=> d.count)
pieColor2 =d3.scaleDiverging()
.domain([netYearTwo[0], 3000, netYearTwo[1]])
.range(['lime', 'orange', 'red'])
.unknown("lightgray")
legend({color: pieColor2})
obj2 = yearTwoInput.slice()
yearTwoMap = new Map(obj2.map(d => [d.time, d.count]))
yearTwo = {
const final = [];
for(var i = 0; i < times.length;i++){
const object = {};
object['time'] = times[i];
object['area'] = 10;
if(yearTwoMap.get(times[i])){
object['count'] = yearTwoMap.get(times[i]);
}
else {
object['count'] = 0;
}
final.push(object);
}
return final;
}
query3 = ({
'$select' : `CASE((violation_time like '12:__A'), "00:00", (violation_time like '01:__A'), "01:00", (violation_time like '02:__A'), "02:00", (violation_time like '03:__A'), "03:00", (violation_time like '04:__A'), "04:00", (violation_time like '05:__A'), "05:00", (violation_time like '06:__A'), "06:00",(violation_time like '07:__A'), "07:00", (violation_time like '08:__A'), "08:00",(violation_time like '09:__A'), "09:00" ,(violation_time like '10:__A'), "10:00",(violation_time like '11:__A'), "11:00", (violation_time like '12:__P'), "12:00", (violation_time like '01:__P'), "13:00", (violation_time like '02:__P'), "14:00", (violation_time like '03:__P'), "15:00", (violation_time like '04:__P'), "16:00", (violation_time like '05:__P'), "17:00", (violation_time like '06:__P'), "18:00", (violation_time like '07:__P'), "19:00", (violation_time like '08:__P'), "20:00", (violation_time like '09:__P'), "21:00", (violation_time like '10:__P'), "22:00", (violation_time like '11:__P'), "23:00") as time, count(*) as count`,
'$group': 'time',
'$where' : "(violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A' OR violation_time like '06:__A' OR violation_time like '07:__A' OR violation_time like '08:__A' OR violation_time like '09:__A' OR violation_time like '10:__A' OR violation_time like '11:__A' OR violation_time like '12:__P' OR violation_time like '01:__P' OR violation_time like '02:__P' OR violation_time like '03:__P' OR violation_time like '04:__P' OR violation_time like '05:__P' OR violation_time like '06:__P' OR violation_time like '07:__P' OR violation_time like '08:__P' OR violation_time like '09:__P' OR violation_time like '10:__P' OR violation_time like '11:__P') AND (issue_date like '__/__/2015')"
})
url3 = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(query3)
yearThreeInput = (await fetch(url3, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
netYearThree = d3.extent(yearThreeInput, d=> d.count)
obj3 = yearThreeInput.slice()
yearThreeMap = new Map(obj3.map(d => [d.time, d.count]))
pieColor3 =d3.scaleDiverging()
.domain([netYearThree[0], 4500, netYearThree[1]])
.range(['lime', 'orange', 'red'])
.unknown("lightgray")
legend({color: pieColor3})
yearThree = {
const final = [];
for(var i = 0; i < times.length;i++){
const object = {};
object['time'] = times[i];
object['area'] = 10;
if(yearThreeMap.get(times[i])){
object['count'] = yearThreeMap.get(times[i]);
}
else {
object['count'] = 0;
}
final.push(object);
}
return final;
}
query4 = ({
'$select' : `CASE((violation_time like '12:__A'), "00:00", (violation_time like '01:__A'), "01:00", (violation_time like '02:__A'), "02:00", (violation_time like '03:__A'), "03:00", (violation_time like '04:__A'), "04:00", (violation_time like '05:__A'), "05:00", (violation_time like '06:__A'), "06:00",(violation_time like '07:__A'), "07:00", (violation_time like '08:__A'), "08:00",(violation_time like '09:__A'), "09:00" ,(violation_time like '10:__A'), "10:00",(violation_time like '11:__A'), "11:00", (violation_time like '12:__P'), "12:00", (violation_time like '01:__P'), "13:00", (violation_time like '02:__P'), "14:00", (violation_time like '03:__P'), "15:00", (violation_time like '04:__P'), "16:00", (violation_time like '05:__P'), "17:00", (violation_time like '06:__P'), "18:00", (violation_time like '07:__P'), "19:00", (violation_time like '08:__P'), "20:00", (violation_time like '09:__P'), "21:00", (violation_time like '10:__P'), "22:00", (violation_time like '11:__P'), "23:00") as time, count(*) as count`,
'$group': 'time',
'$where' : "(violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A' OR violation_time like '06:__A' OR violation_time like '07:__A' OR violation_time like '08:__A' OR violation_time like '09:__A' OR violation_time like '10:__A' OR violation_time like '11:__A' OR violation_time like '12:__P' OR violation_time like '01:__P' OR violation_time like '02:__P' OR violation_time like '03:__P' OR violation_time like '04:__P' OR violation_time like '05:__P' OR violation_time like '06:__P' OR violation_time like '07:__P' OR violation_time like '08:__P' OR violation_time like '09:__P' OR violation_time like '10:__P' OR violation_time like '11:__P') AND (issue_date like '__/__/2016')"
})
url4 = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(query4)
yearFourInput = (await fetch(url4, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
netYearFour = d3.extent(yearFourInput, d=> d.count)
pieColor4 =d3.scaleDiverging()
.domain([netYearFour[0], 42500, netYearFour[1]])
.range(['lime', 'orange', 'red'])
.unknown("lightgray")
legend({color: pieColor4})
obj4 = yearFourInput.slice()
yearFourMap = new Map(obj4.map(d => [d.time, d.count]))
yearFour = {
const final = [];
for(var i = 0; i < times.length;i++){
const object = {};
object['time'] = times[i];
object['area'] = 10;
if(yearFourMap.get(times[i])){
object['count'] = yearFourMap.get(times[i]);
}
else {
object['count'] = 0;
}
final.push(object);
}
return final;
}
query5 = ({
'$select' : `CASE((violation_time like '12:__A'), "00:00", (violation_time like '01:__A'), "01:00", (violation_time like '02:__A'), "02:00", (violation_time like '03:__A'), "03:00", (violation_time like '04:__A'), "04:00", (violation_time like '05:__A'), "05:00", (violation_time like '06:__A'), "06:00",(violation_time like '07:__A'), "07:00", (violation_time like '08:__A'), "08:00",(violation_time like '09:__A'), "09:00" ,(violation_time like '10:__A'), "10:00",(violation_time like '11:__A'), "11:00", (violation_time like '12:__P'), "12:00", (violation_time like '01:__P'), "13:00", (violation_time like '02:__P'), "14:00", (violation_time like '03:__P'), "15:00", (violation_time like '04:__P'), "16:00", (violation_time like '05:__P'), "17:00", (violation_time like '06:__P'), "18:00", (violation_time like '07:__P'), "19:00", (violation_time like '08:__P'), "20:00", (violation_time like '09:__P'), "21:00", (violation_time like '10:__P'), "22:00", (violation_time like '11:__P'), "23:00") as time, count(*) as count`,
'$group': 'time',
'$where' : "(violation_time like '12:__A' OR violation_time like '01:__A' OR violation_time like '02:__A' OR violation_time like '03:__A' OR violation_time like '04:__A' OR violation_time like '05:__A' OR violation_time like '06:__A' OR violation_time like '07:__A' OR violation_time like '08:__A' OR violation_time like '09:__A' OR violation_time like '10:__A' OR violation_time like '11:__A' OR violation_time like '12:__P' OR violation_time like '01:__P' OR violation_time like '02:__P' OR violation_time like '03:__P' OR violation_time like '04:__P' OR violation_time like '05:__P' OR violation_time like '06:__P' OR violation_time like '07:__P' OR violation_time like '08:__P' OR violation_time like '09:__P' OR violation_time like '10:__P' OR violation_time like '11:__P') AND (issue_date like '__/__/2017')"
})
url5 = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(query5)
yearFiveInput = (await fetch(url5, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
netYearFive = d3.extent(yearFiveInput, d=> d.count)
pieColor5 =d3.scaleDiverging()
.domain([netYearFive[0], 52000, netYearFive[1]])
.range(['lime', 'orange', 'red'])
.unknown("lightgray")
legend({color: pieColor5})
obj5 = yearFiveInput.slice()
yearFiveMap = new Map(obj5.map(d => [d.time, d.count]))
yearFive = {
const final = [];
for(var i = 0; i < times.length;i++){
const object = {};
object['time'] = times[i];
object['area'] = 10;
if(yearFiveMap.get(times[i])){
object['count'] = yearFiveMap.get(times[i]);
}
else {
object['count'] = 0;
}
final.push(object);
}
return final;
}
queryUnsafe = ({
'$select' : `CASE((issue_date like '__/__/2016'), "2013", (issue_date like '__/__/2017'), "2014", (issue_date like '__/__/2018'), "2015", (issue_date like '__/__/2019'), "2016", (issue_date like '__/__/2020'), "2017") as year, count(*) as count`,
'$group': 'year',
'$where' : "violation like 'PHTO SCHOOL ZN SPEED VIOLATION' AND (county like 'BK' OR county like 'QN')"
})
urlUnsafe = "https://data.cityofnewyork.us/resource/nc67-uf89.json?" + new URLSearchParams(queryUnsafe)
unsafeSpeedYears = (await fetch(urlUnsafe, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
})).json()
lineDf = {
let array = [];
let data;
for(var i = 0; i < years.length; i++){
let currYear = years[i];
switch(currYear){
case 2013:
data = yearOneMap;
break;
case 2014:
data = yearTwoMap;
break;
case 2015:
data = yearThreeMap;
break;
case 2016:
data = yearFourMap;
break;
case 2017:
data = yearFiveMap;
break;
}
let currTime;
for( var j = 0; j < times.length; j++){
currTime = times[j];
let dateTime = new Date(1996,0, 1, j, 3);
let count = data.get(currTime);
array.push({year : currYear, date: dateTime, count: count});
}
}
array.sort((a,b) => d3.ascending(a.date, b.date));
return array;
}
d3.extent(lineDf, d=> d.count)
yearSort = d3.rollups(
lineDf,
g => g,
d=> d.year
)
yearSortSlice = d3.rollups(
lineDf,
g => g,
d=> d.year
)
.map( ([annual, data]) => {
const sortedTimes = data.slice()
.sort((a,b) => d3.ascending(a.date, b.date))
return {annual, sortedTimes}
})
years
slice = yearSort.slice(0,1)
t = slice[0][1]
timesForChart = t.map(d=> d.date)
color3 = d3.scaleOrdinal()
.domain(years)
.range(d3.schemeTableau10);
lines = {
const margin = {top: 50, right: 30, bottom: 20, left: 60};
const visWidth = width - margin.left - margin.right;
const visHeight = 500 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleTime()
.domain(d3.extent(timesForChart))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, 80000, 1128333]).nice()
.range([visHeight, visHeight/2, 0]);
const xAxis = d3.axisBottom(x).ticks(d3.timeHour.every(1));
const yAxis = d3.axisLeft(y);
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis);
g.append('g')
.call(yAxis)
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', -margin.top + 5)
.attr('x', -margin.left)
.text('Total Count Per Hour')
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.count));
const linesGroup = g.append('g');
linesGroup
.selectAll('path')
.data(yearSortSlice)
.join('path')
.attr('stroke', d => color3(d.annual))
.attr('fill', 'none')
.attr('stroke-width', 5)
.attr('d', d=> line(d.sortedTimes));
return svg.node();
}
import {legend, swatches} from "@d3/color-legend"
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.
