J

Jose Morales

@JoseMorales7·38 public vizzes

Loading thumbnail…

Aligned Smoothed Interactive NYC Crash Plot with React & D3

This example shows the smoothed daily count of motor vehicle collisions in New York City over time as a line chart. The data, loaded from a CSV file, includes crash counts, injuries, and fatalities. The visualization applies a moving average with a window size of 50 to smooth the raw daily counts, revealing broader trends. Built with React and D3 v7, the chart includes interactive tooltips that appear when hovering over data points, displaying the exact date and crash value. The visualization handles window resizing and uses D3 scales, axes, and line generators to render the plot.

Loading thumbnail…

More Optimized Interactive NYC Borough map with scroll and zoom

This interactive NYC borough map visualizes traffic crash data, showing both aggregate borough statistics and individual incident points for cyclist, pedestrian, and motorist injuries and fatalities. Users can pan and zoom with mouse wheel and drag gestures via a debounced render pipeline. The visualization combines an SVG layer for borough outlines rendered with `d3.geoPath` and `geoMercator`, alongside a Canvas layer for efficient point rendering. Incident data is loaded from per-category CSV files, while a legend toggles visibility for six incident categories using React state.

Loading thumbnail…

Test Fork of Optimized Interactive NYC Borough map with scroll and zoom

This interactive map shows NYC traffic crash incidents, distinguishing between injured and killed cyclists, pedestrians, and motorists by colored, clickable points. A legend toggles visibility of the six incident categories, while scrolling zooms into boroughs and dragging pans across the map. The React app uses D3’s `geoMercator` and `geoPath` for borough rendering, with coordinates from topojson data and incident CSV files for each category.

Loading thumbnail…

Aligned Interactive NYC Crash Plot with React & D3

This visualization displays daily motor vehicle collision counts in New York City from July 2016 to January 2017 as a line chart. React manages the component lifecycle and state, loading data from a CSV file into the application, while D3 v7 handles the rendering through svg, scaleTime, scaleLinear, line, axisBottom, axisLeft, and timeFormat. The chart includes a tooltip that appears on hover, showing the exact date and crash count for each data point.

Loading thumbnail…

Optimized Interactive NYC Borough map with scroll and zoom

This interactive map of New York City boroughs displays the locations of cyclist, pedestrian, and motorist injuries and fatalities. Users can zoom and pan the map, and toggle the visibility of six incident categories via a legend. The visualization is built with React, using D3’s `geoMercator` and `geoPath` to render the TopoJSON boundary data and project incident points from CSV files. Point rendering and map transforms are optimized for smooth animation.

Loading thumbnail…

Smoothed Interactive NYC Crash Plot with React & D3

This example shows a smoothed time-series line chart of daily motor vehicle collisions in New York City, with hover interactions revealing exact dates and crash counts. The React app loads CSV data, applies a 50-day moving average to the raw counts, and passes the result to a D3 visualization built on `scaleTime`, `scaleLinear`, and `line`. Interactive tooltips and a highlight circle appear when users hover over transparent overlay points, using `timeFormat` for date labels. The SVG is rendered via React’s `createElement` and updated imperatively with D3’s `select` and `enter` selections.

Loading thumbnail…

Interactive NYC Crash Plot with React & D3

This example shows the daily number of motor vehicle collisions in New York City from July 2016 through January 2017 as a time-series line chart. The visualization, built with React and D3 v7, uses `d3.scaleTime` and `d3.scaleLinear` to map dates and crash counts, with `d3.line` generating the path. Hovering over transparent circles reveals a tooltip displaying the exact date and crash count, using `d3.timeFormat` for date labeling. The data comes from a CSV file containing daily crash totals.

Loading thumbnail…

Fork of Interactive Sparkline

This interactive area chart visualizes monthly car crash counts in New York City from July 2012 through September 2025, using data from a local CSV file. A purple line and filled area show the trend, while hovering over the chart displays a vertical guide line, a highlighted point, and the exact crash count and month in a large text label. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line, d3.area, and d3.bisector to map data, render shapes, and locate hovered points, with d3.pointer tracking mouse position.

Loading thumbnail…

Sparkline Crash data

