Shengjie-Sun

@Shengjie-Sun·8 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization uses D3 v5 with SVG rendering, employing scaleLinear for axes, axisBottom and axisLeft for ticks, and circles to represent each car. The code imports data from a CSV file, converts numeric fields, and applies margin-based layout with custom axis labels and gridlines.

May 13, 2019

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values formatted using abbreviated notation. The chart customizes both axes: the y-axis removes domain lines and tick marks, while the x-axis uses a tick format and negative tick size to create gridlines. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render SVG elements, with data loaded from a CSV file.

May 13, 2019

Loading thumbnail…

Customizing Axes

This example shows the top 10 most populous countries in 2018, using a horizontal bar chart with customized axes. It builds on a basic bar chart by removing unnecessary axis lines, using d3.axisBottom and d3.axisLeft, and formatting tick labels with d3.format to display populations in billions. The code loads data from a CSV file and uses d3.scaleLinear and d3.scaleBand for positioning. Light gray grid lines extend from the x-axis ticks, and the chart includes custom titles and axis labels.

May 13, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes, using `d3.scaleLinear` for the population axis and `d3.scaleBand` for countries. The code applies custom tick formatting, removes domain lines, adds grid lines, and styles axis labels and titles via CSS. Data is loaded from a CSV file and rendered as SVG rectangles using D3 v5.

May 13, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

May 12, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged in overlapping groups against a blank canvas. It demonstrates how SVG elements can be styled and transformed using CSS classes and inline attributes. The code uses raw SVG markup with a `<g>` element for grouping, and applies styling through a linked stylesheet that sets stroke widths and colors. The visible transformations include scaling and translation, with the rendering approach being purely static SVG without any JavaScript libraries or data sources.

May 12, 2019

Loading thumbnail…

HTML Cars Report

This example demonstrates a minimal HTML and CSS report displaying a list of three cars with model years and prices, highlighting the first entry in red. It shows how static data can be presented as a styled bulleted list without any JavaScript or external libraries. The rendering relies on plain HTML elements such as `<h1>`, `<ul>`, and `<li>`, with a linked `styles.css` file that defines the font family, size, and the `.highlighted` class for visual emphasis. No data source or interactive behavior is included beyond the static markup.

May 11, 2019

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, displaying each vehicle's year, make, model, and price once a loading delay resolves. It shows how JavaScript modules and Promises manage asynchronous data retrieval and formatting. The code uses a custom `getCars` function with `setTimeout` to return parsed JSON data, and `formatCar` with `generateReport` to filter cars under a price threshold. The final message updates the page’s `pre` element via `document.getElementById` and `textContent`, showcasing modular code organization without any visualization libraries.

May 11, 2019