Skip to main content
SimilarExport ZIP
100%

1114

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

This example visualizes vehicle flow counts across six categories (labeled 0–5) using a horizontal bar chart, with bars right-aligned and colored green. The chart is rendered as an SVG via D3 v6 within a React framework, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Both axes are positioned on the right and bottom edges, with axis labels and tick text styled for readability. The data is hard-coded in the script, and the layout includes margins and a main group for organized rendering.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

1115南进口道机动车

This example displays a bar chart of vehicle counts across six time intervals, labeled 0 through 5, for the "1115南进口道" (south entrance road). The green bars, rendered via D3’s `scaleBand` and `scaleLinear`, show counts ranging from 1 to 56. The chart uses D3 v6’s `axisBottom` and `axisLeft` to generate axes, with all tick labels enlarged to 2em. The SVG is created directly in HTML, with the main chart group offset by margins, and includes a text label for “车流量” (traffic flow).

Vvivianaaai@qq.com
83% match
Loading thumbnail…

1115北进口道机动车

This example shows traffic flow at the north entrance of road 1115, with six categories labeled 0 through 5 and their corresponding vehicle counts (ranging from 1 to 44). Green bars represent each value, with the chart oriented so bars extend rightward from the y-axis. The visualization uses D3 v6 with SVG rendering, employing `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisTop` and `axisRight` to display axes. Text labels are enlarged using D3 selections, and a custom "车流量" (traffic flow) title is added.

Vvivianaaai@qq.com
82% match
Loading thumbnail…

1114西进口道机动车

A horizontal bar chart displays the vehicle flow values for six time intervals (0 through 5) at the "1114西进口道机动车" intersection, using green bars with an opacity of 0.8. The SVG rendering is built with D3 v6, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` to generate axes. The hardcoded dataset includes values from 18 to 80.

Vvivianaaai@qq.com
81% 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
80% 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
80% 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
80% 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
79% 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
79% match