Kantapat chankasem

@tesol2y090·3 public vizzes

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. The chart plots temperature in degrees Celsius against time, with a smooth curved line connecting the data points. The visualization uses D3.js version 5, employing `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and `line` with `curveBasis` for the path. The SVG rendering includes styled tick labels, axis labels, and a title, with data loaded via `csv` from an external dataset.

Feb 11, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. Each red semi-transparent circle represents a car, plotted using d3.scaleLinear for both axes with d3.axisBottom and d3.axisLeft for labeled tick marks. The code loads data via d3.csv, converts numeric fields, and renders the visualization as SVG with a title and axis labels.

Feb 11, 2020

Loading thumbnail…

Learning SVG

This example demonstrates a simple SVG graphic: a single yellow circle centered within an 800×800 SVG canvas. The visualization is minimal, focusing on fundamental SVG shape creation rather than data representation. The code uses the D3.js v5 library's selection and manipulation API (`d3.select`, `svg.append`) to programmatically construct the circle. It dynamically reads the SVG element's `height` and `width` attributes to position the circle at the exact center, assigning `cx` and `cy` values based on those dimensions. The circle’s radius is set to 200 pixels, and its fill color is set to "yellow" via D3’s attribute methods. Styling is handled through an external CSS file, and the SVG is rendered directly in the browser with no additional data source.

Feb 11, 2020