Jumblii

@Jumblii·8 public vizzes

Star Map

This visualization plots time-series temperature data from the Data Canvas Sense Your City dataset as a smooth, connected line chart. The React application uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to SVG coordinates, with d3.line and curveNatural generating a flowing path. A subtle star-map background from a JSON GeoJSON file enhances the visual presentation. The chart includes labeled axes for time and temperature, rendered with custom React components.

Feb 14, 2022

Loading thumbnail…

Untitled

This example shows a world map rendered as gray countries with white borders, overlaid with white circles marking populated places from Natural Earth data. Hovering over a country or city highlights it in pink or blue, respectively. The visualization uses D3 v3's `d3.geoMercator` projection and `d3.geoPath` to draw GeoJSON features from two remote sources: world-110m.geojson for countries and ne_50m_populated_places_simple.geojson for places. Circles are positioned via the projection’s coordinates and respond to mouseover and mouseout events.

Jan 17, 2022

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries, rendered as an SVG using React and D3 v5. It uses the `d3.geoEqualEarth` projection and `d3.geoPath` to draw the sphere, graticules, landmasses, and country interiors, with geospatial data sourced from a GeoJSON file. The visualization is styled with distinct fill and stroke colors, applying a clean, polished aesthetic while the map loads asynchronously via the `json` function from D3.

Jan 17, 2022

Loading thumbnail…

Mouse follower

A yellow circle tracks the mouse cursor within an SVG canvas. The example demonstrates React state management and event handling: the `onMouseMove` event updates the circle's `cx` and `cy` attributes, repositioning it in real time. The code uses React's `useState` and `useCallback` for state and event binding, with ReactDOM rendering the SVG directly to the page.

Jan 15, 2022

Loading thumbnail…

Loading and Parsing CSC data

This example demonstrates the initial step of loading and parsing external CSV data within a web page. The page fetches a remote CSV file containing CSS named colors using the `fetch` API, then logs the fetched text to the browser console with `console.log`. The visualization itself is not rendered; instead, the core functionality relies on the asynchronous `fetchText` function to retrieve and display raw text data. The code uses only standard JavaScript and the `fetch` protocol, with no additional libraries or rendering frameworks applied.

Jan 3, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 within a React framework. It fetches a dataset of CSS named colors from a GitHub gist and displays summary statistics—file size in kilobytes, row count, and column count—in a large HTML `<pre>` element. The primary implementation uses the `d3.csv` method, which returns a promise, while commented-out alternatives show the same task with `fetch` and `async`/`await` syntax, alongside `d3.csvParse` for manual parsing. The code also includes a commented “pyramid of doom” pattern for comparison.

Jan 3, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a grid of fifteen cartoon faces built from reusable React components: a yellow background circle, two eyes, and a curved mouth. Each face uses randomized eye and mouth radii for variation while sharing the same layout. The rendering is done through SVG elements, with the mouth path generated by the d3 `arc` function. The code uses React 17 to compose the visual components and d3’s `range` function to create the array of faces.

Jan 3, 2022

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a classic smiley face rendered as a static SVG graphic, composed of a yellow circle for the face, two black circles for eyes, and a black arc for the mouth. The code organizes each facial feature as a separate React component, using ES6 modules and React Fragments to group the eyes. It uses D3’s `arc` function to generate the mouth path, and ReactDOM renders the SVG to the page with hard-coded dimensions and positions.

Jan 3, 2022