C

coreyfnolan@gmail.com

@python-monty·34 public vizzes

Loading thumbnail…

Full Cyber Attack Data

This visualization presents processed cyber attack data, showing the number of events per year for each industry sector. The code filters out entries with undetermined actor types or event types, then aggregates counts by industry code and year, producing a structured dataset. It uses JavaScript array methods like `filter` and `push` to compile the data, and exports the resulting `newData` and `yearlyData` arrays for use in other modules. The current display renders sample JSON records in a preformatted HTML element.

Loading thumbnail…

Corey's Responsive Axis

This example demonstrates a D3.js visualization with labeled X and Y axes that adapt their tick density based on the chart's dimensions. It shows how a ResizeObserver monitors the container, and when resized, the axes recalculate tick counts relative to the inner plot area's width and height. The code uses d3.scaleLinear for the x and y scales, d3.axisBottom and d3.axisLeft to render the axes, and custom functions for the axis labels. A gray inner rectangle marks the plot region, with the axes positioned along its bottom and left edges.

Loading thumbnail…

CyberAttacks LineChart - Final Project Draft v2

This interactive line chart displays annual cyber attack counts across industry sectors, using data from the CISSM Cyber Attacks dataset. Three drop-down menus allow viewers to select up to three industry codes, and the chart renders a multi-line visualization with a color legend that updates dynamically. Built with D3.js, the visualization employs `flatGroup`, `scaleOrdinal`, and `schemeCategory10` to group and color lines, while custom axis and color legend modules handle responsive rendering. The chart includes an inner rectangle background and labeled axes showing year and attack counts for the filtered industries.

Loading thumbnail…

Fork of Scatter Plot with Color

This example presents a scatter plot of Cyber Attack data from the University of Maryland CISSM database, showing the relationship between event date and attacker actor, colored by industry type. A color legend and brush interaction allow users to highlight specific data points, which update the circle strokes dynamically. The visualization uses d3.scalePoint for both axes, d3.scaleOrdinal with schemeCategory10 for coloring, and a d3.brush to handle selection. Axes and legend are rendered through custom functions that leverage d3.axisLeft, d3.axisBottom, and d3-selection methods.

Loading thumbnail…

CyberAttacks LineChart - Final Project Draft v1

This interactive line chart visualizes annual cyber attack counts across selected industry sectors from 2018 onward. Users can select up to three industry codes via dropdown menus to compare attack trends over time, with each industry represented by a distinct colored line. The visualization is built with D3.js and uses the CISSM Cyber Attacks dataset, encoding years on the x-axis and attack counts on the y-axis. The chart includes a color legend and hover interactions to highlight specific data points.

Loading thumbnail…

Fork of Line Chart with Country Dropdown

This interactive line chart visualizes Olympic medal counts over time for a selected country. A dropdown menu populated with unique countries from the dataset lets users filter the view, displaying a single line for the chosen nation. The visualization uses D3.js (v7) APIs including `scalePoint`, `scaleLinear`, `scaleOrdinal`, `line`, and `flatGroup` to map years and medal totals, with `observeResize` from `@curran/responsive-axes` managing responsive dimensions. The chart renders an SVG with axes, gridlines, and a colored line, updating dynamically on selection changes.

Loading thumbnail…

Another fork of responsive axes

This example demonstrates a data visualization with responsive axes that maintain consistent tick mark density as the viewport resizes. The chart displays a simple, abstract dataset within a gray inner rectangle, featuring labeled X and Y axes. The core behavior is achieved by using a ResizeObserver to track container dimensions, which then dynamically recalculates the number of axis ticks based on the available inner width and height. The implementation relies on D3.js functions like `scaleLinear`, `axisBottom`, `axisLeft`, and custom modules for axis and label rendering, ensuring the tick spacing remains visually uniform across different screen sizes.

Loading thumbnail…

Another fork of responsive axes

This example demonstrates responsive chart axes that maintain consistent tick mark density as the visualization resizes. A grey inner rectangle and labeled axes adapt their tick counts based on the available width and height, ensuring readability across different screen dimensions. The code uses `ResizeObserver` to track container size, then dynamically calculates tick numbers from the scale’s range. It leverages D3.js methods like `axisBottom`, `axisLeft`, and `scaleLinear` within a modular structure of separate axis and label components. The visualization also includes full-screen mode for interactive resizing.

