N

Noah C.

@ncavestany·27 public vizzes

Loading thumbnail…

A6 Sequential Color Barchart

This example visualizes total cancer deaths by U.S. state using a sequential color barchart. The bars encode the death count by height while their color reflects the death rate per 100,000 people, ranging from light to dark red. Hovering over a bar reveals precise values via a native title tooltip. The chart is built with D3 v7, using `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.scaleSequential` with `d3.interpolateReds` for color, and the `d3-legend` plugin to display the color threshold legend. Data comes from the CORGIS dataset, rendered as SVG.

Loading thumbnail…

A4 Barchart (D3)

This bar chart visualizes total opioid deaths per year from 1999 to 2019, using data from the CORGIS dataset. The chart displays red bars for each year, with a hover tooltip (via SVG `title` elements) showing the exact death count. It uses D3 v7 with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering is responsive to the window size, and the data is loaded asynchronously via `d3.csv`.

Loading thumbnail…

A6 Diverging Color Bar Chart

This diverging bar chart visualizes changes in violent crime rates across U.S. states between 2000 and 2019, using a red-blue color scale to distinguish increases from decreases. The chart shows both positive and negative changes diverging from a central zero axis, with state labels positioned on the appropriate side of each bar. Built with D3 v7, it uses `d3.scaleDiverging` and `d3.scaleThreshold` for color mapping, while `d3.legendColor` renders the threshold legend. Data comes from the CORGIS dataset, and hovering reveals precise values. The visualization employs an SVG container with a centered y-axis and responsive sizing based on window dimensions.

Loading thumbnail…

A8 Force Directed Node Link Diagram

This example shows a static force-directed node-link diagram of firm-hi-tech data sourced from a CSV file. It uses the D3.js library (v7) to load the data and compute a 500-tick simulation via `d3.forceSimulation`, applying `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces. The SVG rendering uses circles for nodes and lines for edges, with tooltips showing each node's ID. The layout is determined by the simulation's final state, and the chart includes a title set with D3 methods.

Loading thumbnail…

A8 Adjacency Matrix Representation

This visualization presents a square adjacency matrix representing connections within the SOC Hi-Tech network. Each row and column corresponds to a firm or technology node, and a blue-filled cell indicates a directed link from the source node to the target node. Hovering over a filled square triggers a tooltip displaying the specific source and target pair. The implementation uses D3.js v7 to load the CSV data and dynamically generate SVG `<rect>` elements for each matrix cell, with axes labeled by node IDs. The layout scales the cell size based on available window dimensions, and the color encoding uses a simple binary blue/white scheme to show edge presence.

Loading thumbnail…

A8 Adjacency Matrix Representation

This example shows a force-directed node-link diagram of the SOC Hi-Tech firm network. It visualizes the connections between firms using an adjacency matrix representation, with nodes positioned via a physics simulation and edges drawn as blue lines. The implementation uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter forces, running 500 ticks to stabilize the layout before rendering. The SVG output includes hover tooltips that display each node's ID, and the data is loaded from a CSV file using d3.csv.

Loading thumbnail…

A7 Small Multiples Line Chart

This small-multiple line chart displays marijuana usage rates per 1000 people for ages 18–25 across US states, using data from the CORGIS dataset. Each state’s trend line is rendered in its own SVG cell, colored via a d3.scaleOrdinal palette, with a d3-legend color threshold legend. The visualization uses d3.group to separate data by state, d3.line to create paths, and d3.axisBottom and d3.axisLeft for axes, with a title overlaid in HTML.

Loading thumbnail…

A7 Multi-Line Chart

This chart visualizes violent crime rates per 100,000 people across U.S. states from 2000 to 2019, using data from the CORGIS dataset. Each state is shown as a multi-line path with colored dots for individual data points, and hovering reveals exact values. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.line` for path generation, and `d3.legendColor` from the d3-legend library for the color legend. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with an ordinal color scale distinguishing states.

Loading thumbnail…

A7 Heatmap

A heatmap of burglary rates per 100,000 people across U.S. states from 2000 to 2019, sourced from the CORGIS dataset and rendered as an SVG. The visualization uses D3.js v7 with `d3.scaleBand` for axes, `d3.scaleSequential` with `d3.interpolateReds` for color encoding, and a threshold legend via the d3-legend library. Hovering over each cell reveals precise values and state names.

