pinlin0816157

@pinlin0816157·7 public vizzes

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. The code uses D3 v5 to load CSV data, create linear scales for both axes, and render red, semi-transparent circles for each car. The chart includes labeled axes and a title, with gridlines and tick marks styled via CSS. The visualization demonstrates a straightforward data exploration using D3's `scaleLinear`, `axisBottom`, `axisLeft`, and SVG rendering.

Oct 1, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Red semi-transparent circles represent individual vehicles, with each dot positioned along linear scales for both axes. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, including grid lines and labeled axes. The code references a CORS proxy to fetch data from an external CSV URL and includes commented-out Iris dataset loading, though the active render function processes car data. The SVG output is styled with custom fonts and margins.

Oct 1, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization renders as an SVG with both x- and y-axes, where the x-axis uses linear scaling and the y-axis uses band scaling. Built with React and D3 v5, the code employs `scaleLinear`, `scaleBand`, `max`, and `csv` to load and process the data, then manually generates axis ticks and gridlines as SVG elements. React state management handles the asynchronous data loading and conditional rendering.

Sep 28, 2022

Loading thumbnail…

Fork of The Margin Convention

A fork of the Margin Convention displays the top 10 most populous countries as horizontal bars with no axes, using React for rendering and D3 v5 for data processing and scales. The code loads CSV data from the United Nations World Population Prospects 2019, slices the first 10 rows, and maps population values for 2020 to bar widths via `d3.scaleLinear`. Countries are positioned with `d3.scaleBand`, while an `axisLeft` is computed but never rendered. The visualization omits axes entirely, showing only plain rectangles in an SVG.

Sep 28, 2022

Loading thumbnail…

D3 textbook

This example shows a simple SVG face built from two circles with a black border and eye, rendered on a yellow background. It demonstrates basic D3 v7 selection and attribute-setting methods, using `select` on the existing SVG element and appending circle shapes with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code reads the SVG’s height and width attributes to position the shapes relative to the viewport center. The visualization relies entirely on static SVG markup created programmatically, with no data binding or interactive behavior.

Sep 27, 2022

Loading thumbnail…

svg textbook

This example demonstrates how SVG elements can be composed and transformed on a canvas, using primitive shapes like circles and rectangles to build a visual layout. The code leverages SVG’s `<g>` elements with `transform` attributes for scaling and translation, and CSS classes that apply stroke, fill, and stroke-width properties to style shapes. It also employs an SVG `<path>` element to draw a connected line with rounded joins. The visualization is rendered directly in an HTML page, styled by an external CSS file, and uses no JavaScript or external libraries.

Sep 27, 2022

Loading thumbnail…

textbook

This example renders a simple static HTML page titled “textbook” that displays a header and a bulleted list. The page is styled using CSS, with a large monospace font applied to the body. Although it uses no external JavaScript libraries or data sources, the code is set up within the React framework, as indicated by the project metadata, and includes minimal markup for demonstration purposes.

Sep 27, 2022