Loading thumbnail…

Another fork of responsive axes

This example demonstrates responsive chart axes that maintain consistent tick mark density as the visualization resizes. A grey inner rectangle and labeled axes adapt their tick counts based on the available width and height, ensuring readability across different screen dimensions. The code uses `ResizeObserver` to track container size, then dynamically calculates tick numbers from the scale’s range. It leverages D3.js methods like `axisBottom`, `axisLeft`, and `scaleLinear` within a modular structure of separate axis and label components. The visualization also includes full-screen mode for interactive resizing.

Loading thumbnail…

Fork of Menu with D3

This example demonstrates a dropdown menu created with D3 that updates a text display based on user selection. It uses the `select` element and D3’s data-join methods (`selectAll`, `join`) to bind menu options from a static array. The `change` event triggers a state update via `setState`, and the selected value is reflected in a counter paragraph. Styling relies on Bootstrap classes and custom CSS, while the code imports D3’s `select` function and initializes the menu with a default option.

Loading thumbnail…

Corey's Parallel Coordinates with Brushing

This interactive parallel coordinates visualization explores cyber attack tactics against organizations by industry type from 2014 to 2023, using data from the CISSM Cyber Attacks Database. The chart displays four categorical axes (year, actor type, industry code, and event type) with polylines colored by actor type, enabling comparison of attack patterns across multiple dimensions. Users can brush along any axis to filter the dataset dynamically; brushed intervals trigger smooth 500ms fade transitions that dim non-matching lines while highlighting retained records. The visualization includes ordinal color encoding for actor types and supports interactive brushing on all dimensions, with filtered results updating in real time.

Loading thumbnail…

zoomable circles with d3 zoom

This example shows a set of colored circles positioned on a light green background, which can be zoomed and panned through mouse or touch gestures. The visualization uses D3's zoom behavior to apply a transform to a group element, updating the state object with each zoom event. The circles are rendered with D3 selections, each assigned fixed coordinates, radii, and fill colors from an inline data array. The code leverages the d3.zoom API and the state management pattern to persist the current transform across re-renders.

Loading thumbnail…

Fork of Cyber Attacks by Year v3

This fork of the Cyber Attacks by Year visualization displays annual cyber attack counts from 2014 to 2023, with multiple colored lines representing different industry codes. The chart uses D3.js with a time-scaled x-axis, linear y-axis, and an ordinal color scale based on the category10 scheme. Responding to mouse position, it draws red crosshair lines and uses axis labeling methods from the `@python-monty/corey-responsive-axis` library. The data originates from the CISSM Cyber Attacks database, and the visualization is implemented using `svg`, `scaleTime`, `scaleLinear`, `line`, and `flatGroup` APIs.

Loading thumbnail…

Yearly Cyber Attack Data

This visualization presents yearly cyber attack counts from the CISSM Cyber Attacks dataset, showing fluctuations from 2014 to 2023 with a notable spike in 2022. The code parses the CSV data, converting year strings to Date objects and attack counts to numbers using `Date.UTC` before displaying the first ten records as JSON. It relies on the d3 library version 7.8.5 for data handling and rendering, though the current implementation only outputs the parsed data structure rather than a graphical chart.

Loading thumbnail…

Interactive Color Legend on Scatter Plot CISSM_CyberAttacks

This interactive scatter plot visualizes cyber attack events from the CISSM Cyber Attacks dataset, mapping event dates on the x-axis and attack actors on the y-axis. Each circle is color-coded by industry type using d3.scaleOrdinal with schemeCategory10, and the color legend displays the industry categories. The visualization uses d3.scalePoint for both axes, with axis labels generated through custom helper functions. Data comes from the @python-monty/cyber_attacksv2 package, and the chart includes an inner rectangle background to delineate the plotting area.

Loading thumbnail…

Cyber Attacks by Year v2 w/ Responsive Axes

This line chart visualizes annual cyber attack counts from the CISSM Cyber Attacks dataset, with hover guides that track the mouse position. The visualization uses D3 scales and axes rendered via custom `xAxis` and `yAxis` functions from the `corey-responsive-axis` package, which adapt to container resizing through `observeResize`. The line is drawn using D3’s `line` generator with a time scale for years and a linear scale for attack counts. Data was pre-processed in Python before being imported into the VizHub environment.

Loading thumbnail…

Cyber Attacks by Year