This interactive sparkline chart displays monthly crash counts from 2012 to 2025, rendered as a filled area line graph. The visualization presents the full time series and highlights the monthly value on hover, updating a large text label with the exact date and crash count. Built with React and D3.js, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.bisector` to map data, draw the chart, and handle pointer interactions. The data originates from a local CSV file.

Loading thumbnail…

NYC Interactive Crash Bar Chart with React & D3

This interactive bar chart visualizes the distribution of vehicle collisions across a 24-hour day in New York City, stacking counts of injuries, deaths, and other crashes for each hour. Built with React 19 and D3 v7, it uses `d3.stack` to create layered bars and `d3.scaleLinear` for axes. Hovering a bar triggers D3 mouse events that dim non-hovered bars and display a tooltip with hourly breakdowns. The chart resizes responsively by recalculating SVG dimensions, and loads data from an external CSV file.

Loading thumbnail…

NYC Crashes Interactive Sparkline

This interactive sparkline visualizes monthly motor vehicle crashes in New York City from 2012 to 2025, using data from a CSV file. A thick purple line with a light area fill shows the trend, while hovering reveals a tooltip displaying the exact crash count and month via a bisector-based lookup. Built with D3.js, it uses `scaleTime`, `scaleLinear`, `line`, and `area` generators, plus `pointer` events for interactive hover feedback on the SVG canvas.

Loading thumbnail…

NYC Crash Bar Chart Interactive Legend with React & D3

This stacked bar chart displays NYC collision data by hour, breaking down each bar into injuries, deaths, and other crashes. Hovering over legend items highlights the corresponding stack with a black stroke and fades others to 20% opacity. The visualization uses React for state management and D3 v7 for rendering, including `d3.stack`, `d3.scaleLinear`, and `d3.axisBottom`. It loads hourly crash statistics from a CSV file via `d3.csv` and handles window resizing with dynamic SVG dimensions.

Loading thumbnail…

Interactive NYC Borough map with scroll and zoom

An interactive map of New York City boroughs visualizes traffic crash data, representing the locations of injured and killed cyclists, pedestrians, and motorists as colored points. Users can zoom towards the cursor with the mouse wheel and pan by dragging, while toggling the visibility of six incident categories via a legend. Built with React, the map is rendered as SVG using D3’s `geoMercator` and `geoPath` for the geographical projections. Crash statistics are loaded from a CSV file, and the incident coordinates are read from separate CSV files per borough.

Loading thumbnail…

Interactive NYC Borough map with scroll and zoom

An interactive map of New York City's five boroughs colored by name, with an optional overlay of incident points. Across each borough, users can toggle visibility for six crash-related categories—cyclists, pedestrians, or motorists, each further split into injured or killed—using checkboxes or clicks in the legend. The React app loads data from CSV files for incident locations and a TopoJSON file for borough boundaries, rendering with D3's Mercator projection and `geoPath`. Hovering over a borough displays a tooltip with aggregate crash statistics from a separate CSV.

Loading thumbnail…

Interactive NYC Borough map with scroll and zoom

An interactive map of New York City's five boroughs colored by name, with an optional overlay of incident points. Across each borough, users can toggle visibility for six crash-related categories—cyclists, pedestrians, or motorists, each further split into injured or killed—using checkboxes or clicks in the legend. The React app loads data from CSV files for incident locations and a TopoJSON file for borough boundaries, rendering with D3's Mercator projection and `geoPath`. Hovering over a borough displays a tooltip with aggregate crash statistics from a separate CSV.

Loading thumbnail…

NYC Crash Point Map with interactive legend

This interactive map displays motor vehicle crash locations across New York City's five boroughs, with each borough filled with a distinct color. A legend allows users to hover over borough names, fading non-selected areas to highlight crash density in a specific region. The visualization uses React with d3.geoMercator and d3.geoPath to project TopoJSON boundary data from `nyc_boroughs.topo.json` into SVG paths. Crash points from a CSV file are rendered as small black circles, with positions calculated via the projection function.

Loading thumbnail…

NYC Crash Point Map with interactive legend

A map of New York City displays crash locations as small black dots over borough polygons, each tinted with a distinct color. An interactive legend lets users hover over a borough name to highlight its corresponding region and dim others. Built with React and D3, the visualization uses `d3.geoMercator` and `d3.geoPath` to project and render the TopoJSON-derived borough boundaries, while crash coordinates from a CSV file are plotted as SVG circles. Hovering a legend item dims non-matching boroughs and intensifies crash point opacity for the selected area.

Loading thumbnail…

NYC borough map with interactive legend

An interactive map of New York City's five boroughs displays traffic crash counts from a CSV dataset as circular markers with numeric labels, overlaid on a TopoJSON-derived GeoJSON map. Users hover over legend items or borough polygons to highlight matching regions while dimming others. The visualization uses React for component state and layout, D3 v7's `geoMercator` and `geoPath` for the map projection, and `select` for SVG updates. A semi-transparent legend communicates the fixed borough color scheme.

Loading thumbnail…

Interactive NYC Borough map

An interactive map of New York City's five boroughs, colored distinctly, serves as a base for exploring traffic crash data. Users toggle checkboxes in a legend to display layers of colored points representing injured or killed cyclists, pedestrians, and motorists. The map shows these incident locations as colored circles at varying opacities. Hovering over a borough reveals a tooltip with summary crash statistics. Built with React, it uses D3's `geoMercator` for projection, `geoPath` for drawing, and `topojson-client` for handling geographic data, visualizing point data loaded from CSV files.

Loading thumbnail…

Fork of HTML Starter

This fork of an HTML starter template displays an interactive network graph using D3’s `forceSimulation` API to arrange nodes and links in a physics-based layout. The visualization loads JSON data from a local file (likely a small social or citation network) and renders it as draggable circles connected by curved lines, with hover and drag interactions. Styling is handled via inline SVG elements and CSS, allowing smooth animation of the force-directed movement. The example serves as a minimal, self-contained demonstration of dynamic graph exploration.

Loading thumbnail…

Interactive NYC Borough map

This interactive map of New York City’s five boroughs visualizes traffic crash statistics, distinguishing injury and fatality counts for cyclists, pedestrians, and motorists. A legend allows users to toggle six incident categories on and off, revealing colored point markers for each crash location. The map renders boroughs as colored SVG paths using `d3.geoMercator` and `d3.geoPath`, with data loaded from CSV files via `fetch`. Hovering over a borough displays aggregated crash counts from `CrashByBorough.csv` in a tooltip.

Loading thumbnail…

Interactive NYC Borough map

This interactive map of New York City’s five boroughs visualizes traffic crash statistics, distinguishing injury and fatality counts for cyclists, pedestrians, and motorists. A legend allows users to toggle six incident categories on and off, revealing colored point markers for each crash location. The map renders boroughs as colored SVG paths using `d3.geoMercator` and `d3.geoPath`, with data loaded from CSV files via `fetch`. Hovering over a borough displays aggregated crash counts from `CrashByBorough.csv` in a tooltip.

Loading thumbnail…

NYC Crash Point Map

This visualization displays a map of New York City's five boroughs with individual crash points from 2025 overlaid as small black circles. The map uses d3.geoMercator and d3.geoPath to render TopoJSON-converted GeoJSON borough boundaries, colored distinctly via a React legend. Crash coordinates from the NYC Motor Vehicle Collisions CSV are projected onto the map. The visualization is built with React, d3.v7, and renders to SVG, with responsive sizing and crash data loaded via a custom React hook.

Loading thumbnail…

Vehicles in NYC Crashes

This bar chart displays the number of crashes for each vehicle make in NYC, using data from the Motor Vehicle Collisions – Vehicles dataset. The chart is built with React and D3 v7, using `d3.scaleBand` and `d3.scaleLinear` to map makes to crash counts, with axes from `d3.axisBottom` and `d3.axisLeft`. The SVG is redrawn on resizing, and bars are rendered as `rect` elements.

Loading thumbnail…

NYC Borough map

This map of New York City boroughs uses distinct colors for each borough, with semi-transparent circles and white text labels displaying the number of motor vehicle crashes per borough. The visualization loads TopoJSON geographical data and CSV crash statistics, then renders them as an SVG using React, D3’s `geoMercator` and `geoPath` projections, and `topojson-client`’s `feature` conversion. Circle radius is determined by the digit count of crash totals, providing a quick comparison of crash frequency across the five boroughs.

Loading thumbnail…

Fork of NYC Borough map

A responsive world map renders country boundaries from a TopoJSON file fetched from the visionscarto-world-atlas package, converted to GeoJSON via `feature` from `topojson-client`. The React app manages viewport-size state and passes the data to a separate `viz` module, which builds the visualization using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. Countries fill with a light gray and white strokes overlaid on a graticule grid and outline, all rendered as SVG paths.

Loading thumbnail…

NYC Borough Crash Data

This stacked bar chart visualizes NYC collision data across the hours of the day. Each bar is segmented by the proportion of crashes resulting in injuries, deaths, and other outcomes, as derived from a CSV loaded with d3.csv. The visualization uses React hooks (useRef, useEffect, useState) to manage responsive dimensions and re-render the viz function on window resize. It employs d3.scaleLinear for axes, d3.stack for the stacked segments, and d3.axisBottom/axisLeft with custom time-based tick formatting for the hour labels.

Loading thumbnail…

NYC Crash Normalized Bar Chart with React & D3

This stacked bar chart displays NYC motor vehicle crash data by hour, showing the proportion of injuries, fatalities, and all other crashes normalized per collision. The visualization uses d3.stack to create stacked bars, with React managing the responsive SVG container and d3.scaleLinear, d3.axisBottom, and d3.axisLeft constructing the axes. Data loads from a CSV file, and percentages are computed by dividing injury and fatality counts by total crashes. A color-coded legend identifies the three stacked categories, while a custom tick format converts numeric hours into AM/PM labels.

Loading thumbnail…

NYC Crash Bar Chart with React & D3

This bar chart visualizes the number of vehicle collisions in New York City across the 24 hours of a day, breaking down each hour's total into stacked segments for injuries, deaths, and other crashes. The chart uses React to manage the SVG and window resizing, while D3's `scaleLinear`, `axisBottom`, and `stack` APIs handle the data scaling, axes, and stacked bar construction. Data is loaded from a local CSV file.

Loading thumbnail…

NYC Crash Plot with React & D3

This line chart tracks the daily number of motor vehicle collisions in New York City from July 2016 through January 2017, revealing fluctuations that dip on holidays and spike on certain weekdays. The visualization is built as a React component that loads CSV data and passes it to a D3 rendering function, which uses `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to draw the plot with labeled axes.

