KyllVis

@KyllVis·11 public vizzes

Temperature in San Fran area

This area chart displays temperature readings over time for the San Francisco area, with the y-axis labeled "Temperature" and the x-axis labeled "Time." The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` generator to draw a filled path beneath the temperature curve. Data is loaded from a CSV file containing timestamp and temperature values, which are parsed and converted to Date objects. The chart includes gridlines, axis labels, and a title, with styling applied via CSS.

May 20, 2020

Loading thumbnail…

Temperature in San Fran area

This visualization displays the temperature in San Francisco over time, using a filled area chart to emphasize the range of temperature variations. The x-axis represents time, while the y-axis shows temperature, with a line marking the area beneath the curve. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` to generate the chart. Data is loaded from a CSV file containing timestamps and temperature readings, and the visualization is rendered as an SVG with custom axis labels and styling.

May 20, 2020

Loading thumbnail…

Temperature in San Fran line

This interactive line chart depicts daily temperature fluctuations in San Francisco, with time plotted on the x-axis and temperature on the y-axis. The visualization uses D3 v5's `scaleTime` and `scaleLinear` for axis scaling, along with `line` and `curveBasis` to render a smooth, steel-blue path. The SVG is generated programmatically, and the data is loaded from a CSV file containing timestamp and temperature values. Grid lines and labeled axes, created via `axisBottom` and `axisLeft`, provide context for reading the trend.

May 19, 2020

Loading thumbnail…

Temperature in San Fran

This visualization shows daily temperature readings in San Francisco over time, with each data point rendered as a circle positioned by date on the x-axis and temperature on the y-axis. The chart includes labeled axes, gridlines, and a title. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft to generate the axes, all rendered as SVG within a 960×500 viewport.

May 19, 2020

Loading thumbnail…

Cars ScatterPlot

This scatterplot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing an individual vehicle. The visualization uses D3.js v5 with SVG rendering, employing scaleLinear functions to map data values to pixel coordinates and axisBottom/axisLeft to generate the axes with tick marks. Data is loaded from a CSV file using D3's csv method and parsed into numeric values before rendering. The chart includes labeled axes, a title, and semi-transparent steelblue circles.

May 19, 2020

Loading thumbnail…

ScatterPlot

A scatter plot displays population totals for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The chart uses D3 v5, loading data from a CSV file and rendering to SVG. It applies `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with formatted tick labels that convert billions to abbreviated notation and grid lines via tick sizes.

May 16, 2020

Loading thumbnail…

D3

A horizontal bar chart displays population estimates for ten countries, sorted from China to Mexico, with bars extending from a linear scale and country names on a band scale. Data is loaded from a CSV and multiplied by 1,000 to reflect full population figures. The SVG is rendered using D3 v5, employing `d3.scaleLinear`, `d3.scaleBand`, and axes with custom tick formatting that abbreviates large numbers (e.g., “1.42B”). Grid lines and axis labels are styled via CSS and D3’s `axisBottom` and `axisLeft`.

May 16, 2020

Loading thumbnail…

D3

This example shows a horizontal bar chart of population by country, from a CSV file listing country names and populations. It uses D3 v5 with an SVG layout created from a `scaleLinear` for the x-axis and a `scaleBand` for the y-axis. The rendering approach appends `rect` elements, calls `axisLeft` and `axisBottom` for the axes, and enriches the data by multiplying population values by 1000 before scaling. Styling is handled via CSS.

May 15, 2020

Loading thumbnail…

D3

A smiling face rendered in SVG animates its eyebrows upward and downward in a repeating cycle. Built with D3 v5, the visualization uses `select` and `arc` to construct the circular head, eyes, and mouth. Two rectangles serve as eyebrows, moved via chained `transition` and `.attr` calls on a group element to create the bounce effect.

May 14, 2020

Loading thumbnail…

Shapes with svg and css

This example demonstrates basic SVG shape rendering with CSS styling, showing how circles, rectangles, and paths can be combined and transformed within an SVG canvas. The code uses raw SVG elements—`circle`, `rect`, and `path`—along with SVG `transform` attributes for scaling and translation, while a linked stylesheet defines page margins and a `.highlighted` color class. The visualization presents a simple static composition, with shapes grouped and repositioned using coordinate transformations, though no interactive or data-driven behavior is included.

May 14, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text "Hello HTML" at a very large font size in the center of the browser window. The page consists of plain HTML with embedded CSS, using the `text-align` property for horizontal centering and a `font-size` of 13em to scale the text. No JavaScript libraries or frameworks are used; it relies entirely on native HTML and CSS rendering to demonstrate a bare-bones starting point for web-based visualizations.

May 14, 2020