InnoFail

@InnoFail·4 public vizzes

test_jquery

This example demonstrates a graphing calculator that evaluates arithmetic expressions and plots custom polynomial functions. Users input equations with variables like "1p2" (representing 1x²) and click "graph_it" to render the curve. The calculator uses D3 v6 to append SVG path elements, while jQuery and jQuery UI handle user interactions such as button clicks and DOM manipulation. The code computes y-values across the viewport width and maps them to SVG coordinates for drawing.

Oct 28, 2021

Loading thumbnail…

test

This example demonstrates a minimal D3 version 6 setup where a large “hello” text replaces an SVG element on a black background. The page loads a 960x800 SVG, but the JavaScript removes it and appends a paragraph element containing the result of a simple `hello` function. Using vanilla DOM methods (`document.querySelector`, `createElement`, `appendChild`, `removeChild`) alongside the D3 v6 library loaded from a CDN, the code highlights basic script integration and DOM manipulation in a visualization context.

Oct 22, 2021

Loading thumbnail…

world_map

This example visualizes world countries colored by economic classification using a natural Earth projection. The map supports zooming and panning, with hover highlighting and tooltips showing country names and economic categories. Built with D3 v5 and TopoJSON, it loads world atlas data from unpkg, utilizes `d3.geoNaturalEarth1` and `d3.geoPath` for geographic rendering, and applies a spectral color scale via `d3.scaleOrdinal` and `d3.schemeSpectral`. SVG paths enable interactive styling and title tooltips.

Oct 18, 2021

Loading thumbnail…

D3.js

This example shows a scatterplot of population values from a CSV file, rendered as red circles on a black SVG canvas. It demonstrates basic data binding and enter/exit updates in D3 version 6, using `d3.select`, `d3.csv`, and `svg.selectAll` with `.enter()` and `.exit()`. The code initially positions circles using arbitrary random coordinates derived from each population value, then removes and re-adds a circle to illustrate update patterns. The positions do not correspond to meaningful axes, emphasizing the data-binding mechanics rather than accurate visualization.

Oct 17, 2021