Loading thumbnail…

Spotify Dataset Basic Scatter Plot with Axis Using React & D3

This scatter plot visualizes 500 tracks from a Spotify Music Dataset, plotting song duration in milliseconds against a popularity score from 0–100. The chart uses a linear scale for both axes, with the x-axis labels formatted as minutes:seconds. Built with React and D3 v7, the visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to create and scale the plot. Data is loaded from a CSV file and rendered as black circles with a radius of 6.

Loading thumbnail…

Spotify Dataset Basic Scatter Plot with React & D3

This example shows a basic scatter plot of Spotify track data, mapping song duration in milliseconds along the x-axis against track popularity on the y-axis. Each circle represents one of 500 songs from a Kaggle dataset subset. Using React hooks to load the CSV file, the rendering delegates to a D3 function that applies `scaleLinear` and `extent` to compute the scales. The D3 `select` and `join` methods create the circle elements.

Loading thumbnail…

Spotify Music Dataset Loading Data

This example loads a Spotify music dataset and displays the first 500 entries as raw JSON text in a `pre` element. The visualization uses a state machine to sequentially render three states: `undefined`, `'LOADING'`, and the parsed data array. It fetches `data.csv`, parses it with `d3.csvParse`, and converts `track_popularity` and `duration_ms` to numbers. Each state transition triggers a re-render via the D3 `select` and `.join` pattern, showing how asynchronous data loading can be handled transparently with D3 v7.