This line chart displays the number of cyber attacks per year from the CISSM dataset. The visualization uses a simple black line against a light gray plot area, with labeled axes for year and attack count. Built with D3.js, the chart employs `scaleBand` for the x-axis and `scaleLinear` for the y-axis to position data points, which are connected using the `line` generator. The code also integrates the `corey-responsive-axis` library for axis labels and utilizes a reactive layout for resizing.

Loading thumbnail…

Corey's Axes with Hover

This example shows a scatter plot with labeled X and Y axes, where hovering over the inner plotting area triggers two red crosshair lines that track the mouse pointer. The visualization uses D3.js v7 with custom modular functions for drawing axes, axis labels, and hover interactions. The code employs `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` for ticks, and a `ResizeObserver` to make the chart responsive. The hover state is managed via `setState`, with pointer coordinates captured through D3's `pointer` event method.

Loading thumbnail…

Corey's Mouse Follower - week5

A single blue circle follows the mouse pointer across an SVG canvas, changing to a random color on click. The visualization uses D3’s `select` and `pointer` methods within a Svelte component, with a `ResizeObserver` managing canvas dimensions and `setState` updating circle coordinates and fill color on each interaction event.

Loading thumbnail…

Corey's Simple Scatter Plot Fork - Iterated

This scatter plot visualizes the Penguins dataset, mapping bill length to flipper length, with a D3-based SVG chart. Circle size is scaled proportionally to bill length, making larger values visually distinct. The code uses D3's `scaleLinear`, `extent`, `axisLeft`, and selection methods, along with the custom `xAxis`, `yAxis`, `xAxisLabel`, and `yAxisLabel` functions from `@curran/axis-labels`. A background rectangle is filled with a light gray, and circles are rendered with a fixed opacity of 0.629.

Loading thumbnail…

CISSM_CyberAttacks - Iterated

This example uses an iterated scatter plot to visualize cyber attack events from the CISSM Cyber Attacks dataset, plotting event date along the x-axis against the responsible actor on the y-axis. Each circle is colored by the industry targeted, using the `scaleOrdinal` and `schemeCategory10` schemes. The visualization leverages D3's `scalePoint` for both axes and renders data from the `@python-monty/cyber_attacksv2` package, with axis labels and a background rect for clarity. The code filters the data through custom `viz` and `axis_labels` modules built on D3 7.8.5.

Loading thumbnail…

Corey's Simple Line Chart

This visualization displays the number of cyber attacks per year across different industry types, using a simple line chart. The chart renders a single line showing total attacks over time, with a gray background rectangle highlighting the plotting area. The code imports d3 modules like `scaleBand`, `scaleLinear`, and `line` to construct the scales and line generator, while `xAxis` and `yAxis` from `@curran/axis-labels` handle the axes. Data originates from the CISSM Cyber Attacks database, parsed with Python, and the visualization is built using d3 version 7.8.5.

Loading thumbnail…

Corey's Bar Chart (from Simple Scatter Plot)

This bar chart visualizes the top 10 countries by total population using data from the UN Population Estimates 2024. The chart renders bars with a gray inner rectangle background, using D3's `scaleBand` and `scaleLinear`. The code filters the dataset for countries, sorts it in descending order, and slices the top 10 entries. It employs `axisLeft` and custom `xAxis`/`yAxis` functions, along with `xAxisLabel` and `yAxisLabel` utilities to label the axes.

Loading thumbnail…

Cyber Attacks by Year/Industry

This example displays the first ten rows of a dataset on cyber attacks, showing the number of attacks per industry and year. The parsed quantitative values are formatted as JSON in a pre tag, using the d3 library for data parsing. The data comes from a CSV file detailing industry codes, years, and attack counts across various sectors. The visualization demonstrates a simple data inspection approach, converting raw CSV data into viewable structured text.

Loading thumbnail…

Cyber_Attacks_V2

This example displays the first record from a dataset of cyber attacks, showing parsed fields such as the event date, actor, organization, industry, and motive. The code imports data from a CSV file and uses D3’s `utcParse` to convert the date strings into JavaScript `Date` objects, extracting the year for each entry. It also coerces the `industry_code` column into a numeric value with the unary plus operator. The visualization renders the resulting JSON representation of a single data point in a styled `<pre>` element, demonstrating the initial data processing and output structure.

Loading thumbnail…

Corey Fork of Circles with D3

