S

Steve_Nashon

@Steve-Nashon·16 public vizzes

Loading thumbnail…

Fork of Psuedo Spider Chart

A pseudo-spider chart displays seven orange data points arranged around a central dot, connected by a semi-transparent polygon and linked with orange line segments. The visualization uses concentric grey circles as radial gridlines and six axes extending outward from the center, with numeric labels marking increasing values. Rendered as static SVG, the chart employs circles, lines, and paths defined directly in the markup, with text elements styled using the Share Tech font. The design suggests a radar-style comparison, though it does not encode interactive behavior or dynamic data updates.

Loading thumbnail…

Fork of Fork of test of Fork of SANKEY Experiment

This example presents a sankey diagram showing the flow of notifications from a total source into matched and scrap categories, which further break down into subcategories like XRM, Prodc, PN OTD, CRB, and scrap. Built with React and D3.js, the visualization uses the custom `d3.sankey` layout API to compute node positions and link paths. The SVG rendering displays interactive nodes with draggable rectangles and hoverable links, while data is loaded from a static JSON file containing node names and link values.

Loading thumbnail…

Fork of test of Fork of SANKEY Experiment

This fork of a SANKEY experiment visualizes the flow of notifications into matched and scrap categories, with further breakdowns into XRM, Prodc, PN OTD, and CRB. The diagram uses a custom `d3.sankey` layout function to compute node positions and link paths, rendering with SVG via D3’s selection and path APIs. Node and link styling is defined through CSS classes, including hover effects on links. Data comes from a JSON file specifying nodes and weighted links, and interactions like dragging are enabled on node rectangles.

Loading thumbnail…

Fork of Now Next Later Tasks

This visualization displays a hierarchical task organization with three concentric circles representing "Later," "Next," and "Now" task groupings. The code uses D3 v7 force simulation to position task nodes within their respective group circles, with jQuery handling the container setup. Each task is rendered as an SVG circle with text labels, and the `adaptLabelFontSize` function dynamically adjusts text size to fit within the node boundaries. The visualization demonstrates task prioritization through radial tree-like grouping, though the visible data structure is partially truncated in the provided code.

Loading thumbnail…

Fork of Fork of D3.js collapsibleRRR tree with boxes testing

This interactive SVG tree diagram visualizes hierarchical data with collapsible nodes, rendering each node as a colored box based on its `type` field. Built with D3.js v3 and jQuery, the example displays node labels, links with directional arrows, and tooltips on hover. The layout dynamically calculates width and height from the tree structure, and nodes expand and collapse with animated transitions when clicked. The embedded JSON data demonstrates a multi-level hierarchy with synchronized and asynchronous link types.

Loading thumbnail…

Fork of Monoliths on a Globe

A fork of the "Monoliths on a Globe" prototype plots three monolith locations—Utah, Romania, and California—as steelblue circles on an orthographic globe. The visualization uses d3.geoOrthographic with d3.geoPath and topojson to render world boundaries at 50m and 110m resolutions, switching to the lower detail during drag and zoom interactions. Circles are positioned via a projection, with d3-tip tooltips showing names on hover. Population values are read from a CSV but are not used in the visible rendering, as circles have a fixed radius.

Loading thumbnail…

Migrant Deaths Linked Views in World Map

This linked-view visualization displays migrant deaths and disappearances on a world map with a synchronized time-series histogram. Users brush over the histogram to filter the map’s proportional circles, which scale by total dead and missing per location using d3.scaleSqrt and d3.geoNaturalEarth1 projection with d3.geoPath for world atlas land features. The histogram aggregates monthly totals via d3.histogram and d3.timeMonths, with d3.brushX enabling selection. Data comes from the Missing Migrants Dataset, rendered as SVG within a React framework.

Loading thumbnail…

Fork of Chart

