M

Martin Blatz

@martinblatz·37 public vizzes

Loading thumbnail…

Fatal Police Shootings In the U.S. Since 2015

This interactive visualization maps fatal police shootings in the U.S. since 2015, using data from the Washington Post. Users can colorize the geospatial points by attributes like race, gender, or flee status via a dropdown menu. A bar chart in the corner displays counts per category, while hovering over the color legend highlights the geographic distribution of a specific value. The map uses `d3.geoAlbersUsa` and `d3.geoPath` for projection, with points rendered as SVG circles and interactivity managed through React state.

Loading thumbnail…

Fatal Police Shootings Working Copy

This interactive map visualizes fatal police shootings across the United States, using a geoAlbersUsa projection and d3.geoPath to render state boundaries. Users can select an attribute from a dropdown menu—such as race, gender, or threat level—to color-code incident locations, with a color legend that supports hover highlighting to isolate specific categories. A bar chart shows the count of events per selected category. Data comes from the Washington Post's CSV dataset, rendered as SVG circles, with d3.nest and scaleBand/scaleLinear for aggregation and the chart layout.

Loading thumbnail…

Fatal Police Shootings Chart Working Copy

This interactive bar chart visualizes fatal police shootings in the United States, allowing users to explore how incidents distribute across categories such as race, gender, and armed status. The chart dynamically aggregates counts from the Washington Post dataset using d3.nest() and presents results through React components with SVG rendering. Users select a variable from a dropdown menu, triggering the x-axis to update via React's state management. The implementation uses d3.scaleBand and d3.scaleLinear for axes, with native SVG `<title>` tooltips embedded in each bar.

Loading thumbnail…

Fatal Police Shootings Charting

An interactive React dashboard charts fatal police shootings in the United States, using a dropdown menu to dynamically regroup counts by attributes like race, gender, or armed status. The bar chart updates through d3.nest() aggregation, with scales from d3.scaleBand and d3.scaleLinear rendering SVG rects. Data comes from the Washington Post’s Fatal Police Shootings Database, parsed via d3.csv. Tooltips display exact counts on hover.

Loading thumbnail…

Fatal Police Shootings Fully Interactive

This interactive map displays fatal police shootings across the United States, with each incident as a colored circle positioned using a geoAlbersUsa projection and d3.geoPath for state boundaries. Users select an attribute from a dropdown to colorize incidents by categories such as race, gender, or threat level, with an ordinal color scale and interactive legend that fades non-hovered points. The data comes from the Washington Post’s Fatal Police Shootings Database, cleaned and parsed via d3.csv in React, while hover states filter points dynamically.

Loading thumbnail…

Fatal Police Shootings Category Selection

This interactive map displays fatal police shootings across the United States, allowing users to color-code incidents by attributes such as race, gender, or flee status via a dropdown menu. The visualization uses d3.geoPath with a geoAlbersUsa projection to render state boundaries from TopoJSON data, while circles representing incidents are positioned using the same projection. A d3.scaleOrdinal color scale maps categorical values, with a React-based ColorLegend component showing the corresponding categories. Data comes from the Washington Post’s Fatal Police Shootings database, loaded and cleaned via d3.csv.

Loading thumbnail…

Fatal Police Shootings Working Copy

This visualization maps fatal police shootings across the United States, with semi-transparent red circles indicating the density of incidents. It overlays these points on a map of state boundaries using the `geoAlbersUsa` projection and `d3.geoPath`. The data comes from the Washington Post’s Fatal Police Shootings database, loaded via `d3.csv`, while the map uses TopoJSON from the us-atlas package. React manages the rendering, with the `useData` and `useUSGeo` hooks fetching the datasets.

Loading thumbnail…

Fatal Police Shootings Pie Chart Working Copy

This interactive visualization explores fatal police shootings in the U.S. using a dynamic bar chart that groups and counts incidents by selected attributes like race, gender, or flee status. Users select a variable from a dropdown menu, and the chart updates to show the distribution of events across categories. The application loads CSV data from the Washington Post database and uses React with D3 v5 APIs including d3.nest, d3.scaleOrdinal, d3.scaleLinear, and d3.pie to aggregate and prepare the data. The included Pie Chart working copy renders SVG elements but does not yet display the pie chart visualization.

Loading thumbnail…

Forbes Best Colleges Scatter Plot With Menus

A scatter plot maps Forbes’ 2019 Best Colleges data, plotting schools by two user-selectable attributes chosen from dropdown menus for the X and Y axes. The visualization emphasizes correlations between rank, alumni salary, net price, student population, and total annual cost. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `csv` to parse and scale the data, rendering SVG circles with tooltips via the `Marks` component. Color differentiates private and public institutions.

