Skip to main content
Log in
L

luojiandan

@luojiandan·9 public vizzes

Loading thumbnail…

The General Update Pattern(Enter Update Exit Merge[enter+update])

This example demonstrates the general update pattern with mixed enter and update selections using D3.js v5 and SVG animations. It shows a row of apples that transition into lemons and disappear over time, with new circles smoothly merging into the existing selection. The code uses `selection.enter().append()`, `selection.merge()`, `selection.exit()`, and `transition.attr()` to animate radius and color changes. Data is generated with `d3.range` and mapped to fruit types, while `d3.scaleOrdinal` maps types to colors and sizes.

Apr 18, 2020
Loading thumbnail…

面积折线图（人口数据）

This area line chart visualizes world population growth over time, encoding the data as a filled region beneath a line with circular data points, and includes labeled axes and a title. Population values are scaled linearly, while years are mapped along a time scale, with an area generator using d3.area to create the filled shape. The chart is rendered as SVG, with axes, ticks, and labels styled via CSS, using d3.csv to load the population data.

Apr 18, 2020
Loading thumbnail…

面积折线图（天气预报）

This area chart visualizes hourly temperature readings in San Francisco over time. The graph uses a filled, curved line to show temperature trends, with individual data points marked by red circles that are initially invisible but present in the SVG. The chart is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` for the filled curve, and `axisBottom` and `axisLeft` for the grid and labels. Data is loaded from a CSV file containing timestamp and temperature values.

Apr 18, 2020
Loading thumbnail…

折线图（天气预报）

This line chart visualizes hourly temperature recordings in San Francisco, using time on the x-axis and degrees on the y-axis, with red dots marking each data point and a smooth curve connecting them. The chart is rendered as SVG using D3 v5, employing `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for the smoothed path. Axis labels, tick styling, and a title are applied via D3 selections, while the dataset originates from a CSV file hosted on VizHub.

Apr 18, 2020
Loading thumbnail…

汽车 散点图

This scatter plot visualizes the relationship between horsepower and acceleration for a dataset of cars, with each circle representing a vehicle. The chart uses D3 v5’s scaleLinear with a nice() function for both axes, and circles are rendered in SVG with adjustable opacity to show data density. Data is loaded from a CSV file via d3.csv, and axes include gridlines and labels for clarity.

Apr 18, 2020
Loading thumbnail…

散点图

This scatter plot displays the population of six global regions in 2019, using circles positioned along a point scale for regions and a linear scale for population values. The chart includes labeled axes, gridlines, and a title, with data loaded from a CSV file using d3.csv. The code employs d3.scalePoint, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.format to render the visualization as SVG, applying a nice() function to the population scale for cleaner tick values.

Apr 18, 2020
Loading thumbnail…

柱状图

This bar chart displays population estimates for six global regions in 2019, with horizontal bars ordered by region name. The visualization uses D3 v5 with SVG rendering, leveraging `scaleLinear` for the population axis and `scaleBand` for categorical region placement. Data is loaded from a CSV file via `d3.csv`, and population values are multiplied by 1000 before mapping to bar widths. Axes are generated with `axisLeft` and `axisBottom`, while rectangles represent each region’s population, styled with steelblue fill.

Apr 18, 2020
Loading thumbnail…

自定义坐标轴

This bar chart displays the 2019 population of global regions, with a custom y-axis and a horizontal bar layout. The chart uses D3 v5’s `scaleBand` and `scaleLinear` to map regions and population values, while `axisBottom` and `axisLeft` render the axes. Population labels are formatted with the `format` function, replacing "G" with "B" for billions. The data is loaded from an external CSV file, and the visualization is rendered as SVG elements, with gridlines and a title styled via CSS.

Apr 18, 2020
Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous type, centered on a plain white page. It demonstrates the simplest possible web page structure using a minimal HTML document with embedded CSS styling. The code relies on standard HTML tags and a CSS rule that sets the body font size to 13em and applies text alignment. No JavaScript libraries or external data sources are involved, making it a static, bare-bones starting point for web and visualization projects.

Apr 18, 2020