faqihisaninja

@faqihisaninja·4 public vizzes

Fork of NYPD Complaints - Age of Officer

This stacked bar chart shows the number of civilian complaints against NYPD officers by officer age at the time of the incident, with each bar segment colored by complaint type. The visualization uses the vega-lite-api library to construct a bar mark with an x-axis encoding for the officer age field (`mos_age_incident`), a y-axis count, and color encoding for the complaint type (`fado_type`). Data comes from a CSV of over 12,000 complaints sourced from ProPublica, loaded via d3.csv, and rendered with vega and vega-lite, with custom axis styling from a config file.

Feb 9, 2021

Loading thumbnail…

Bar data visulization

This example shows a horizontal bar chart comparing population figures across six countries, with each bar’s length proportional to its population value. The visualization uses React with D3 v6, rendering SVG elements via d3.select, d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom. The code loads data from a CSV file, multiplies population values by 1,000, then maps countries to the y-axis and scaled populations to the x-axis, with steelblue rectangles and axis labels.

Feb 9, 2021

Loading thumbnail…

Fork of Hello HTML

A simple SVG smiley face rendered on an HTML page, using two black circles for eyes and a large yellow circle outlined in black to form the head. The code is a direct fork of a minimal "Hello HTML" example, relying on static SVG elements with explicit coordinates and styling rather than interactive or data-driven features. It uses the native SVG API within an HTML file, with body margins zeroed and overflow hidden for a clean presentation. No JavaScript libraries or external data sources are involved; the visualization is purely declarative markup.

Feb 8, 2021

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width, with points colored by species and accompanied by a color legend. Built with React and D3 v5, it uses d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color encoding. The SVG rendering separates axis, legend, and mark components, with circle elements representing each flower. Data is loaded asynchronously via d3.csv from a GitHub gist, and tick formatting uses d3.format for compact notation.

Feb 8, 2021