N

nathanjmuljadi@gmail.com

@NathanMuljadi·35 public vizzes

Loading thumbnail…

Final Project Data Viz

This interactive dashboard presents hate crime incidents in San Francisco, revealing the distribution of victims across suspect racial groups, bias types, offensive acts, and yearly trends. It combines a horizontal bar chart, a treemap, a bubble chart, and a time-series bar chart, all rendered as animated SVG graphics. The visualization uses D3 v7 APIs such as `d3.select`, `d3.csv`, `d3.rollups`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with hover-based tooltips for detailed data inspection, sourcing from the PD-Investigated-Hate-Crimes.csv file.

Loading thumbnail…

A10 Black and White Hat Visualization

This side-by-side comparison demonstrates how truncating the y-axis distorts perception of differences in average female height across five countries. The black hat chart starts its y-axis at 62.5 inches, exaggerating small variations, while the white hat chart begins at zero for honest representation. Built with D3 v7, the example uses d3.scaleBand for the categorical x-axis, d3.scaleLinear for both y-axes, and d3.axisLeft with tick formatting to display inch marks. The fabricated dataset is rendered as SVG bar charts with different fill colors to distinguish the misleading and truthful versions.

Loading thumbnail…

A10 White Hat Visualization

This visualization displays a bar chart comparing average female height across six countries, with each bar representing a country and its corresponding height value in inches. The chart uses D3 v7 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Bars are drawn as SVG rectangles, with value labels positioned above each bar. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with the y-axis formatted to show inch markers. The chart includes a title and axis labels for clarity.

Loading thumbnail…

A9 Proportional Symbols Map D3

This map visualizes the costliness of states across the US, with each state’s centroid marked by a proportional circle whose size reflects its expense rank. The Albers USA projection renders the geographic backdrop, while the circles are colored to highlight distinctions. Built with D3 v7 and the TopoJSON library, it uses `d3.geoAlbersUsa()` and `d3.geoPath()` to draw the map. An interactive tooltip appears on hover, displaying details about each state.

Loading thumbnail…

A9 Choropleth Map D3

This choropleth map visualizes U.S. county poverty rates for 2023, using a blue quantized color scale to encode the data and rendering SVG paths for each county with an Albers USA projection. It loads county boundary geometry from the us-atlas TopoJSON package and joins it to poverty CSV data keyed by FIPS code. Interactive tooltips appear on mouseover, displaying the county FIPS code and its poverty rate via d3’s event handling and DOM manipulation. The visualization uses d3.scaleQuantize and d3.geoPath for projection and drawing.

Loading thumbnail…

A9 Choropleth Map w/ Tooltips D3

A choropleth map of the United States colors each state according to its cost-of-living index from a CSV of expensive states, with tooltips revealing additional cost rank details on hover. The visualization uses D3 v7 and TopoJSON to load and render state boundaries via `d3.geoPath` with an Albers USA projection. A sequential blue color scale maps cost index values, while an interactive tooltip div appears on mouseover to show state-specific data.

Loading thumbnail…

Final Project Area Chart

This area chart shows the total number of individual victims in San Francisco hate crimes per year, aggregated from CSV data and rendered in SVG. It uses D3 v7 with `d3.csv`, `d3.rollups`, `d3.scaleTime`, `d3.scaleLinear`, and the `d3.area` generator with a monotone X curve. The x-axis spans yearly ticks, while the y-axis displays victim counts. Data is grouped by year, summed, and smoothed to reveal trends over time.

Loading thumbnail…

Final Project Bubble Chart

This visualization shows aggregated hate crime data from San Francisco’s PD-Investigated-Hate-Crimes.csv as an animated bubble chart. It filters out entries with zero suspects and displays the total number of suspects per offensive act and suspect race group, with bubble size encoding the count and color mapping race categories. The chart uses D3 v7’s `d3.forceSimulation` with collision and center forces to position the SVG circles, while interactive mouseover events reveal detailed tooltips. Data is loaded via `d3.csv` and aggregated using `d3.rollups`.

Loading thumbnail…

Final Project Bar Chart 2

This bar chart visualizes the total number of victims of police-investigated hate crimes in San Francisco, aggregated by the most serious bias type (e.g., Anti-Asian, Anti-Gay). Using D3 v7, it loads data from a CSV file, aggregates victim counts with `d3.rollups` and `d3.sum`, and renders an SVG with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The bars are sorted in descending order and hover-highlighted in orange.

