Jorrr2

@Jorrr2·6 public vizzes

Trade Tool Map

This interactive map overlays hand-drawn street paths and circular markers onto multiple tile layers to visualize trade-related locations in the Worli area of Mumbai. The visualization uses the Leaflet library for map rendering and tile management, while D3.js is used to handle GeoJSON data for the road networks and point features. The map offers a variety of base layers from providers like OpenStreetMap, Thunderforest, and Esri, allowing users to switch between different contextual views of the same geographic data.

Feb 10, 2021

Loading thumbnail…

Untitled

A horizontal bar chart displays rental statistics for a selected area, showing the percentage distribution of various variables. Users select an area from a dropdown menu, triggering a fetch request to retrieve new data and update the visualization. The chart is rendered with Vue and D3.js, using SVG rectangles for bars and axes, with hover interactions displaying tooltips containing variable labels and definitions.

Feb 9, 2021

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

Feb 9, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js

A stylized yellow SVG face, built with D3.js, animates its eyebrows in a looping up-and-down motion. The face is constructed from basic shapes: a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. The eyebrows move repeatedly via chained `transition().duration()` calls that translate their containing group. All elements are centered using SVG transforms, with dimensions derived from the SVG element’s height and width attributes.

Feb 8, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is drawn using SVG circles for the eyes, rectangles for the eyebrows, and a d3.arc() path for the mouth, all centered within an SVG canvas. The eyebrows move up and down repeatedly through chained transition().duration() calls that change their transform attribute. The example uses d3.select and d3.arc from the d3 v5 library to construct and animate the static SVG elements.

Feb 8, 2021

Loading thumbnail…

HTML Test

This example demonstrates a minimal HTML page styled with CSS and enhanced with JavaScript. It renders a heading and an unordered list using standard HTML elements. The page applies a monospace font and a large text size through an external stylesheet (styles.css). The code relies on core web technologies—HTML for structure, CSS for presentation, and JavaScript for interactivity—offering a simple template for web-based visualization development. It references a React-based starter alternative for comparison.

Feb 8, 2021