bl75d

@bl75d·6 public vizzes

Untitled

This visualization combines a scatter plot, a map of US states, and a time-based brush to explore agricultural productivity data. The scatter plot displays each state’s score against its creation time, with circle size reflecting comment count, while the map overlays proportional symbols sized by agricultural productivity. A brush timeline filters the data across all views simultaneously, and hovering over a point or map symbol highlights the corresponding element in the other charts. The code uses d3.svg.brush, d3.geo.albersUsa, d3.geo.path, and d3.svg.axis to render the interactive SVG elements.

Mar 13, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous, centered type on a plain web page. It demonstrates the simplest possible HTML setup for a visualization, with the D3 library loaded from a CDN. The page uses a CSS style rule to set the body’s font size and text alignment, creating a stark, typographic visual. The underlying code is a minimal HTML document that renders static text without any interactive or data-driven elements.

Feb 27, 2020

Loading thumbnail…

Barchart-d3

This example displays a bar chart of player statistics from a small dataset, with each bar representing a player's goals or age. The bars are rendered as SVG rectangles using D3 v5, with a dropdown menu to switch between the two data attributes. On mouseover, a bar highlights in orange and displays its value as text. The visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, with a transition animation on mouseout to restore the bar's original styling.

Feb 27, 2020

Loading thumbnail…

Untitled

This example shows a bar chart with ten bars, each representing a randomly generated value. The chart is rendered as an SVG graphic, with bars drawn in steel blue. The code generates the data internally using a loop and `Math.random`. It uses D3.js v4 APIs including `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to create the axes. The visualization is built within a React starter template, though the core logic is a simple D3 script.

Feb 26, 2020

Loading thumbnail…

D3 FACE!

This example draws a simple smiley face using D3.js and renders it as SVG. The visualization shows a yellow circle with black eyes and a mouth, all positioned using fixed coordinates derived from the SVG's width and height attributes. The code uses D3's `select` API to target the SVG element and the `arc()` generator to create the mouth path. The implementation relies on D3 v5.15.0 loaded from a CDN, with all geometric values hardcoded in JavaScript.

Feb 26, 2020

Loading thumbnail…

Untitled

This example demonstrates how basic SVG shapes and CSS styling can be used to create a static composition. It shows circles, rectangles, lines, and a path arranged in groups, with some shapes using inline fill colors and others inheriting styles from a group transform. The code uses React to render SVG elements, with the `style.css` file applying strokes and stroke widths to the line and path elements. The SVG is scaled and translated to position the shapes within a fixed 960 by 900 viewport.

Feb 26, 2020