Loading thumbnail…

Fatal Police Shootings Mapped with Data Cleaned

This interactive map displays fatal police shootings across the United States, with red semi-transparent circles marking each event to reveal density clusters in population centers. The visualization uses the react framework with d3.geoAlbersUsa projection and d3.geoPath to render state boundaries from the us-atlas TopoJSON, while plotting incident coordinates from the Washington Post’s Fatal Police Shootings database. The code also cleans null data entries, converting blanks to “Unknown” for categorical fields and -1 for missing ages, and aggregates incident counts per state using d3.nest() for future analysis.

Loading thumbnail…

Mapped Data AlbersUsa

This example combines a U.S. state boundary map with data points from the Washington Post’s Fatal Police Shootings database, showing geographic patterns in the data through semi-transparent circles. It uses D3 v5’s `geoAlbersUsa` projection via `d3.geoPath` in a React framework, with the map sourced from `us-atlas` topojson and the data loaded from CSV using `d3.csv`. The visualization adjusts the projection’s fit to the state boundaries, and renders circles at lat/long coordinates, avoiding null values from the projection.

Loading thumbnail…

Fatal Police Shootings Mapped Across the U.S.

This example maps fatal police shootings across the United States as semi-transparent blue circles over a geographic outline of state boundaries. The visualization uses a d3.geoAlbers projection with d3.geoPath to render the map, while each incident’s coordinates are projected and drawn as SVG circles with opacity to reveal density clusters near population centers. Data comes from the Washington Post’s Fatal Police Shootings Database, parsed via d3.csv, and the map geometry is loaded from the us-atlas TopoJSON file using topojson.feature. The React-based component structure separates map rendering and data loading hooks.

Loading thumbnail…

Shooting Data Working Copy

This interactive scatterplot visualizes fatal police shootings in the United States, plotting individual incidents by rank along both axes while allowing users to filter by flee status through a dropdown menu. The visualization loads CSV data from the Washington Post’s Fatal Police Shootings Database, using React hooks for state management and dropdown interactions. D3’s scaleBand and scaleLinear map the racial categories and data points, while custom React components render SVG axes and circles with tooltips, all styled with the Poppins font.

Loading thumbnail…

US State Boundaries

This example displays a static map of US state boundaries rendered as SVG paths, using React for component structure and D3’s `geoPath` and `geoIdentity` projection to draw the geographic features. The data comes from the `us-atlas` TopoJSON file `states-albers-10m.json`, converted to GeoJSON via TopoJSON’s `feature` method. State shapes are filled with a gray tone and outlined in teal, creating a clean reference view of the country’s administrative subdivisions.

Loading thumbnail…

Fatal Police Shooting Data with Menus

This interactive scatterplot visualizes fatal police shootings from the Washington Post database, plotting Rank against itself with data points colored by flee status. Users filter the dataset through dropdown menus to examine different flee categories. The React application uses D3 v5 scales for axes and renders SVG circles via axis and mark components. Data loads through D3’s csv parser from a GitHub gist.

Loading thumbnail…

Fatal Police Shootings Bar Menu

This stacked bar chart displays the count of fatal police shootings, with each bar representing a racial category along the x-axis and color-coded segments indicating the victim's "flee" status. Built with React and the Vega-Lite API, it loads CSV data from the Washington Post's Fatal Police Shootings Database via `d3.csv`, aggregates counts with `.count()` aggregation, and renders with custom tooltips. The visualization uses Vega-Lite's mark configuration, D3's CSV parser, and the vega-tooltip handler for interactive exploration.

Loading thumbnail…

Loading Data with React and D3: Organized

This example demonstrates how to load and parse CSV data within a React application using D3. The Washington Post’s fatal police shooting dataset is fetched via `d3.csv`, with the resulting data stored in a React state hook. The interface displays a concise summary—file size in kilobytes, row count, and column count—computed using `d3.csvFormat`. The code separates data-loading logic, the main `App` component, and a utility `message` function into distinct files, highlighting an organized React structure.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and parse a CSV dataset of fatal police shootings in the US using D3 and React, displaying the data’s size, row count, and column count as text. The visualization shows a simple loading state until the data arrives, then presents the parsed summary. It uses `d3.csv` to fetch the dataset from a URL and React’s `useState` and `useEffect` hooks to manage the asynchronous data fetching and re-rendering. The data originates from the Washington Post’s police shootings database.