This interactive dashboard visualizes crime rates across Indian states and territories, letting users explore data by year and crime type through a choropleth map and two donut charts. The map displays state-level aggregates using `d3.geoPath` with TopoJSON, while the donut charts show proportional breakdowns of crimes by year or type. Both charts use animated transitions with `d3.arc` and `d3.rollups` for data grouping. The visualization relies on static CSV and TopoJSON files from a GitHub gist and the deldersveld repository, with a dropdown menu driving updates.

Loading thumbnail…

Scatter plots with menus

A scatter plot with an interactive dropdown menu displays the relationship between a selected column and weight for automobile data. Users choose a numeric attribute like horsepower or acceleration from the menu, and the x-axis updates accordingly using d3.scaleLinear, axisBottom, and axisLeft. The visualization is rendered as SVG with circles, and the menu is built via a reusable dropdown function that appends select and option elements. Data comes from a loaded CSV file containing car specifications.

Loading thumbnail…

Fork of Leaflet + D3 Map

This map visualization overlays hand-drawn vector features of Worli, Mumbai onto an Esri World Imagery basemap using Leaflet and D3. The code loads GeoJSON data from `lines.js` and `polygon.js` containing road lane polylines and pincode area polygons, rendering them as SVG paths. Geographic coordinates are converted to screen space via `d3.geoTransform` and Leaflet's `map.latLngToLayerPoint` method. Polygons update on zoom events through a zoom handler that recomputes their path geometry.

Loading thumbnail…

making a Bar graph

This example shows the planting area per year as a bar chart, highlighting the bar under the mouse cursor with a red outline. Built with D3 v5, it renders to an SVG canvas and uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to map the `Area` values from the `data.csv` file to bar heights. The chart includes labeled axes, a title, and background grid lines.

Loading thumbnail…

Fork of making Scatter plottes

This visualization shows the relationship between years and planted area, with each data point plotted as a steelblue circle. The y-axis scales the area values linearly, while the x-axis uses a point scale for years. Built with D3 v5, the code renders SVG circles, customizes axis ticks and grid lines, and includes axis labels for clarity. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of d3.js with leaflet.js

This example overlays red SVG circles on an OpenStreetMap tile layer using D3.js and Leaflet.js. It loads geographic coordinates from circles.json and renders each point as a fixed-radius circle positioned via Leaflet’s `latLngToLayerPoint` projection, which updates on map view changes using the `viewreset` event. The visualization demonstrates how to combine D3’s data-binding and SVG manipulation with Leaflet’s interactive map APIs for custom geographic overlays.

Loading thumbnail…

Fork of making a Bar graph

This bar chart visualizes the Area values from a CSV dataset across various years, rendered as steelblue rectangles on an SVG canvas. The visualization uses the D3.js v5 library to load and map the data, with each bar's height corresponding to the Area measurement. A supplementary JavaScript array demonstrates dataset manipulation by finding the index of a specific car brand, though this is logged to the console rather than displayed graphically. The chart is styled with CSS, adjusting the rect fill color and enlarging text for readability.

Loading thumbnail…

general update

This example demonstrates dynamic updates to visual elements using D3.js version 5. It shows a set of black and white circles arranged in two groups that respond to data changes over time, with a timer triggering the removal of one circle from each group. The visualization also includes a static arc path and a separate face illustration with features like eyes, nose, and mouth drawn using D3's `arc()` generator. The code specifically uses D3's selection, data join, and exit/enter operations to handle the general update pattern for removing elements when the underlying data array is filtered.

Loading thumbnail…

Fork of Fork of making Scatter plottes

This fork of a scatter plot example visualizes harvested crop area per year from a small CSV dataset, drawing a smooth area chart rather than discrete points. The D3 v5 code sorts the data chronologically, then uses `scaleLinear` and `scaleTime` to map area and year values to SVG coordinates. It renders the area with `area()` and `curveBasis`, while grid lines and axis labels are generated via `axisLeft`, `axisRight`, and `axisBottom`. The SVG canvas is 960 by 500 pixels, with the area filled steelblue and black stroke, and the chart includes a title and axis labels.