Loading thumbnail…

NY Car Crashes Loading Data

This example demonstrates asynchronous data loading in D3 v7. It fetches a CSV file containing 500 records from NYC OpenData’s Motor Vehicle Collisions – Vehicles dataset, filtered to sedans. The visualization initially shows a loading state, then parses the CSV with `d3.csvParse` and converts the UNIQUE_ID field to numeric values using a `for` loop. The processed data is stored in a state object and displayed as a JSON-formatted text preview inside a `<pre>` element via `d3.select` and `.text()`.

Loading thumbnail…

NY Motorcycle Crashes Loading Data

This example demonstrates loading and displaying a subset of NYC motorcycle crash data. The visualization shows the raw dataset as a JSON-formatted list of objects, with each row containing attributes like vehicle make, model, driver sex, and contributing factors. Initially, the view displays “LOADING” before fetching the CSV file and parsing it using `d3.csvParse`. Once loaded, the code converts the `UNIQUE_ID` field to numeric values and re-renders the data via `d3.select` and `join` operations.

Loading thumbnail…

Fork of Circles with D3

Seven colored circles of varying sizes and neon hues sit fixed on a pale green field, each gently orbiting its anchor point in a slow circular drift. The animation is driven by a continuous timer from the `d3-timer` library, updating each circle’s position with sine and cosine functions every frame. The visualization uses D3 v7’s `select` and join operations to efficiently create and update the SVG circles, with data defined inline as hardcoded coordinates, radii, and fill colors.

Loading thumbnail…

Fork of Circles with D3

A network of circles is generated from a fixed set of nodes and links, rendered on a full-screen canvas. D3’s `d3.forceSimulation` computes the layout, while `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` control the node positions. The visualization uses a render loop that clears the canvas with `clearRect` and draws each circle as a filled arc, coloring nodes and links based on their source and target data. The example runs with d3.v7 as an ES module, importing the visualization function into a D3-based script.

Loading thumbnail…

Fork of Circles with D3

This visualization displays a static composition of five semi-transparent circles positioned at fixed coordinates on a light green canvas. Rendered as an SVG using D3 v7, each circle has a distinct size, color, and opacity value defined in a hardcoded JavaScript array. The code uses `select` to bind the data to circle elements and `interval` from D3, though the timer only logs a sine calculation without affecting the visual output.