Skip to main content
SimilarExport ZIP
100%

1116东南基础设施堆叠图

✓ Published0🌍 Public
Vvivianaaai@qq.com
Last edited Nov 16, 2023
Created on Nov 16, 2023

This visualization presents a stacked bar chart of pedestrian, non-motorized vehicle, and motor vehicle counts for a single lane (laneid 0), using a naive dataset embedded in the code. The chart uses D3 v6 to stack the three categorical keys via `d3.stack`, scales them with `d3.scaleLinear` and `d3.scaleBand`, and colors each segment with `d3.schemeSet3`. An HTML legend is built with D3 selections, and axes are rendered with `d3.axisLeft` and `d3.axisBottom`. The SVG rendering includes margins and a main group for coordinate placement.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

1116东北基础设施堆叠图

This visualization shows the composition of pedestrian, non-motorized vehicle, and motorized vehicle counts for a single road lane, with each category stacked as a colored segment. The chart uses D3 v6’s `d3.stack()` to generate stacked series, rendered as SVG rectangles via a data join. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while a categorical color scale from `d3.scaleOrdinal` with `d3.schemeSet3` distinguishes the three transport modes. The fixed SVG size and margins are set explicitly in the markup, and the data is hardcoded rather than loaded from an external file.

Vvivianaaai@qq.com
93% match
Loading thumbnail…

1115北进口道堆叠图

This visualization uses a stacked bar chart to show counts of pedestrians, non-motorized vehicles, and motor vehicles across six lane IDs (0-5) at a northern entrance. The chart displays the data with each lane as a category on the x-axis and the stacked categories as colored segments, with a legend below. The implementation uses D3 v6 in a React framework, rendering SVG elements. The code employs `d3.stack` to create the stacked series, `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeSet3` for colors. Data is hardcoded in the `naiveData` array, and axes are drawn using `d3.axisLeft` and `d3.axisBottom`.

Vvivianaaai@qq.com
90% match
Loading thumbnail…

所有堆叠图

This stacked bar chart visualizes two lane categories, comparing counts of pedestrians, non-motorized vehicles, and motor vehicles. Built with D3 v6 and React, it uses `d3.stack()` to compute stacked series, `d3.scaleBand` with padding for the x-axis, and a linear scale for y-values. An HTML legend maps colors via `d3.schemeSet3`, while SVG rectangles render each segment, and axes are added through `d3.axisLeft` and `d3.axisBottom`.

Vvivianaaai@qq.com
89% match
Loading thumbnail…

1115东进口道堆叠图

This stacked bar chart visualizes traffic composition across six lane IDs at an intersection, breaking down counts of pedestrians, non-motorized vehicles, and motor vehicles. The chart uses D3 v6’s `d3.stack()` with `stackOrderNone` to layer the three categories, while `d3.scaleBand` and `d3.scaleLinear` position bars and encode counts. Rendered as an SVG within a React framework, the visualization applies `d3.schemeSet3` for categorical colors and labels axes with `d3.axisLeft` and `d3.axisBottom`. Data includes lane 4 as the busiest, with mixed traffic, and lane 5 empty.

Vvivianaaai@qq.com
89% match
Loading thumbnail…

1117所有堆叠图

This stacked bar chart visualizes traffic counts across 28 lane segments, categorizing volumes into pedestrians, non-motorized vehicles, and motor vehicles by lane ID. Animated on page load, hovering over any bar segment reveals a tooltip displaying the exact count and percentage share of that category within the total for its lane. Built with React and D3 v6, it uses `d3.stack()` to generate the layered series, `d3.scaleBand()` and `d3.scaleLinear()` for positioning, and `d3.scaleOrdinal()` with `d3.schemeSet3` for color encoding. A custom HTML legend and SVG-rendered axes complete the visualization.

Vvivianaaai@qq.com
88% match
Loading thumbnail…

1115南进口道堆叠图

This visualization shows a stacked bar chart of traffic counts across six lane positions on a southbound approach, broken down by traveler type: pedestrians, non-motorized vehicles, and motor vehicles. The data is hardcoded in the script. It uses D3 v6’s `d3.stack()` and `d3.scaleBand()` to arrange the categorical lanes, with `d3.scaleLinear()` mapping the stacked heights. Color is assigned via `d3.scaleOrdinal()` with `d3.schemeSet3`, and the SVG renders the bars, axes, and a custom HTML legend.

Vvivianaaai@qq.com
88% match
Loading thumbnail…

1120所有堆叠图（右转-过街）

This stacked bar chart visualizes traffic flow across 27 lanes at an intersection, showing counts of pedestrians, non-motorized vehicles, and motor vehicles. The SVG rendering uses `d3.stack()` to create stacked segments for each lane category, with `d3.scaleBand` positioning the bars and `d3.scaleOrdinal` assigning colors from `schemeSet3`. A tooltip appears on mouseover, displaying the percentage each category contributes to the lane’s total. The data is embedded directly in the code, and the visualization includes axis labels and a custom legend.

Vvivianaaai@qq.com
87% match
Loading thumbnail…

1115西进口道堆叠图

This stacked bar chart visualizes traffic volume at the west entrance of Road 1115, broken down by lane and user type (pedestrians, non-motorized vehicles, and motor vehicles). The SVG rendering uses d3.stack to create the layered segments, with d3.scaleBand for lane positioning, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with the schemeSet3 color palette. Each lane’s stacked segments show the proportional counts of three transportation modes, using d3.axisLeft and d3.axisBottom to display the scales.

Vvivianaaai@qq.com
85% match