koki1010

@koki1010·3 public vizzes

Fork of Line Chart with Multiple Lines

This line chart from the Data Canvas Sense Your City dataset displays one week of temperature readings across multiple global cities, with each city represented by a smooth curve. The visualization groups data by city via `d3.nest()` and renders paths using the `d3.line()` generator with `curveBasis`, colored by `scaleOrdinal(schemeCategory10)`. A reusable colorLegend module appends circles and text labels. Axes use `axisBottom` and `axisLeft` with grid lines, while D3 v5 handles time and linear scales for timestamp and temperature values. The SVG output includes a title and rotated axis labels.

Aug 24, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a single, static yellow circle with a black stroke, representing the initial stage of a smiley face. The visualization is built using the React framework and SVG rendering. The code imports React and ReactDom, then defines an `App` component that returns an SVG with a `<circle>` element. The circle's position, radius, and colors are explicitly set in the code, and the SVG is rendered into a root element via `ReactDOM.render`. The data is procedurally generated, not sourced from an external dataset.

Aug 24, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static SVG smiley face constructed from three yellow circles with black outlines on a 960 by 500 canvas. It is a fork of the "Let's Make a Face" tutorial, representing a halfway point toward a more complete face, as only the head and two eyes are drawn. The code uses inline SVG elements, including `<circle>` tags, with hardcoded `cx`, `cy`, and `r` attributes to position the shapes, and a `<style>` block sets the body margin to zero and hides overflow. No external JavaScript libraries are used; the rendering is purely declarative SVG markup.

Aug 23, 2022