Loading thumbnail…

Final Project Bar Chart 1

This bar chart shows the total number of hate crime victims in San Francisco, aggregated by the suspects' racial group as recorded in the PD-Investigated-Hate-Crimes.csv dataset. The data is processed using `d3.rollups` and `d3.sum` to aggregate victim counts per race, then sorted in descending order and filtered to exclude the three smallest categories. The visualization is rendered as an SVG using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bars styled via CSS and hover effects.

Loading thumbnail…

A8 Node-Link Diagram D3 (edge-bundling)

This example combines a force-directed network diagram with an adjacency matrix to visualize Facebook page connections in the food category. The network uses curved paths generated with D3’s `d3.curveBundle` for edge bundling, while `d3.forceSimulation` handles node positioning and dragging. Hovering over a node highlights its corresponding row and column in the matrix, with tooltips showing node names. Both visualizations load CSV data for nodes and edges, rendering in SVG.

Loading thumbnail…

A8 Adjacency Matrix D3

This example renders a 20-node adjacency matrix as an SVG heatmap, using D3 v7 to visualize connections from the Facebook Pages-food network dataset. Rows and columns represent sorted nodes, with steelblue cells indicating an edge between the corresponding source and target nodes. The code uses `d3.csv`, `d3.csvParseRows`, and `d3.cross` to populate a binary matrix from node and edge CSV files, then draws each cell as a `rect` with a mouseover tooltip that displays row and column labels along with the edge value.

Loading thumbnail…

A8 Node-Link Diagram D3 (force-directed)

This visualization shows a force-directed node-link diagram of Facebook page connections using data from CSV files, with interactive hover tooltips displaying node names. The code builds the network using D3.js v7’s `d3.forceSimulation`, applying link, charge, and center forces to position nodes and edges. SVG lines represent links and circles represent nodes, which users can drag via `d3.drag`. The simulation updates positions on each tick, while a styled `#tooltip` div appears on mouseover. Data loads through `d3.csv` and `d3.text` with manual parsing via `d3.csvParseRows`.

Loading thumbnail…

A7 Small Multiples Chart D3

This example presents a 2x2 grid of small multiple line charts, visualizing police shooting counts per year across four racial categories. It uses a D3 v7 ordinal color scale and time scale, with data loaded from a CSV file. Labels and legends are added with d3-legend. The code uses `d3.csv`, `d3.group`, `d3.rollup`, `d3.scaleTime`, and `d3.line` to construct shared axes, create the line generator, and arrange chart groups via manual translation transforms.

Loading thumbnail…

A7 Time Series Heat Map D3

This heat map visualizes police shooting incidents over time, using a grid of colored cells where each cell represents a specific year and month, with color intensity (from white to red) indicating the number of incidents. The visualization employs D3.js v7 with SVG rendering and animation, featuring a continuous color legend and interactive tooltip. Data is loaded from a CSV file, parsed using `d3.timeParse`, and aggregated into a yearly-monthly count matrix. The implementation utilizes D3's `scaleBand` for axes, `scaleSequential` with `interpolateReds` for the color scale, and the d3-legend library for the color legend.

Loading thumbnail…

A7 Multi-Line Chart D3

This example visualizes police shooting incidents over time by race, plotting yearly counts as multi-line charts for White, African American, Hispanic, and Other groups. It uses D3 v7 with time and linear scales, a line generator, and d3-legend to map data from a CSV file into an SVG. Missing years are filled with zero values, and axes display formatted year labels.

Loading thumbnail…

A6 Scatter Plot

This scatter plot visualizes the U.S. police shootings dataset, showing the count of shootings aggregated by victim age and race. The code uses D3 v5’s `d3.nest()` and `rollup` to group data, then plots aggregated circles with `d3.scaleLinear` for axes and `d3.scaleOrdinal` with the category10 scheme for race colors. Axes are labeled with `d3.axisBottom` and `d3.axisLeft`, and a color legend is rendered via the d3-legend library. A linked YouTube tutorial explains the implementation.

Loading thumbnail…

A6 Diverging Bar Chart

