Public
Edited
Mar 22, 2023
Unemployment_Suicide_Daly_Combined@5.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof UnemploymentvsSuicideRate = aq // viewof shows the table view, but assigns the table value
.fromCSV(await FileAttachment("Unemployment_Suicide_Daly_Combined@5.csv").text())
.view({ height: 240 })
viewof URvsSR_data =
UnemploymentvsSuicideRate.select(["Year", "UR_16to24", "UR_45to64", "SR_16to24", "SR_45to64"])
.view()
{
// variables to get the dashboard to fit nicely
const line_width = width * 0.45;
const line_height = width * 0.3;
// brushing and linking example from https://observablehq.com/@uwdata/interaction
const brush = vl.selectInterval().encodings('x').resolve('intersect').bind('scales') ;
// unemployment chart
const unemploymentChart = vl.markLine()
.width(line_width)
.height(line_height)
.encode(
vl.x().fieldT("Year").timeUnit('year'),
vl.y().fieldQ('UR_16to24').title('Unemployment Rate of age group 16to24'),
vl.color().value('red'),
vl.tooltip().fieldQ('UR_16to24')
)
.select(brush);
// suicide chart
const suicideChart = vl.markLine()
.width(line_width)
.height(line_height)
.encode(
vl.x().fieldT("Year").timeUnit('year'),
vl.y().fieldQ('SR_16to24').title('Suicide Rate of age group 16to24'),
vl.color().if(brush, vl.value('green')).value('grey'),
vl.tooltip().fieldQ('SR_16to24')
)
.transform(vl.filter(brush))
;
// combine the charts
return vl.hconcat(unemploymentChart, suicideChart)
.data(URvsSR_data)
.render();
}
Gender_Crimes_Zipcode-1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof Gender_Crimes = aq // viewof shows the table view, but assigns the table value
.fromCSV(await FileAttachment('Gender_Crimes_Zipcode-1.csv').text())
.view()
{
// Define the width of the scatterplot and histograms
const width = 600;
const scatter_sq = width * 0.47; // Define the width of the square scatterplot
const hist_width = width * 0.33; // Define the width of the histograms
const hist_height = 200; // Define the height of the histograms
// Create a brush object for the x-axis encoding
const brush = vl.selectInterval().encodings('x').resolve('intersect');
// base histogram
const hist = vl.markBar()
.encode(
vl.x().fieldQ('mean_Vict_Age')
.bin({maxbins: 100, minstep: 0.5}) // Specify the binning options for the histogram
.axis({format: 'd', titleAnchor: 'start'}), // Customize the x-axis title format
vl.y().count().title(null) // Count the number of occurrences for each bin
);
// Encode the brush for the histogram and filter selected data points
const hist_layer = vl.layer(
hist.params(brush).encode(vl.color().value('lightgrey')), // turn all grey
hist.transform(vl.filter(brush)) // layer selected values on top in default blue
)
.height(hist_height) // Set the height of the histogram layer
.width(hist_width); // Set the width of the histogram layer
const scatter = vl.markCircle({tooltip: true}) // Define a scatterplot with circles as marks
.height(scatter_sq).width(scatter_sq) // Set the height and width of the scatterplot
.encode(
vl.x().fieldQ('M_VALUE').scale({zero: false}).title("Male Victims"), // Encode the Male Victims data to the x-axis
vl.y().fieldQ('F_VALUE').scale({zero: false}).title("Female Victims"), // Encode the Female Victims data to the y-axis
vl.color().if(brush, vl.value('green')).value('grey').scale({scheme: 'tableau10'}), // Encode the color of the marks based on selection
vl.opacity().if(brush, vl.value(0.8)).value(0.1), // Encode the opacity of the marks based on selection
vl.tooltip([vl.fieldN('AREA_NAME')]) // Define the tooltip to show the area name on hover
)
.title({
text: "Take a look at the Victim statistics in an Area in LA City.", // Set the main title of the chart
subtitle: "(by Gender & Age)", // Set the subtitle of the chart
anchor: "start" // Set the anchor position of the title
});
// Concatenate the scatterplot and histogram
return vl.hconcat(scatter, hist_layer) // Combine the scatterplot and histogram horizontally
.data(Gender_Crimes) // Set the data for the chart
.render(); // Render the chart
}
import { vl } from "@vega/vega-lite-api-v5"
import { aq, op } from '@uwdata/arquero'
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.