Loading thumbnail…

Fatal Police Shootings Data Summary

This D3.js example summarizes a Washington Post dataset on fatal police shootings from 2015 to 2020, showing file size, row count, and column count via a large `pre` element. It uses the `d3.csv` function to fetch and parse the CSV, then `d3.csvFormat` to measure the raw text length, displaying three key statistics. The code also includes commented alternatives using `fetch` with async/await and a nested Promise chain.

Loading thumbnail…

Smiley Stamp

A red crosshair target follows the mouse cursor across a blank SVG canvas. Clicking the mouse stamps a yellow smiley face with black eyes and a curved mouth at that location. The application uses React with the `useState` and `useCallback` hooks to track mouse movement and click events, dynamically rendering `Target` and `Smile` components. The target and smiley shapes are composed of SVG circles and lines, with the smiley’s eye offset and stroke width passed as props.

Loading thumbnail…

Point and Shoot

A red target circle and crosshairs follow the mouse cursor across an SVG canvas, tracking movement through React's `useState` and `useCallback` hooks. The example uses React 16.9 and ReactDOM to render the `Target` component, which draws the circle and two perpendicular lines with configurable stroke widths and ratio. The code includes an empty `onClick` handler that logs the event, preparing to record shot holes in the `holes` state array, though no drawing occurs on click yet.

Loading thumbnail…

React Hooks Bowl of Fruit

A React Hooks component renders a static bowl of five red apples as SVG circles, with clicking one highlighting it via a black stroke. The code uses `useState` to manage the selected fruit ID and passes the selection handler down to the `FruitBowl` component. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `range` generates the initial fruit array. The example demonstrates integrating D3 scales with React’s declarative rendering model, though commented-out code hints at possible transitions that are not active in this version.

Loading thumbnail…

Fatal Police Shootings Grouped Bar Chart

This grouped bar chart visualizes fatal police shootings from the Washington Post database, counting victims by age range along the x-axis and race as color-coded grouped bars. The visualization reveals that Black non-Hispanic and Hispanic individuals account for disproportionately more shooting victims under age 40 compared to U.S. Census demographics. Built with d3.v5 and Vega-Lite, the code loads CSV data via `d3.csv` and renders the chart using `vl.markBar()` with column and x field encodings for binning, y-axis count aggregation, and tooltip interactions. The interface uses Vega-Lite API methods like `vl.column().fieldN()` and `vl.color().fieldN()` to construct the visual encoding programmatically.

Loading thumbnail…

Vega-Lite Grouped Bar Chart

This grouped bar chart compares average BMI between smokers and non-smokers across different regions, using adjacent bars for each smoker status to make direct visual comparisons easier. The visualization loads medical cost data from a CSV file via d3.csv and renders with Vega-Lite, using the vega-lite-api to encode columns by region, x-axis by smoker status, and y-axis by average BMI. The color channel also maps to smoker status, and a tooltip displays the average BMI on hover. Display settings are customized through a config object that adjusts font sizes and axis styling.

Loading thumbnail…

Fatal Police Shootings by Race and Flee Status: stacked bar

This stacked bar chart displays the count of fatal police shootings, categorized by race on the x-axis and color-coded by the victim’s flee status. Data comes from the Washington Post’s Fatal Police Shootings Database, loaded via `d3.csv`. The chart is rendered using the Vega-Lite API (`vl.markBar` with `vl.x()`, `vl.y().count()`, and `vl.color()`) in D3 v5, with a custom config for axis styling and tooltips enabled through the vega-tooltip handler.

Loading thumbnail…

Best Colleges: Rank vs Cost

This example plots 650 colleges from the Forbes Best Colleges 2019 list, with rank on the x-axis and net price on the y-axis, using a circle mark colored by public or private status. It shows that while public schools tend to cost less, there is no strong correlation between rank and price. The visualization is built with the Vega-Lite API, which registers vega and vega-lite, and loads CSV data via d3.csv. Axis labels and titles are customized through a config object, and tooltips display the college name.

Loading thumbnail…

Best Colleges: Cost vs Salary

This scatterplot displays colleges from the Forbes Best Colleges of 2019 list, plotting net price on the x-axis against alumni salary on the y-axis. Each dot represents a school, with color distinguishing public from private institutions, revealing that private schools cost more but show no clear salary advantage. The visualization is built using Vega-Lite, d3.csv for data loading, and rendered as an SVG via the vega-lite-api, with custom configuration for axis styling and tooltips.

Loading thumbnail…

Best College: Rank vs Salary