This diverging bar chart visualizes police shootings by race and gender, with male counts extending left from a central vertical axis and female counts extending right. The chart uses a red-blue diverging color scale, with color intensity corresponding to magnitude. Built with D3 v7, the visualization aggregates CSV data, filters to only male and female records, and uses separate linear scales for each gender to position the bars from the center. Race categories are placed on a band scale along the y-axis, while the diverging color interpolation and axes are constructed using D3’s scale utilities.

Loading thumbnail…

A6 Sequential Color Scale

This visualization shows police shooting counts by race and gender as grouped bar charts, with a sequential red color scale encoding the magnitude of each count. It uses D3 v7 with SVG rendering, loading data from a CSV file. The code aggregates records by race and gender, then employs `d3.scaleBand` for categorical axes, `d3.scaleLinear`, and `d3.scaleSequential` with `d3.interpolateReds` for the color fill. It also includes gender labels and axes styled with CSS.

Loading thumbnail…

A5 Scatter Plot Matrix D3

This scatter plot matrix uses the D3.js library to visualize the US Police Shootings dataset, with age, year, and month as the three variables. The splom displays all pairwise combinations of these variables in a grid of small multiples, with each cell showing a bivariate scatterplot. The code uses `d3.csv` to load the data, `d3.timeParse` to parse dates, and `d3.scaleLinear` with `d3.axisLeft` and `d3.axisBottom` for the axes. Column and row labels identify each variable, and the SVG rendering uses semi-transparent points to reveal overlapping data density.

Loading thumbnail…

A5 Line Chart D3

This line chart visualizes the count of police shootings per year from a CSV dataset. Using D3 v7, the chart aggregates records by the `Incident.Date.Year` field, sorts them chronologically, and renders a single steelblue path via `d3.line`. Linear scales (`scaleLinear`) map years and counts to the SVG canvas, with axes drawn by `axisBottom` and `axisLeft`. Axis labels and a bold title clarify the chart’s purpose.

Loading thumbnail…

A5 Bubble Chart D3

This bubble chart visualizes police shootings by age and race, with each circle representing the count of incidents for a specific age and racial category. The x-axis maps age, the y-axis maps the count of shootings, and circle size encodes frequency using a square-root scale so area remains proportional. The chart is built with D3 v7, loading CSV data, aggregating with `d3.rollup`, and rendering SVG circles using scales like `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` with `schemeCategory10` colors. Axes and labels are added via `axisBottom` and `axisLeft`.

Loading thumbnail…

A4 Heat Map in D3

This heat map displays the number of police shootings across 20 US cities, using a single row of rectangles colored from white to red to represent low to high incident counts. Built with D3 v7 and React, it reads CSV data from a GitHub gist and uses `d3.rollup` for aggregation, `d3.scaleBand` for horizontal positioning, and `d3.scaleLinear` for the color mapping. The visualization includes a rotated x-axis with city labels and renders entirely as SVG.

Loading thumbnail…

A4 Scatter Plot in D3

This interactive D3.js scatter plot visualizes police shootings by age, aggregating individual records from a CSV dataset into counts per age and mapping them on linear scales. Built with D3 v7, the SVG rendering uses `d3.csv` to load data, `d3.rollup` for aggregation, and `d3.scaleLinear`, `axisBottom`, and `axisLeft` from D3’s scale and axis APIs to produce axes. Circles are positioned via `selectAll` and `join`, with margins and window dimensions defining the full-viewport layout. The chart is a fork of a VizHub example, displaying counts of shootings on the y-axis against age.

Loading thumbnail…

A4 Bar Chart in D3

This visualization displays the number of police shootings recorded by racial category, using a bar chart where bar heights correspond to aggregated counts from a CSV dataset. The chart is rendered in SVG via D3.js v7, using `d3.csv` for data loading, `d3.rollup` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for positioning. CSS hover effects change bars from steelblue to orange, while axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

A3 Strip Chart

This strip chart visualizes the ages of individuals from a police shootings dataset, using a one-dimensional scatter plot with random horizontal jitter to reveal the distribution of ages along the vertical axis. The visualization is implemented in React with D3.js, using `scaleLinear` to map age values to screen coordinates and `extent` to calculate the domain. Data is loaded from a CSV file via the `csv` function in `useData.js`, and the chart is rendered as an SVG with custom React components for the axes and marks.