Loading thumbnail…

A6 Qualitative Scatter Plot

This scatter plot displays the relationship between burglary and motor crime rates across U.S. states from 2015 to 2019, with each dot representing a state-year observation. The visualization uses color to distinguish years, employing an ordinal color scale with a d3.legendColor legend. Hovering over a dot reveals precise values through SVG title tooltips. The chart is rendered with D3 v7, using d3.scaleLinear for both axes and d3.scaleOrdinal for color mapping, with data sourced from the CORGIS dataset.

Loading thumbnail…

A5 Line Chart (D3)

This line chart visualizes total opioid overdose deaths in the United States from 1999 to 2019, using data from the CORGIS dataset. Red circles mark each year’s value, and hovering over a dot reveals the exact death count via a tooltip. The chart uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render ticks. The line and dots are drawn as SVG elements using d3.line and appended circles, with a title appended to each circle for the hover effect.

Loading thumbnail…

A5 Bubble Plot (D3)

This bubble plot visualizes alcohol and tobacco usage across U.S. states, with circle size encoding population and color intensity representing alcohol use rates per 1000 people. Built with D3 v7, it uses `d3.scaleLinear` for position, radius, and color mapping, plus SVG circles with `title` elements for hover tooltips. The chart loads CSV data from a GitHub gist and displays axes with custom tick formatting, along with descriptive legends and labels.

Loading thumbnail…

A4 Scatterplot (D3)

This scatterplot visualizes the relationship between reported alcohol and tobacco use among individuals aged 26 and older, using data from the CORGIS dataset. Each red dot represents a state or region, plotting total monthly tobacco use on the x-axis against alcohol use on the y-axis, with values displayed in thousands. Hovering over a dot reveals a tooltip with the exact figures via SVG `<title>` elements. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for rendering ticks.

Loading thumbnail…

A4 Box Plot (D3)

This visualization shows the distribution of average video game play lengths from 2004 to 2008 using a single horizontal box plot, with outliers removed via the interquartile range method. The chart displays the min, max, median, Q1, and Q3 values, and hovering over any of these elements reveals the exact numeric value via SVG `<title>` tooltips. Built with D3 v7, the code loads CSV data from a GitHub gist, uses `d3.quantile` to compute quartiles, and renders the plot using SVG shapes, scales, and axes.

Loading thumbnail…

A4 Box Plot (D3)

This red bar chart visualizes total opioid deaths in the United States from 1999 to 2019, using data from the CORGIS dataset loaded via `d3.csv`. It renders an SVG with `d3.scaleLinear` for both the year-based x-axis and the death-count y-axis, drawing bars with `d3.axisBottom` and `d3.axisLeft`, and sizing rectangles according to `Number_All` values. The chart is styled with red bars and a title, lacking any box plot elements despite the example’s name.

Loading thumbnail…

A4 Box Plot (D3)

This red bar chart visualizes total opioid deaths in the United States from 1999 to 2019, using data from the CORGIS dataset loaded via `d3.csv`. It renders an SVG with `d3.scaleLinear` for both the year-based x-axis and the death-count y-axis, drawing bars with `d3.axisBottom` and `d3.axisLeft`, and sizing rectangles according to `Number_All` values. The chart is styled with red bars and a title, lacking any box plot elements despite the example’s name.

Loading thumbnail…

A4 Box Plot (D3)

This red bar chart visualizes total opioid deaths in the United States from 1999 to 2019, using data from the CORGIS dataset loaded via `d3.csv`. It renders an SVG with `d3.scaleLinear` for both the year-based x-axis and the death-count y-axis, drawing bars with `d3.axisBottom` and `d3.axisLeft`, and sizing rectangles according to `Number_All` values. The chart is styled with red bars and a title, lacking any box plot elements despite the example’s name.

Loading thumbnail…

A4 Box Plot (D3)

This red bar chart visualizes total opioid deaths in the United States from 1999 to 2019, using data from the CORGIS dataset loaded via `d3.csv`. It renders an SVG with `d3.scaleLinear` for both the year-based x-axis and the death-count y-axis, drawing bars with `d3.axisBottom` and `d3.axisLeft`, and sizing rectangles according to `Number_All` values. The chart is styled with red bars and a title, lacking any box plot elements despite the example’s name.