This visualization plots colleges by their Forbes 2019 rank along the x-axis and alumni salary on the y-axis, with color distinguishing public from private institutions. It reveals that top-ranked schools offer higher graduate salaries, with the slope leveling off after the first 50 ranks. The chart is built using Vega-Lite API and D3.js, reading CSV data directly from a GitHub gist. Circles are rendered with a fixed size and slight opacity, while axes are customized through a shared config object to improve readability.

Loading thumbnail…

American Sheriff Race Compared to Constituents' Non White Population

This visualization compares the racial demographics of American sheriffs and their constituents. The chart plots sheriffs’ racial identity along the X axis, with the percentage of non-white residents in their community on the Y axis, using point color for political party and point size for population. Built with the vega-lite-api, it loads CSV data from the Reflective Democracy American Sheriffs database. The code uses Vega-Lite’s markCircle encoding, configures axes, and applies a custom tooltip handler via vega-tooltip.

Loading thumbnail…

American Sheriff Race Compared to Constituent Black Population

A scatterplot compares the race of elected sheriffs to the percentage of Black residents in their constituencies, using point size to encode total population and color to indicate political party. The visualization reveals that communities with higher Black populations tend to elect non-white sheriffs. The code loads CSV data from the Reflective Democracy American Sheriffs database, processes it via d3.csv, and renders the chart using the Vega-Lite API with a custom configuration for axis styling and tooltips.

Loading thumbnail…

American Sheriffs: Minority Representatives by Party

This visualization uses a bar chart to show the count of American sheriffs by political party, with bars colored by the sheriff’s racial identity. It clearly reveals that white sheriffs dominate all parties, while minority representatives are nearly absent among Republicans and Independents. Built with the Vega-Lite API, the chart encodes party affiliation on the x-axis, race as color, and uses a count aggregation for the y-axis. Data comes from a CSV file loaded via `d3.csv` from the Reflective Democracy American Sheriffs database, with tooltips provided by Vega-Tooltip.

Loading thumbnail…

Forbes Top Colleges Data Summary

This visualization displays a simple text summary of the Forbes Top Colleges 2019 dataset, reporting the file size, row count, and column count after loading a remote CSV. It uses D3 v5’s `d3.csv` method to fetch and parse the data from a GitHub gist, then formats the numbers with `d3.csvFormat` and updates a `<pre>` element. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and nested promises, illustrating different asynchronous loading patterns. No charts or graphical encodings are rendered.

Loading thumbnail…

American Sheriffs Data Summary

This example summarizes the Reflective Democracy Campaign dataset of elected sheriffs by displaying basic file metrics. It shows the CSV file's size in kilobytes, the number of data rows, and the number of columns. The visualization loads the data from a remote Gist URL using `d3.csv` and then displays the computed statistics as large text in a pre element. The code also includes commented-out alternatives using `fetch` with async/await and a nested promise approach.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a plain page, using a large font size defined inline with CSS. It serves as a minimal starting point for web development, with the HTML structure and styling contained in a single `index.html` file. The page also includes a script tag that logs “Hello JavaScript!” to the browser’s developer console. The example uses no external libraries, relying solely on vanilla HTML, CSS, and JavaScript.

Loading thumbnail…

Smiley Face Part II

A smiling face is rendered as a full-screen SVG, with a yellow circle for the head and smaller circles for the eyes, positioned symmetrically around the center. The component uses React’s declarative JSX to define the SVG elements, with dimensions and positions calculated from `window.innerWidth` and `window.innerHeight`. React 16.9 and ReactDOM render the graphic into the `#root` div, while inline SVG attributes like `stroke-width` and `r` control styling and geometry. The code computes the head radius from the window height minus half the stroke width, adapting to any viewport.

Loading thumbnail…

My Own Smiley Face

This example displays a yellow smiley face with rosy cheeks, eyebrows, and a wide smile, rendered as an SVG in a React component. It uses React 16.13.1 and D3 v6’s `arc` generator to create the mouth path, while circles define the face, eyes, pupils, and cheeks, with static coordinate offsets. The face is centered at (480, 250) on a 960×500 canvas, drawing all shapes within a single `<g>` transform. The code demonstrates a straightforward composition of React elements and D3’s arc API for a custom iconic graphic.

Loading thumbnail…

Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG graphic. It uses React to build the component tree and D3.js to calculate the mouth’s arc path. The face consists of a large yellow circle with a black stroke, two small eye circles, and a semi-circular mouth created with D3’s `arc()` function. The code sets explicit constants for dimensions and positions, then applies them within a SVG `<g>` transform to center the entire face.