Proger666

@Proger666·3 public vizzes

Stylized Bar Chart

This interactive visualization displays the cumulative count of cases over time as a horizontal bar chart, showing daily recorded values from March to April 2020. The chart uses React to render SVG elements, with d3.scaleBand for the categorical date axis and d3.scaleLinear for the value axis. Each bar includes a tooltip via SVG title elements, while axes are constructed using d3's tick generation through custom React components. The data comes from a local CSV file, parsed with d3.csv, and styled with a custom Poppins font.

Apr 19, 2020

Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes the growth of COVID-19 cases over time, using data from the Data Canvas Sense Your City Dataset. The chart plots dates on the x-axis and cumulative case counts on the y-axis, with a smooth, naturally curved line connecting the data points. Built with React and rendered as SVG, it uses D3’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to generate the path. The visualization includes custom axis components and styling via CSS, with tooltips on points commented out in the Marks component.

Apr 19, 2020

Loading thumbnail…

HTML Starter

This example visualizes a network of software products and licensing options, showing how different Check Point security solutions connect across categories. It uses D3.js v5 to render a directed graph as SVG elements, with nodes positioned using ordinal scales based on group and rank values. Links are drawn as curved Bézier paths, and hovering over a node highlights its connections. The code implements custom styling, color encoding by group, and interactive hover effects through CSS classes and event handlers.

Apr 3, 2020