ask4jm

@ask4jm·10 public vizzes

Hello HTML -01

A yellow circle with two black eyes forms a simple smiley face rendered as SVG. The React component defines circle elements with fixed coordinates, using center offsets for eye placement. ReactDOM renders the component into a root div, with React and ReactDOM loaded from CDN. The drawing relies on basic SVG circle primitives rather than data binding or visualization libraries.

Jul 6, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading a CSV file from a remote URL using D3 v5 and displaying basic statistics about the parsed dataset. It fetches the CSS named colors dataset and uses the `d3.csv` function to parse the data asynchronously. The code then computes and displays the file size in kilobytes, the number of rows, and the number of columns using `d3.csvFormat` and the data’s `.length` and `.columns` properties. The results are rendered into a styled `<pre>` element via the DOM’s `textContent` property, providing a minimal yet clear illustration of asynchronous data loading and parsing.

Jul 7, 2020

Loading thumbnail…

Mouse follower

A circle follows the mouse cursor across an SVG canvas. The example demonstrates React state management for tracking pointer position and rendering a visual response. The component uses `useState` to store mouse coordinates and `useCallback` to handle the `onMouseMove` event, updating the circle's `cx` and `cy` attributes on each move. The SVG element listens for mouse events, and ReactDOM renders the interactive graphic. The circle is styled with a default black fill and no animation or smoothing, providing a direct, immediate link between input and visual output.

Jul 7, 2020

Loading thumbnail…

Hello HTML

This example renders a grid of cartoon faces using React components and D3’s `arc` API for the mouth shape. Each face combines a yellow background circle, two eyes, and a mouth, all drawn as SVG elements within a `FaceContainer` that translates the coordinate system to the center. The `range` function from D3 generates 18 faces, and the code demonstrates how React functional components and D3’s arc generator work together to produce repeated, data-driven SVG visuals. The page loads React and D3 from CDNs and renders the output into a root div.

Jul 6, 2020

Loading thumbnail…

Hello HTML

This example renders a simple cartoon face using React components and SVG. It shows a yellow circle face with two eyes and a mouth, centered on a 960x500 canvas. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, which use d3’s `arc` to generate the mouth path. The face is composed declaratively via React props in `Face.js`, with `FaceContainer` providing the SVG root and coordinate transforms. The main app sets dimensions and offsets directly in JSX, targeting plain HTML via ReactDOM.

Jul 6, 2020

Loading thumbnail…

Wind chart

A circular wind rose chart visualizes directional wind speed data as stacked radial bars around a central point, with each bar segment colored by speed category and labeled around the perimeter. Built with D3 v5, the visualization uses `d3.arc()` for the radial segments, `d3.scaleBand()` for angular positioning, and `d3.stack()` to layer the speed components. The data originates from the Data Canvas - Sense Your City project. A legend and circular grid lines with radial axis ticks support interpretation of the magnitude and direction of the wind measurements.

Jul 6, 2020

Loading thumbnail…

Scatter Plot for Forest Fires

This interactive scatter plot explores factors contributing to forest fires from the UCI Forest Fires dataset, letting users compare any numeric attribute against another via dropdown menus. It renders animated SVG circles whose positions, colors, and sizes represent the selected x-axis, y-axis, and color-coded attributes, with a legend. Built with D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` with `schemeCategory10` for coloring, while `transition().delay()` animates points over two seconds.

Jul 6, 2020

Loading thumbnail…

Temperature in Different Cities

A multi-line chart shows temperature readings across seven cities—San Francisco, Bangalore, Boston, Geneva, Rio de Janeiro, Shanghai, and Singapore—for one week in 2015. Each city’s hourly data appears as a distinct colored line, with the full legend displayed. The visualization is rendered with Vega-Lite embedded through `vegaEmbed`, using a dynamic width and height that recomputes on window resize. The code loads CSV data via `d3.csv` from the Sense Your City project and styles line strokes with blend modes.

Jul 6, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city district, colored using d3.scaleOrdinal with schemeCategory10. The chart includes axes with gridlines, a title, and a color legend, while the data is parsed with dayjs. The d3.line generator with curveBasis smooths each path, and the nested data is sorted by the last temperature value of each series.

Jul 6, 2020

Loading thumbnail…

Stack Overflow - Calendar Heatmap

This example displays the daily number of answered posts on Stack Overflow as a calendar heatmap, using a color scale to represent the intensity of activity across dates. The code is built with D3.js v5, using `scaleLinear` and `scaleBand` to render rectangles within an SVG, and includes date-range pickers via the TheDatepicker and jQuery UI libraries for interactive filtering. The data consists of a sample CSV with date and answer count pairs, which are mapped to the heatmap grid for visualization.

Jul 5, 2020