jyotigpt790

@jyotigpt790·10 public vizzes

Line Vega-Lite API Template

This visualization displays daily temperature variations across a week in San Francisco, using an area chart to emphasize the range and trend over time. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and incorporates D3’s `csv` loader to fetch data from a GitHub Gist sourced from the Auto MPG dataset. The chart encodes timestamps on the x-axis and temperature on the y-axis, with a fixed width and height fit to the viewport and a custom config that enlarges axis labels and titles.

Dec 10, 2020

Loading thumbnail…

Stacked Barchart Vega-Lite API Template

This stacked bar chart visualizes population distribution across countries by religion, using data from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. Built with the Vega-Lite API and D3.js (d3.v5), it encodes country on the x-axis, population on the y-axis, and religion as color, with tooltips showing population values. The visualization renders as an SVG, with custom font sizes and axis styling from a config file.

Oct 26, 2020

Loading thumbnail…

Barchart Vega-Lite API Template

This bar chart visualizes population by country using data from the UCI Machine Learning Repository’s Auto MPG Data Set, loaded via `d3.csv`. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders as an SVG using `vega-lite-api`. It encodes country on the x-axis and population on the y-axis, with tooltips showing population values. The chart uses a custom config to enlarge font sizes and adjust axis styles, and it fits the viewport dimensions with an autosize setting.

Oct 26, 2020

Loading thumbnail…

loading data using react d3

This example demonstrates loading an external CSV dataset into a React application using D3. The page fetches a color-naming dataset from a GitHub gist via `d3.csv` and displays the raw parsed data as text within a React component. The code uses React’s `useState` hook to manage the asynchronous data loading, with `ReactDOM.render` mounting the app to the DOM. D3 v6 handles the CSV parsing, while React 16.14 manages the UI, resulting in a simple data-loading pattern for React+D3 integration.

Oct 22, 2020

Loading thumbnail…

mouse follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example uses React's `useState` and `useCallback` hooks to track mouse coordinates via an `onMouseMove` event handler, then renders a single circle element with those coordinates as its `cx` and `cy` attributes. The SVG has a fixed width of 960 and height of 500 pixels, with the circle initially centered at the midpoint.

Oct 22, 2020

Loading thumbnail…

load and parse data

This example demonstrates how to load and parse a comma-separated values (CSV) file asynchronously using the Fetch API. It fetches a CSV file containing CSS named colors from a GitHub gist, parses the text with `d3.csvParse`, and displays summary statistics about the dataset. The rendered message shows the file size in kilobytes, the number of rows, and the number of columns. The parsed data is visualized as text in a large-font HTML `<pre>` element, highlighting basic data inspection without any charts.

Oct 22, 2020

Loading thumbnail…

mouse follower start

A simple interactive visualization displays a single circle centered in a 960 by 500 pixel SVG canvas. The circle remains static, while the application logs a message to the console whenever the mouse moves over the SVG element. Built with React and ReactDOM, the code defines a handleMouseMove function that triggers on the onMouseMove event, demonstrating a basic event-handling pattern without any visual feedback on the circle itself.

Oct 21, 2020

Loading thumbnail…

face_d3_start

This example shows a simple cartoon face drawn with SVG, featuring a yellow circular head, two black eyes, and a curved mouth. The face is centered within a 960×500 SVG canvas. The code uses D3 v6’s `select` and `arc` APIs to construct the shapes, with the mouth built via an arc generator specifying inner and outer radii and angular extents. Colored fills and strokes are applied through SVG attributes, while a CSS rule removes page margins for full-bleed rendering.

Oct 12, 2020

Loading thumbnail…

SVG CODE

This example demonstrates basic SVG shapes composed directly in an HTML page using React as the framework. It shows circles, rectangles, lines, and paths with various fills, strokes, and group transformations. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within an `<svg>` container, applying attributes for positioning and styling. Group elements (`<g>`) apply translations to offset multiple shapes at once, while inline presentation attributes define colors and stroke widths. The rendering relies entirely on static SVG markup without any dynamic data or interaction.

Oct 12, 2020

Loading thumbnail…

firstviz

This example displays a text-based report of affordable cars, filtering a small dataset of used vehicles by price and formatting each entry as a single line with year, make, model, and price. The page renders the result inside a `<pre>` element with large font size using plain DOM manipulation via `document.getElementById`. It leverages ES modules for data parsing and report generation, with the car data stored as inline JSON and exported through `JSON.parse`. The core logic uses JavaScript array methods `filter`, `map`, and `join` within a custom `generateReport` function.

Oct 8, 2020