AndrewTsai0406

@AndrewTsai0406·4 public vizzes

Bar chart

This bar chart shows the difference in horse power among various cars, with each bar representing a car model. The chart uses SVG rendering and is built with D3 v6, using the `d3.scaleBand` and `d3.scaleLinear` APIs to position and size the bars. The data is loaded from a local source and rendered in a 960 by 480 pixel SVG canvas. The visualization provides a straightforward comparison of car performance metrics.

Dec 18, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js v5 and TopoJSON. It renders a natural Earth projection of countries as SVG paths, with a blue sphere background and green country fill. The code loads geospatial data from the world-atlas package, converts TopoJSON features using `topojson.feature`, and applies a `d3.geoPath` generator with `d3.geoNaturalEarth1` projection. The map is drawn by appending path elements to an SVG container, with styling defined in an external stylesheet.

Oct 2, 2020

Loading thumbnail…

Visualization lesson

A simple animated face demonstrates basic D3.js shapes and transitions. Four circles and several arc paths create eyes, eyebrows, and a smile over a dark green background. The left eye, smile, and both eyebrows move vertically using chained `transition().duration()` calls, while the right eye remains static. The code uses d3.arc() to generate path data and SVG element selection with d3.select(). No external data source is used; all shapes are manually positioned within a 960x500 SVG canvas.

Sep 23, 2020

Loading thumbnail…

Bar chart

This interactive bar chart displays the horsepower of various car models, with each bar representing a different vehicle from the provided cars.tsv dataset. The visualization uses D3 v6 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the chart as scalable vector graphics (SVG). The horizontal bars are sorted by car name on the y-axis, with a teal fill color, and the chart includes a title and axis labels.

Sep 22, 2020