zhangyan560

@zhangyan560·6 public vizzes

Make a face with D3.js

A face is drawn and styled using D3.js, with its features composed of simple SVG shapes. The example uses `d3.select` to target an SVG element and applies a background color style, though the initial code sets `backgroud-color` with a typo. The face itself is rendered via SVG primitives within a 960x500 viewport, driven by vanilla D3 v6 selections and style manipulation, with a React starter kit and minimal CSS hiding page overflow.

Nov 11, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal web page displaying the text “Hello HTML” in large, centered type, with a companion message sent to the browser’s developer console. It demonstrates the foundational structure of an HTML document, using CSS within a `<style>` tag to control layout and typography, and a `<script>` tag to run JavaScript. The code relies on the browser’s built-in `console.log` API, with no external libraries or data sources.

Nov 10, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It fetches a dataset of CSS named colors from a GitHub gist and displays summary statistics including file size, row count, and column count in a large text element. The code uses `d3.csv` to retrieve and parse the remote CSV file, then accesses the parsed array’s `length` and `columns` properties. Alternative approaches using `fetch`, `async`/`await`, and `d3.csvParse` are also shown in commented-out sections.

Nov 10, 2020

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page. It uses the React and ReactDOM libraries to define a functional `App` component and mount it to the `#root` element via `ReactDOM.render`. The rendering approach relies on React’s virtual DOM and JSX syntax, with basic CSS styling applied through an external stylesheet. The code demonstrates a clean starter template for integrating React with a static HTML entry point.

Nov 10, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” in large, centered type. It shows how React manages a single root DOM element, displaying a static message without any interactive or data-driven behavior. The code imports React and ReactDOM, defines a functional `App` component, and mounts it to the `#root` div using `ReactDOM.render`. It relies on the React 16.13.1 production build loaded via CDN, with styling applied through a CSS class in the HTML file.

Nov 10, 2020

Loading thumbnail…

Untitled

This example displays a week of hourly temperature readings in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The visualization includes labeled axes, grid lines, and a title, rendered as an SVG. The code uses D3 v6 APIs such as `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `axisBottom`, and `axisLeft` to map the CSV data and draw the chart, all within a React framework.

Nov 10, 2020