sgroko

@sgroko·6 public vizzes

Shapes and Colors with SVG and CSS

This example visualizes temperature over time using a line chart, with data pulled from a CSV file containing timestamps and temperature readings. The SVG rendering is built with D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth interpolation. CSS styles define the line’s color, stroke width, and fill, while the axes are enhanced with tick marks and a custom label. The visualization demonstrates how SVG elements and D3 scales work together with stylesheets to present time-series data interactively.

Aug 20, 2020

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript data-processing workflow that filters a hardcoded array of car objects and displays a formatted text report. It shows how asynchronous data loading and modular functions combine to produce a readable list of cars under a price threshold. The code uses `JSON.parse` to parse inline car data, a `Promise` with `setTimeout` in `getCars.js` to simulate a delayed fetch, and `Array.filter` with `Array.map` in `generateReport.js` to select and format entries. Results are written to the DOM via `document.getElementById` and `textContent` in `index.js`.

Aug 11, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It uses D3 v5 to render an SVG visualization, with axes generated using `axisBottom`, `axisLeft`, `scaleTime`, and `scaleLinear`. The line is created with `line` and `curveBasis`, and the chart includes axis labels and a title. The data is loaded from a CSV file using `csv`.

Aug 13, 2019

Loading thumbnail…

First D3 by Groko

This example shows a minimal text output on a blank white page, displaying the phrase “Hallo Welt” in the browser without any D3-based data visualization. The page uses an HTML `<pre>` element and JavaScript to set its content, while styling comes from an external CSS file with the Ubuntu font. Although it references D3 v5 via a CDN link, the code does not call any D3 APIs; it merely demonstrates basic DOM manipulation with `document.getElementById` and `innerHTML`. The result is a static, unstyled text presentation rather than an interactive chart.

Aug 7, 2019

Loading thumbnail…

Cars Report

This example presents a simple report on a small dataset of three used cars, listing their year, make, model, and price. It demonstrates how to import data from an ES6 module and render a specific value—the make of the second car—directly into the page. The visualization uses the `d3` library (v5) to parse the embedded JSON data, while the `index.js` script updates a `<pre>` element’s text content via the Document Object Model (DOM). A dark, styled background and custom font from Google Fonts enhance the presentation.

Aug 6, 2019

Loading thumbnail…

Cars Report

This example renders a simple text report about a small collection of cars, displaying the make of the first car in the dataset. The page uses a dark blue background with a light, centered Ubuntu font to present the message. The data is defined as a JSON string in JavaScript, parsed into an array of car objects, and the first entry’s make is retrieved and assigned to a DOM element. The implementation relies on D3 v5 for basic utilities, while the output is delivered through standard HTML and CSS styling.

Aug 6, 2019