q4428611@gmail.com

@qatest12321·5 public vizzes

Pie plot house pricing

This pie chart visualizes the distribution of patient conditions from the Heart Disease UCI dataset. It shows the proportional share of each condition category, with a legend displaying each condition’s name and percentage. The code loads CSV data via `d3.csv`, aggregates condition counts, and computes percentages. Using D3 v6, it generates an SVG pie chart with `d3.pie()` and `d3.arc()`, applies `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and appends a title and interactive legend.

Apr 21, 2024

Loading thumbnail…

Area plot for cyber attacks

This area plot shows the daily number of stroke cases over time, with the x-axis representing dates and the y-axis representing case counts. The visualization uses d3.csv to load data, d3.nest to group records by date, and d3.rollup to count patients with HadStroke equal to “Yes”. A d3.line generator creates the path, while d3.scaleTime and d3.scaleLinear map data to SVG coordinates. Axes are rendered with d3.axisBottom and d3.axisLeft, and the SVG output includes axis labels and a legend box.

Apr 18, 2024

Loading thumbnail…

Pie plot cyber attacks protocols

This pie chart visualizes the distribution of cyber attack protocols from a CSV dataset, showing the proportional share of each protocol as colored slices with a legend displaying labels and percentage values. The visualization uses D3 v6 to load the data, counts occurrences of each protocol value, and renders the chart as SVG using `d3.pie` and `d3.arc` generators. A categorical color scale from `d3.scaleOrdinal` with `schemeCategory10` colors the slices, while the legend is built manually with SVG rectangles and text elements.

Apr 18, 2024

Loading thumbnail…

Scatter Plot Cyber attacks

This scatter plot shows the relationship between packet length and anomaly scores in network traffic data. The visualization maps packet length on the x-axis and anomaly scores on the y-axis, with each circle representing a data point. The code uses d3.csv to load data from a GitHub gist, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render the scale ticks. Circles are appended to an SVG container using data joins, with blue fill and 50% opacity to show overlapping points.

Apr 18, 2024

Loading thumbnail…

Scatter plot

This scatter plot displays the relationship between a house’s year built and its price. The x-axis represents the year of construction, while the y-axis shows the selling price. The code loads a CSV file using `d3.csv`, maps the data, and renders an SVG with `circle` elements. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, using linear scales. The data is sourced from a gist file linked in the code.

Apr 18, 2024