Housing Violations Data - 2012 (d3 dropdown)

100%

Housing Violations Data - 2012 (d3 dropdown)

✓ Published0🌍 Public

Last edited Jul 31, 2016

Created on Jul 31, 2016

A beeswarm plot shows the temporal distribution of 2012 housing violations, with each point representing a single violation. A dropdown menu filters the dataset by violation type, such as "Refuse Accumulation" or "Lead Hazard," and hovering reveals details. The x-axis maps violation dates using a time scale, while a force-directed simulation (`d3.forceSimulation`, `d3.forceX`, `d3.forceY`, `d3.forceCollide`) arranges overlapping points. The visualization uses SVG rendering, loads data from a CSV, and displays summary statistics like the number and earliest/latest violation dates.

AI-generated description

A beeswarm plot to visualize housing violations from 2012. Each point is a violation of the specified type.

Select different sorts of violations from the drop down menu. Hold your mouse over a point to reveal more details.

The beeswarm plot is a convenient modification of the scatterplot for one dimensional datasets where some data points have the same x-value.

An alternative view can be seen <a href="http://bl.ocks.org/BBischof/7607b90705281634c6da741c34d9ba7c">here</a>

Original Example: <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block, <a href='http://bl.ocks.org/mbostock/6526445e2b44303eebf21da3b6627320'>Beeswarm</a>

Drop down inspired from <a href="http://bl.ocks.org/micahstubbs/d393bcfde0228430c00b">Micah Stubb's guide.</a>

forked from <a href='http://bl.ocks.org/BBischof/'>BBischof</a>'s block: <a href='http://bl.ocks.org/BBischof/a9e166f26ea11e01d838273e34a043b6'>Housing Violations Data - 2012</a>

forked from <a href='http://bl.ocks.org/BBischof/'>BBischof</a>'s block: <a href='http://bl.ocks.org/BBischof/f463291ee5d339b74f21c5ddbfbf798d'>Housing Violations Data - 2012</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Housing Violations Data - 2012

A beeswarm plot visualizes 2012 housing violations, with each point representing a single violation. The plot displays the distribution of violations over time, colored by violation category, and a dropdown menu filters the view by specific violation type, such as "Overgrown Vegetation" or "Refuse Accumulation." Hovering over a point reveals additional details about that violation. The visualization uses D3.js v4, rendering as SVG. The data comes from a CSV file containing violation records with dates and types. The dropdown menu is built with Bootstrap, and the interactive filtering and hover effects are implemented using D3's selection and event-handling methods.

BBBischof

95% match

Loading thumbnail…

Housing Violations Data - 2012

This beeswarm plot shows the timing of housing violations in 2012, with each point representing a single violation. A drop-down menu filters the visualization by violation type, such as "Overgrown Vegetation" or "Refuse Accumulation." Hovering over a point reveals details about the specific violation. Built with d3.v4, the plot uses the `forceSimulation` API to arrange points along a horizontal time axis, avoiding overlap while preserving the density distribution of the data. The dataset comes from a CSV file containing violation dates, categories, and inspection IDs.

BBBischof

95% match

Loading thumbnail…

Violations 2012 calendar view (d3 dropdown)

A calendar view shows housing violation data for 2012, with each day represented by a colored rectangle. Users select a violation type from a dropdown menu, and the color of each cell reflects the count of that violation on that date. Hovering reveals details via a tooltip. Built with D3 v4, the visualization uses `d3.timeDays` and `d3.timeMonths` to structure the calendar layout and `d3.scaleQuantize` for color encoding. SVG rectangles and text labels are animated when the selection changes, drawing from the provided CSV dataset.

BBBischof

82% match

Loading thumbnail…

Violations 2012 calendar view

This calendar view visualizes 2012 housing violations, using a color-coded grid of days to show the frequency of selected violation types throughout the year. Users choose a violation category from a dropdown menu, and each day’s rectangle is shaded by a linear color scale from red to green based on the count. The visualization uses D3.js (v4) to render SVG elements, with a tooltip on hover revealing details. The data comes from a CSV file containing inspection records, and the interface uses Bootstrap for the menu styling.

BBBischof

82% match

Loading thumbnail…

30.Beeswarm

A beeswarm plot distributes circular marks along a logarithmic x-axis to show the distribution of file sizes from the flare dataset, with a force simulation stacking points vertically to prevent overlap. A Voronoi overlay expands the hover target for each point, displaying a tooltip with the file’s ID and value. The visualization uses d3.forceSimulation with d3.forceX, d3.forceY, and d3.forceCollide, rendered as SVG, with a d3.axisBottom log scale and d3.voronoi polygons for interaction.

深深度碎片

66% match

Loading thumbnail…

Beeswarm

A beeswarm plot displays the distribution of numeric values from a CSV dataset, with each circle representing a data point positioned along a logarithmic x-axis. The circles are arranged using d3.forceSimulation with forceX, forceY, and forceCollide to prevent overlap. A Voronoi overlay via d3.voronoi improves hover interaction: hovering over any cell highlights the corresponding circle in red, and a tooltip shows the data point’s ID and value. The visualization renders in SVG with an axis label and tick formatting.

FFrissAnalytics

66% match

Loading thumbnail…

Beeswarm

This beeswarm plot displays the hierarchical structure of the Flare data set, encoding each node’s value as a logarithmically positioned point along the horizontal axis. The visualization employs a force-directed layout via `d3.forceSimulation`, using `d3.forceX` and `d3.forceY` to align points, while `d3.forceCollide` prevents overlap, creating a dense, non-overlapping distribution. To support hover interactions, it overlays a Voronoi diagram (constructed with `d3.voronoi`), rendering transparent cell paths that highlight the nearest circle in red on mouseover. The SVG output includes a logarithmic axis and tooltips showing each item’s name and value.

Mmbostock

65% match

Loading thumbnail…

Beeswarm (Broken)

This example visualizes the hierarchical structure of the Flare data set as a beeswarm plot. It uses a custom emoji, a honeybee, to represent each data point, with a voronoi overlay that highlights the nearest bee in red when hovered. The visualization is built with D3 v4, employing `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to position the points, and `d3.voronoi` to generate the interactive cells. The x-axis uses a log scale to display the data values from the provided CSV file.

BBBischof

65% match