This example draws a collection of colored circles and rectangles on an SVG canvas with a light blue background. The shapes are positioned using fixed coordinate arrays in the code, with each circle and rectangle assigned a specific fill color and opacity value. The implementation uses D3's selection and data-join methods, including `selectAll`, `data`, and `join`, to bind the shape data to the SVG elements. Rectangles are created by calculating width and height from paired corner coordinates, while circles use center coordinates and radius values.

Loading thumbnail…

Corey's Keeling Curve Data

This example visualizes monthly atmospheric CO2 concentrations from the Keeling Curve dataset, highlighting raw measurements, seasonally adjusted values, and smoothed fits over time. The code loads CSV data, parses date fields into JavaScript Date objects, and replaces missing values (marked as -99.99) with NaN. It then displays a single data row as formatted JSON in a `<pre>` element, using `JSON.stringify` to show the parsed structure. The example demonstrates data preprocessing and inspection for further visualization.

Loading thumbnail…

Corey's Simple Bar Chart

A simple bar chart displays the top 10 countries by total population using the UN Population Estimates 2024 dataset. The chart shows each country's name on the x-axis and its population in thousands on the y-axis, with gray bars of varying heights representing the values. The code uses d3's `select`, `descending`, `scaleBand`, `scaleLinear`, and axis functions to clean, sort, filter, and render the visualization, leveraging the `@curran/axis-labels` library for axis titles.

Loading thumbnail…

Fork of Axis Labels

This example shows a D3.js chart with labeled X and Y axes over a gray inner plot area, using a linear scale for both axes from 0 to 100. The visualization explicitly separates axis and label construction into modular functions: `axisBottom` and `axisLeft` render the tick marks, while separate `xAxisLabel` and `yAxisLabel` functions position and style text, such as rotating the Y-axis label 90 degrees. The code dynamically sizes the SVG to the container and applies configurable margins and offsets. All rendering uses D3's `join` method for declarative SVG element creation.

Loading thumbnail…

CISSM_CyberAttacks (Fork of Simple Scatter Plot)

This scatter plot visualizes CISSM cyber attack records, plotting event dates on the x-axis against attacker actors on the y-axis. Each circle is color-coded by the affected industry using D3’s `scaleOrdinal` and `schemeCategory10`. The visualization uses D3’s `scalePoint` for both axes and renders axis labels via the `@python-monty/axis_labels` library. The underlying data comes from the CISSM-EDA dataset, and the code forks an existing example to replace the sample data with cyber attack records.

Loading thumbnail…

Cyber Attacks

This example displays the first record from a CSV dataset of cyber security attacks as a raw JSON object in a preformatted text block. It loads the data with a JSON import, parses the CSV, converts the `Packet Length` and `Anomaly Scores` fields to numbers, and then renders the parsed object’s fields. The visualization relies on the native Web Platform APIs for parsing and DOM manipulation, without external charting libraries. The source data is Inscribo's Cyber Security Attacks dataset on Kaggle.

Loading thumbnail…

Solar System

This animated visualization depicts the planets of the solar system, with relative sizes to scale while orbital distances are not. Planets display radial gradients for a planet-like appearance, and the Sun features a glowing gradient effect. The animation uses D3.js transitions with `easeLinear` to rotate the planets continuously around the Sun. Data on planetary radii and distances comes from Wikipedia's list of gravitationally rounded objects. SVG gradients are defined in a `defs` element and applied via fill URLs.

Loading thumbnail…

World Population

This example displays the first row of a world population dataset as a formatted JSON object in monospace text. It uses population statistics from the Socioeconomic Data and Applications Center, covering decades from 1970 through 2022 alongside geographic attributes like continent, area, and density. The code loads the CSV data through an import statement, converts all numeric fields to JavaScript numbers, and renders the output using a template literal with a preformatted text element. The visualization presents raw data without additional charting libraries, focusing on exposing the dataset structure for inspection.

Loading thumbnail…

Natural Disasters

This example displays the first row of a CSV dataset listing natural disaster counts—floods, storms, and droughts—by country, rendered as a JSON object in a large monospace font. The data comes from the Socioeconomic Data and Applications Center, parsed and cleaned with Python before being loaded via `import data from './data.csv'`. Values are explicitly coerced to numbers, then a single record is formatted using `JSON.stringify` and injected into the container’s HTML template literal.