2018: Reactietijden horizontal bars

100%

2018: Reactietijden horizontal bars

✓ Published0🌍 Public

Last edited Jan 14, 2019

Created on Jan 14, 2019

This visualization shows the 2018 response times for different priority categories using animated horizontal bars. The data is loaded from a local JSON file and rendered using D3.js v3 with SVG. Each bar is a bullet chart representing response times for critical, high, medium, low, and total categories. The code uses D3’s bullet chart plugin, which includes ranges, markers, and measures, and features a transition effect when the "Update" button is clicked, randomizing the displayed values with `d3.transition` and a linear scale.

AI-generated description

A demonstration of D3’s vertically-oriented bullet charts, based on this example.

forked from <a href='http://bl.ocks.org/espinielli/'>espinielli</a>'s block: <a href='http://bl.ocks.org/espinielli/d653c2e585d01af6d853'>Switch to horizontal bug: fixed</a>

forked from <a href='http://bl.ocks.org/MisunoKitara/'>MisunoKitara</a>'s block: <a href='http://bl.ocks.org/MisunoKitara/5a5d4e31f0a7ba587ee23c0e838e8eac'>2017: Werktijden horizontal bars</a>

mit Licensed

Similar vizzes

Loading thumbnail…

2017: Werktijden horizontal bars

Horizontal bullets compare actual versus target working times for five priority categories. Ranges, measures, and markers render as SVG rects and lines, driven by the custom d3.bullet plug-in. A button triggers a one-second transition, applying randomize() to recalculate each datum’s values. Data loads from bullets.json, with each category showing a title and subtitle.

MMisunoKitara

83% match

Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes fire and alarm response times across San Francisco neighborhoods from 2012 to 2019. A dropdown menu switches between years, and a checkbox toggles sorting by total average response time or alphabetical order. Built with D3 v5 in a React-free HTML page, it uses `d3.csv`, `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles and total-value labels. Axes transition smoothly via d3 transitions, while the data comes from a CSV file with `Group`, `Neighborhoods`, `Year`, and `Avg` columns.

Pphamiter253

78% match

Loading thumbnail…

2018: Reactietijden Liquid Fill Gauge

This visualization shows five liquid fill gauges displaying response times, each with distinct colors and configurations. The gauges update randomly when clicked, with values counting up and animating via wave-like fills. Built with D3 v3 for SVG rendering, it uses custom functions like `loadLiquidFillGauge` and `liquidFillGaugeDefaultSettings` to control wave height, speed, and animation. The `d3.scale.linear` API maps values for both circle and wave paths, while configurable settings adjust text position, color, and percent display.

MMisunoKitara

77% match

Loading thumbnail…

Untitled

This visualization shows survey responses across six professional categories, with bars colored by five response levels ranging from "Not at all" to "Tremendously." Each category displays a cluster of bars for the different response rates. The chart uses d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for the axes. Rectangles are animated into place using transition with random delays, and hover effects darken bar colors. A legend appears sequentially, and the y-axis fades in after the bars animate. The data comes from data.json.

EEagleV22

75% match

Loading thumbnail…

Untitled

This interactive bar chart displays bias-motivated incidents in NYC for 2020 and 2021, with buttons toggling between the two years. The visualization uses D3.js v7 within an HTML page, rendering as an SVG. It fetches CSV data from a GitHub repository and animates bar height, position, and axis transitions over one-second durations using D3’s scaleBand, scaleLinear, and transition methods. The chart highlights changes in incident counts across bias categories.

RRona Xu

74% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays state-level data across two years. A dropdown menu selects the year, and the visualization animates the transition between the 2017 and 2018 views. The chart uses a categorical color scale to distinguish three data ranges. The code leverages D3 v5 APIs including `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`. Built with SVG elements, the bars and their total value labels are rendered directly, with a 750ms transition on year change.

JJens Grochtdreis

74% match

Loading thumbnail…

1114

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.

Vvivianaaai@qq.com

73% match

Loading thumbnail…

Overlapped Barchart9

This visualization overlays a semi-transparent bar chart and a line graph to show changes in a percentage metric across overlapping time periods, with each bar labeled and tooltips revealing start and end dates. The React app loads JSON data containing survey periods (e.g., NFHS3, NFHS5) and uses d3.scaleTime, d3.scaleLinear, and d3.line to draw SVG elements. Animated hover interactions are handled via React’s onMouseOver and onMouseOut, while d3’s selection API manages the tooltip’s opacity transitions.

AAnimesh Nautiyal

73% match