Public
Edited
Dec 10, 2023
1 fork
CriminalCodeOffencesList=d3.csv("https://raw.githubusercontent.com/Archer001201/IAT355/main/ViolentOffences.csv",d3.autoType)
CriminalCodeClearedList =d3.csv("https://raw.githubusercontent.com/Archer001201/IAT355/main/Number%20of%20Offences%20Cleared-Criminal%20Code%20Offences.csv", d3.autoType)
CriminalCode=d3.csv("https://raw.githubusercontent.com/Archer001201/IAT355/main/TotalOffences.csv",d3.autoType)
CrimeRate=d3.csv("https://raw.githubusercontent.com/Archer001201/IAT355/main/region/Crime%20Rates.csv",d3.autoType)
CrimeCodeArea = d3.csv("https://raw.githubusercontent.com/Archer001201/IAT355/main/region/Criminal%20Code%20Offences.csv",d3.autoType)
VegaLite = require("vega-embed@6")
import {rangeSlider} from "@mootari/range-slider"
import {logSlider} from '@severo/log-slider'
d3 = require("d3@6");
CrimeRateAreaData = CrimeRate .flatMap(d => {
return Object.keys(d).filter(key => key !== 'REGION').map(year => {
let count = d[year];
if (typeof count === 'string') {
count = count.replace(/,/g, '');
}
return {
Year: year,
REGION: d['REGION'],
CrimeRate: +count
};
});
});
CrimeCodeAreaData = CrimeCodeArea.flatMap(d => {
return Object.keys(d).filter(key => key !== 'REGION').map(year => {
let count = d[year];
if (typeof count === 'string') {
count = count.replace(/,/g, '');
}
return {
Year: year,
REGION: d['REGION'],
Count: +count
};
});
});
// filteredData = CriminalCodeOffencesData.filter(entry => entry.Offence === "Homicide (1,2)");
vl.markLine()
.data(CrimeCodeAreaData)
.encode(
vl.x().fieldT('Year').title('Year'),
vl.y().fieldQ('Count').title('Case Count'),
vl.color().fieldN('REGION').title('REGION')
)
.width(500)
.height(500)
.render();
vl.markLine()
.data(CrimeRateAreaData)
.encode(
vl.x().fieldT('Year').title('Year'),
vl.y().fieldQ('CrimeRate').title('The Local Crime Rate'),
vl.color().fieldN('REGION').title('REGION')
)
.width(500)
.height(500)
.render();
{
const CrimeCodeAreaChart = vl.markLine().data(CrimeCodeAreaData).encode(
vl.x().fieldT('Year').title('Year'),
vl.y().fieldQ('Count').title('Case Count'),
vl.color().fieldN('REGION').title('REGION')
);
const CrimeRateAreaChart = vl.markLine().data(CrimeRateAreaData).encode(
vl.x().fieldT('Year').title('Year'),
vl.y().fieldQ('CrimeRate').title('The Local Crime Rate'),
vl.color().fieldN('REGION').title('REGION')
);
return(
vl.hconcat(CrimeCodeAreaChart,CrimeRateAreaChart)
.render()
);
}
vl.markLine()
.data(CrimeCodeAreaData)
.encode(
vl.x().fieldT("Year"),
vl.y().fieldQ("Count").aggregate('Count'),
vl.facet().fieldN("REGION").columns(5) //each column of the chart is encoded with the categories in weather
)
.width(350)
.height(250)
//.resolve({ scale: { color: "independent" } })
.render()
{
const selection = vl.selectPoint(); //We create a selection instance which indicates that we want a selection defined over a point value
return vl.markLine()
.data(CrimeCodeAreaData)
.params(selection) //we register the selection in the chart where we will interact with our marks for selection
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Count'),
vl.color().if(selection, vl.color().fieldN('REGION').scale({scheme: 'tableau10'})).value('grey'), //color to grey if it is not selected
vl.opacity().if(selection, vl.value(0.9)).value(0.1)
//第一个是亮度 ,
//第二个是着重
)
.width(1000)
.height(500)
.render()
}
import {uniqueValid} from "@uwdata/data-utilities"
RegionCategories = uniqueValid(CrimeCodeAreaData,d=> d.REGION)
{
const selectRegion = vl
.selectPoint("SelectionMenu") // name the dropdown menu 'Selection'
.fields("REGION") // set fields as area name
.init(RegionCategories[0])
.bind(vl.menu(RegionCategories).name("Pick City Name: "));
return vl
.markLine()
.data(CrimeCodeAreaData)
.params(selectRegion)
.encode(
vl.x().fieldT("Year"),
vl.y().fieldQ("Count"),
vl.color().if(selectRegion, vl.fieldN("REGION")).value("grey"),
vl.tooltip(["date", "Year", "Count"]), //pass these three fields in
vl.opacity().if(selectRegion, vl.value(0.9)).value(0.5)
//first 亮度
//shadow
)
.width(1000)
.height(500)
.render();
}
{
const selectRegion = vl
.selectPoint("SelectionMenu") // name the dropdown menu 'Selection'
.fields("REGION") // set fields as area name
.init(RegionCategories[0])
.bind(vl.menu(RegionCategories).name("Pick City Name: "));
const filterPrecipitation = vl
.param("CountValue")
.value(0)
.bind(vl.slider(0, 20000, 10).name("Filter precipitation: ")); // bind to slider
const show = vl.and(selectRegion, "datum.CountValue >= CountValue");
// issue from here
return vl
.markLine()
.data(CrimeCodeAreaData)
.params(selectRegion, filterPrecipitation)
.encode(
vl.x().fieldT("Year"),
vl.y().fieldQ("Count"),
vl.color().if(show, vl.fieldN("REGION")).value("grey"),
vl.tooltip(["date", "Year", "Count"]),
vl.opacity().if(show, vl.value(0.9)).value(0.5)
)
.width(600)
.height(500)
.render();
}
{
// create an interval selection over an x-axis encoding
const brush = vl.selectInterval().encodings('x'); //we didn't specify resolve here because we only have 1 brush so farrushes will be selected)
//this is the chart that reacts and changes view when we brush over overviewChart
const detailChart = vl.markLine()
.data(CrimeCodeAreaData)
.transform(
vl.filter(brush) //***We use filter to get the interval selection of data points that are in our brush. we want to filter out other data
)
.encode(
vl.x().fieldT("Year"),
vl.y().fieldQ('Count'),
vl.color().fieldN('REGION'),//.scale({domain: weatherCategories}),
vl.tooltip(['precipitation', 'Count']) //show both precipitation and wind
)
.width(600)
.height(500)
const detaiChart2 = vl.markLine()
.data(CrimeRateAreaData)
.transform(
vl.filter(brush)
)
.encode(
vl.x().fieldT("year"),
vl.y().fieldQ('CrimeRate'),
vl.color().fieldN('REGION'),
vl.tooltip(['precipitation', 'Count']) //show both precipitation and wind
)
.width(600)
.height(500)
//brushChart is where we will control our brush
const brushChart = vl.markBar()
.data(CrimeCodeAreaData)
.encode(
vl.x().fieldT("Year"), //set utcmonthyear so we are using utctime
vl.y().average("Count").axis({tickCount: 2})
)
.params(brush)
.width(600)
.height(500)
return vl.vconcat(detailChart, brushChart,)
.render()
}
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.
