joaoigorandrade

@joaoigorandrade·4 public vizzes

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, using a smooth curved line to show how temperature fluctuates over time. The visualization includes labeled axes for time and temperature, with gridlines and a title. The data, sourced from the Data Canvas - Sense Your City project, is rendered as an SVG using D3 v5. The code employs D3 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to construct the chart.

Jul 23, 2020

Loading thumbnail…

HTML Starter

This example is a minimal HTML starter page. It renders the text "Hello HTML" in the center of the viewport using a large 13em font size, styled by inline CSS. The page also includes a JavaScript snippet that logs "Hello JavaScript!" to the browser's developer console. The code uses a basic HTML document structure with embedded `<style>` and `<script>` tags, and does not rely on any external libraries or data sources.

Jul 14, 2020

Loading thumbnail…

Cars Report

This example presents a static report titled “Cars Report” that displays the text “Hello-World” centered in the browser. The underlying car dataset, defined as an array of objects with fields for name, maker, and price, is serialized and parsed via `JSON.stringify` and `JSON.parse` in `cars.js`. The visualization itself uses the React framework, though the visible output relies on the DOM API `document.getElementById` to set the text content of a `<pre>` element, with the page styled through inline CSS.

Jul 14, 2020

Loading thumbnail…

React Starter

This example displays a single, large “Hello React!” message centered on the page. It demonstrates the minimal setup for integrating React with a visualization environment by rendering a static text element. The code uses React 16.10 and ReactDOM to mount a functional component into the DOM, with the `index.html` file linking to UMD builds of React and ReactDOM. Styling for the message is defined in a CSS rule, while the component itself is plain JSX with no data or interaction logic.

Jul 14, 2020