Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
// Require the d3 library
// Load the Seattle building permit data using `d3.csv()`
// Display a showing a subset of the data
// Inspect the data
// Get the first (zero-ith) element
// Access the PermitClass key of the first element
// How many observations (building permits) are in the dataset?
// Get a list of features in our dataset from the first observation
// Require the lodash package
// Get a list of the unique values of the `PermitClass` feature
// Get a list of the unique values of the `PermitClass` feature (only returning the string values of interest)
// What is the total number of housing units added across the dataset?
// Get the sum of three values (an example of d3.sum _without_ an accessor function)
// Get the sum of the total number of housing units added across the dataset
// What is the average estimated project cost?
// What is the standard deviation across project cost?
// What is the most expensive project?
// First Permit Issue date
// Create a time parsing function based on the structure of the date-strings in our data
// Parse the date of the first permit issued
// Get the extent (min and max) of the dates in the dataset
// Define a formatting function for *displaying* date objects
// Write out a sentence describing the date range
// How many projects have been completed? Only keep the objects where the StatusCurrent is "Completed"
// How many permits have been issued in 2020? Only keep the objects where year is 2020
// Note, we need to parse the date of each object, then get the *year* to perform the filter
// What is the description of the most expensive project?
// Calculate permits per year using plain old JavaScript
// Calculate permits per year using lodash -- wow, so much easier!
// Use the Object.keys() method to convert our object into an array of objets
// Create a function to nest data by a feature called "PermitClass"
// Using the method defined above, create a nested data structure out of our data (by PermitClass)
// Create a function that will count the number of elements in each PermitClass
// Count the number of elements in each class -- wow!
// Create a nested data structure that has the number of permits, average cost, and highest cost
// for each PermitClass
// Load the vega-lite package
// Create a bar chart of the number of permits of each class
// Clone our summary_by_class data so we can sort it (for demonstration only)
// Here is our sorting function to sort by the number of permits (recall data structure above)
// Sort the data using the function described above (which could have been written in line)
// Make a bar chart of the number of permits -- same code as above, but using the sorted_data
carat = html`<svg width="8" height="8" class="observablehq--caret">
<path d="M7 4L1 8V0z" fill="currentColor"></path>
</svg>`
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.
