Skip to main content
SimilarExport ZIP
100%

CyberAttacks Combined Vizs- Final Project Draft v3

✓ Published1🌍 Public
Ccoreyfnolan@gmail.com
Last edited Apr 16, 2024
Created on Apr 16, 2024

This gallery example combines a line chart, scatter plot, and interactive color legend to visualize cyberattack data. The line chart displays trends with a color legend; hovering a legend item filters the scatter plot to show data points for that industry. Users can also brush-select points in the scatter plot. The visualization uses D3.js, with the `observeResize` library handling responsive layouts, and data sourced from the `full_cyber_attack_data` package.

AI-generated description

A way of adding multiple visualizations to a single page.

MIT Licensed

Similar vizzes

Loading thumbnail…

CyberAttacks Combined Vizs- Final Project Draft v1

This example combines a line chart and a scatter plot to explore cyber attack data. The line chart plots yearly trends for selected industry codes, with interactive menus to filter the data. The scatter plot displays individual attack events, using a color legend to encode industry type and supporting brush selection to highlight specific data points. Both visualizations use d3 scales, axes, and color legends, with a linked hovered value from the line chart's color legend filtering the scatter plot's data. The code uses d3.flatGroup, d3.line, d3.brush, and d3.scalePoint, among other APIs, and pulls data from the full_cyber_attack_data package.

Ccoreyfnolan@gmail.com
95% match
Loading thumbnail…

CyberAttacks Combined Vizs- Final Project Draft v2

This visualization presents a combined line chart and scatter plot of cybersecurity attack data, which is filtered by three industry selectors. The line chart shows trends over time with a color legend, while the scatter plot displays the distribution of attack subtypes per year and allows users to directly brush-select data points on the plot. Built with D3.js, the code uses the `scaleTime`, `scaleLinear`, and `scaleOrdinal` APIs for scales, `line` for the line generation, and `brush` for interactive selection. The underlying datasets, `full_cyber_attack_data` and `newData`, are imported from an external package.

Ccoreyfnolan@gmail.com
94% match
Loading thumbnail…

CyberAttacks Combined Vizs- Final Project Draft v4 (all data version)

This visualization uses D3.js to combine a multi-line chart and a scatter plot on a single page, presenting cyber attack data across industries and years. The line chart shows attack counts over time per industry, with a color legend that filters the scatter plot by industry. The scatter plot displays individual attack events by date and attack type, using D3’s brush behavior to highlight selected points. Both charts rely on D3 scales (scaleTime, scalePoint, scaleOrdinal) and custom axis and legend modules, rendering as SVG. Data is sourced from the `@python-monty/full_cyber_attack_data` package.

Ccoreyfnolan@gmail.com
93% match
Loading thumbnail…

Fork of CyberAttacks Combined Vizs- Final Project Draft v3

This dashboard combines a line chart and a scatter plot to explore cyber attack data, with interactive menus for filtering by industry. The line chart visualizes trends over time, while the scatter plot displays event subtypes by year. Users can brush to highlight points and hover over a color legend to filter the scatter plot. Built with D3.js, it uses `scaleTime`, `scaleLinear`, `scalePoint`, `colorLegend`, and `brush`. The code imports data from `@python-monty/full_cyber_attack_data` and uses Bootstrap for styling.

RRishabh Sharma
89% match
Loading thumbnail…

CyberAttacks Final Draft v5

Two coordinated visualizations explore cyber attack data from 2014 to 2023. A multi-line chart displays attack counts per industry over time, with a clickable color legend; selecting an industry filters the adjacent scatter plot to show only that sector's attacks by year and attack type, colored by actor. The scatter plot supports d3.brush for highlighting points. The code uses d3.scaleOrdinal, d3.line, d3.axisLeft, and d3.axisBottom, rendering as SVG with data sourced from a local dataset.

Ccoreyfnolan@gmail.com
88% match
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.

Ccoreyfnolan@gmail.com
88% match
Loading thumbnail…

CyberAttacks Final Draft

This visualization presents cyber attack data from 2014 to 2023 through two linked panels. The left panel uses d3’s `line` generator and `scaleTime`/`scaleLinear` to show attack counts per industry over time, with a custom color legend supporting twenty categories. The right panel displays filtered scatter plot data using `scalePoint`, showing attack types by year for a selected industry, with actor-based coloring. Interaction includes hover highlighting and click-based filtering, implemented through d3 selection joins and event handlers.

Ccoreyfnolan@gmail.com
88% match
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.

Ccoreyfnolan@gmail.com
87% match