Loading thumbnail…

A3 Box Plot

This visualization shows the distribution of police shootings per year across racial categories, using box plots to display the minimum, first quartile, median, third quartile, and maximum for each group. The code groups the data by race, then calculates yearly counts and quantiles for each category. It uses React to render the SVG, with d3-scale functions such as `scaleBand` and `scaleLinear` for positioning, and `d3.quantile` for statistical summaries. Data comes from a CSV of police shooting incidents.

Loading thumbnail…

A3 Histogram Chart

This visualization displays a histogram of monthly counts of police shootings, revealing temporal patterns in the data. The chart uses React with SVG rendering and D3 v5 APIs, including `d3.bin` for binning dates into monthly intervals, `d3.sum` for aggregating counts, `scaleTime` for the x-axis, and `scaleLinear` for the y-axis. The data comes from a CSV file of police shooting incidents, processed through `d3.csv` and parsed dates via `timeParse`.

Loading thumbnail…

A2 Heat Map

This heat map visualizes the frequency of police shootings across U.S. states, using a red-to-blue color scale where higher counts appear bluer. The p5.js sketch loads CSV data from a GitHub gist via `loadTable`, counts incidents per state, and renders colored squares for each state along a vertical axis with state labels. The color mapping uses `map` and `lerpColor` to interpolate between red and blue based on the normalized count values.

Loading thumbnail…

A2 Dot Chart

This visualization plots the ages of individuals involved in U.S. police shootings against the frequency of shootings per age, using a dataset loaded from a GitHub-hosted CSV file. The chart displays axes with linear scales, tick marks, and labeled counts, with blue dots representing each age-to-count pair. The code uses p5.js’s `loadTable` function to parse the CSV, and `createCanvas` with `map` to position elements. It draws the scatter plot and axes using p5.js drawing functions like `ellipse`, `line`, and `text`.

Loading thumbnail…

A2 Bar Chart

This A2 Bar Chart visualizes counts of police shooting victims by race, using a logarithmic scale on the y-axis to accommodate wide disparities in the data. The chart loads a CSV from a GitHub gist using p5.js’s `loadTable()` function, aggregates race counts in `preload()`, and renders the bars with `rect()` on a 3000x3000 `createCanvas()`. Axis labels, tick marks, and bar values are drawn with custom mapping logic inside the `draw()` loop.

Loading thumbnail…

A2 Bar Chart

This bar chart visualizes the top 10 most populous countries as of January 1, 2024, based on the UN population estimates dataset. The chart displays each country's name on the x-axis and its total population (in thousands) on the y-axis, with bars extending from a baseline to the population value. Using D3.js, the code employs `scaleBand` for the categorical x-axis and `scaleLinear` for the numerical y-axis, while the `viz.js` module handles axis rendering and label placement. Styling includes a light inner rectangle background and padding between bars.

Loading thumbnail…

A2 Bar Chart

This bar chart visualizes the top 10 most populous countries as of January 1, 2024, based on the UN population estimates dataset. The chart displays each country's name on the x-axis and its total population (in thousands) on the y-axis, with bars extending from a baseline to the population value. Using D3.js, the code employs `scaleBand` for the categorical x-axis and `scaleLinear` for the numerical y-axis, while the `viz.js` module handles axis rendering and label placement. Styling includes a light inner rectangle background and padding between bars.

Loading thumbnail…

csv loader example

This example demonstrates a bar chart visualization of fuel economy data from a CSV file. It loads a cars dataset from a GitHub Gist using p5.js’s `loadTable()` function with a preload hook. The sketch then extracts the `economy (mpg)` column and renders horizontal bars on an 800×800 canvas via `createCanvas()` and `rect()` in the draw loop. Each bar’s width scales proportionally to the mpg value, showing the distribution across all car models. The code also uses `table.getColumn()` to access the data array.

Loading thumbnail…

Snowman in P5

This example shows a simple snowman built from three stacked circles on a dark canvas, with facial features and an orange triangle nose. The sketch uses the p5.js library, specifically the `createCanvas`, `circle`, `fill`, `arc`, and `triangle` functions within the `setup` and `draw` loops. The rendering approach is immediate 2D vector drawing, with a gray background set via `background(200)`. No external data is used; the scene is purely procedural.