李

李文韬

@lwt18729398835·6 public vizzes

LVlocal

A single line chart displays one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project, with time on the x-axis and degrees Celsius on the y-axis. The visualization renders as an SVG using D3 v5, applying `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and `line` with `curveBasis` to draw a smoothed path. Grid lines extend across the plot area, with labels for both axes and a title.

Mar 16, 2021

Loading thumbnail…

LineV

This example shows a week of temperature in San Francisco, plotted as a smooth line chart using D3.js. The visualization displays temperature data on the y-axis against time on the x-axis, with labeled axes and gridlines. The code uses D3's `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` functions to render the SVG. Data comes from a CSV file and the Data Canvas project, with an animated rendering approach.

Mar 15, 2021

Loading thumbnail…

Fork of Working with Time

This visualization plots temperature over time as a smooth line chart using React and D3 v5. The temperature data is loaded from a CSV file via `d3.csv` and rendered with SVG paths using D3’s `line` and `curveNatural` generators. Axes are built with `scaleLinear` for both dimensions, with custom React components for the bottom and left ticks. The chart includes labeled axes for "Time" and "Temperature," and while circle marks are defined in the code, they are currently commented out, so only the dark grey curved line is displayed. The styling applies custom fonts and bold axis labels via an external stylesheet.

Mar 15, 2021

Loading thumbnail…

face

This example renders a simple, static face as a single yellow circle with a black outline, centered within an SVG canvas. The visualization uses D3 version 6 to select the SVG element, read its width and height attributes, and append a circle with absolute positioning. The circle’s radius, center coordinates, fill, and stroke are all set via chained `attr` calls. The underlying data is generated programmatically rather than sourced from an external file, relying on hardcoded dimensions from the SVG element itself.

Mar 15, 2021

Loading thumbnail…

HTML Cars Report

A static HTML page displays a simple Cars Report, presenting an underlined heading and a four-item list alongside a large empty SVG circle. The page uses raw CSS for styling, including a red highlight class and monospace font, while JavaScript is not leveraged for any dynamic behavior. The SVG element is defined directly in the markup with a fixed viewport, though the circle lacks visual styling such as fill or stroke. This example illustrates minimal React-free SVG integration within a basic web document.

Mar 15, 2021

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML” in the browser and prints “Hello JavaScript!” to the console. It shows how plain files can structure a web page using standard CSS and JavaScript. The code relies on the native `console.log` API and basic HTML/CSS, with no external libraries or data sources. The styling is applied via a `style` block that centers the text at a large font size.

Mar 15, 2021