Jonathan

@eatAsnack·7 public vizzes

Fork of Gun Deaths in Florida

This re-creation of the original Florida gun death chart uses a red area chart with a black line and points to show the raw number of firearm murders from 1989 to 2016. The code draws the area and line with `d3.area` and `d3.line`, sets scales with `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. It plots data from the Florida Department of Law Enforcement, filtered to the relevant years.

Mar 3, 2021

Loading thumbnail…

Fork of Fork of jb project1

This example displays a hardcoded list of car objects containing make, year, and price fields. The page renders a `<pre>` element with the text “hi world” styled at a large font size. After importing the car data from `anIndex.js`, the script logs a message to the console and attempts to append that message to the DOM element. The visualization uses D3 v5 and relies on standard DOM manipulation rather than any scalable graphics or charting API.

Mar 3, 2021

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

This example visualizes a hierarchical dataset as a zoomable sunburst diagram. It displays the flare visualization toolkit's class hierarchy, where the size of each arc corresponds to a numeric value, and clicking on a segment zooms into that branch. The code uses D3 v5's `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` handle color encoding. Smooth zooming and panning animations are implemented via D3 transitions and `attrTween`, rendering the result as SVG.

Mar 3, 2021

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical flare dataset, using arc segments sized by value and colored by top-level category. Clicking a segment zooms into that subtree, with smooth animated transitions reshaping all arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.interpolate` to drive the SVG rendering and 750ms transition animations. The data is loaded via the Observable standard library's `require` function.

Mar 3, 2021

Loading thumbnail…

Fork of Scoter Plot

This example displays a scatter plot of the Iris dataset, visualizing sepal length against sepal width. Each flower’s measurements are plotted as a teal circle, with the x-axis labeled “Sepal Length” and the y-axis labeled “Sepal Width.” The visualization uses the D3.js `scaleLinear` and `extent` functions to compute scales, and React components for rendering axes and points. Data is loaded via D3’s `csv` function from a remote URL. The SVG output uses a custom font and a minimal axis style, with hover tooltips showing the sepal length value.

Mar 3, 2021

Loading thumbnail…

Fork of jb project1

This example displays a simple text message, “Hi there,” in a large font on a blank page. It imports a small array of car objects from a separate module and uses plain DOM manipulation to set the text content of a pre element, rather than creating any charts or visualizations. The code relies on d3.v5 loaded via CDN, though no D3 methods are actually called. A CSS-fixed container is defined but left unused, and the message is derived from a hardcoded string, not from the imported car data.

Feb 10, 2021

Loading thumbnail…

Fork of Responding to Resize

This example displays a static text message using D3 v5. It creates a dataset of car objects in a separate module, exports them, and imports the array into the main script. The page uses CSS to fix a chart container to the full viewport, while a large `<pre>` element shows the text “Hi there.” The code assigns a constant string to the element’s `textContent` property, but does not include any resizing, animation, or interactive behavior despite the title referencing responsiveness.

Feb 10, 2021