Loading thumbnail…

A4 Box Plot (D3)

This red bar chart visualizes total opioid deaths in the United States from 1999 to 2019, using data from the CORGIS dataset loaded via `d3.csv`. It renders an SVG with `d3.scaleLinear` for both the year-based x-axis and the death-count y-axis, drawing bars with `d3.axisBottom` and `d3.axisLeft`, and sizing rectangles according to `Number_All` values. The chart is styled with red bars and a title, lacking any box plot elements despite the example’s name.

Loading thumbnail…

A4 Box Plot (D3)

This red bar chart visualizes total opioid deaths in the United States from 1999 to 2019, using data from the CORGIS dataset loaded via `d3.csv`. It renders an SVG with `d3.scaleLinear` for both the year-based x-axis and the death-count y-axis, drawing bars with `d3.axisBottom` and `d3.axisLeft`, and sizing rectangles according to `Number_All` values. The chart is styled with red bars and a title, lacking any box plot elements despite the example’s name.

Loading thumbnail…

US Murders CORGIS Strip Plot

This visualization displays murder rate trends across US states from 2008 to 2019 using a jittered strip plot. Each red dot represents the total murder count for a state in a given year, plotted along a categorical x-axis for each year and a y-axis scaled to the maximum value. The p5.js code loads the CORGIS state crime CSV data and uses the `loadTable`, `map`, and `ellipse` functions to render the dots, with random x-offsets applied to reduce overlap. Axes labels and a rotated y-axis title are drawn using p5.js text functions.

Loading thumbnail…

Cancer CORGIS Box Plot

A box plot summarizes US cancer death rates for individuals over 64, sourced from the CORGIS dataset and rendered with the p5.js library. The visualization loads a CSV and draws a single box and whiskers, with the box spanning the interquartile range and a line marking the median. Axis labels and evenly spaced tick marks map numeric values between the minimum and maximum observed rates. Quartile calculations are performed manually, and the canvas dynamically resizes with the browser window.

Loading thumbnail…

Cancer CORGIS Histogram

This visualization displays the distribution of US cancer death rates per 100,000 people, using data from the CORGIS dataset. It shows a histogram where each bar represents the frequency of states falling within a ten-unit rate range, with pink bars and labeled axes. The code uses the p5.js library to load the CSV data via `loadTable`, compute bin counts, and render the chart with mapped coordinates. Grid lines and axis ticks are drawn manually, with a rotated y-axis label for the count.

Loading thumbnail…

Crime Rate CORGIS Heatmap

This heatmap visualization displays violent crime rates for US states from 2008 to 2019 using CORGIS data. It presents a grid of colored squares, with each square representing a state-year combination and color intensity mapping to the crime rate via red fill values. The visualization is built with p5.js, using its `loadTable` function to fetch and parse a remote CSV file. It dynamically draws the legend, axes, and state labels through the canvas API, with the color scale ranging from dark red for lower rates to bright red for higher ones.

Loading thumbnail…

Crime Rate CORGIS Heatmap

A scatterplot visualization of review scores for Mario games from the CORGIS video games dataset. The plot displays each game title along the y-axis with its corresponding review score plotted as a dot and labeled with the numeric value, while the x-axis shows score increments from 60 to 100. Built with p5.js, the code loads data from a CSV file using `loadTable`, draws axes and points with Canvas drawing functions, and maps score values to pixel positions using the `map` function. The visualization includes custom-drawn axis lines and text labels rather than using charting libraries.

Loading thumbnail…

Video Games CORGIS Dot Plot

This dot plot visualizes review scores for various Mario games from the CORGIS dataset. Each dot represents one game, positioned along the x-axis by its score with the title labeled on the y-axis, and the score printed beside each dot. The visualization is created using p5.js, with data loaded via `loadTable` from a CSV hosted on GitHub Gist. A blue axis line and score labels from 60 to 100 provide context for the distribution.

Loading thumbnail…

Video Games CORGIS Bar Chart

The visualization displays the average review score for video games released each year from 2004 to 2016, using data from the CORGIS dataset. A bar chart shows each year's mean score, with the average value labeled above each bar and the year below. The p5.js sketch loads the CSV data via `loadTable`, calculates yearly averages in `calculateAverages`, and renders the chart using `rect` for bars, `text` for labels, and `line` for axes.