Violations 2012 calendar view (d3 dropdown)

100%

Violations 2012 calendar view (d3 dropdown)

✓ Published0🌍 Public

Last edited Jul 31, 2016

Created on Jul 31, 2016

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.

AI-generated description

A calendar visualization of the 2012 housing violations dataset. An alternate presentation of this <a href="http://bl.ocks.org/BBischof/f463291ee5d339b74f21c5ddbfbf798d">beeswarm visualization.</a> This one takes advantage of the fact that our data is mostly focused on the year 2012. I used emoji's in the selections to draw more attention to different violations in a long list.

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

Original exploded calendar is <a href="http://bl.ocks.org/KathyZ/c2d4694c953419e0509b">here</a>. Emoji reference from <a href="http://apps.timwhitlock.info/emoji/tables/unicode">here</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/1947ff949f969d6ca9be285705d57e16'>Calendar Alternate Orientation v4 update</a>

forked from <a href='http://bl.ocks.org/BBischof/'>BBischof</a>'s block: <a href='http://bl.ocks.org/BBischof/7607b90705281634c6da741c34d9ba7c'>Violations 2012 calendar view</a>

gpl-3.0 Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Housing Violations Data - 2012 (d3 dropdown)

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.

BBBischof

82% 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

80% match

Loading thumbnail…

Calendar View

A calendar heatmap displays the frequency of food inspection violations per day, using a diverging color scale from red to green across a year. The visualization loads CSV data via `d3.csv`, quantizes values, and renders SVG rectangles positioned by week and month. It uses D3 v4 APIs including `d3.timeParse`, `d3.scaleQuantize`, and `d3.timeDays` to build the calendar grid, with a tooltip showing details on hover. The layout and Brewer color scheme follow examples from stat-computing and ColorBrewer.

BBBischof

80% match

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

80% match

Loading thumbnail…

D3 v4 Calendar View

This example shows a calendar heatmap of daily accident counts in 2016, visualized as colored cells arranged by week, month, and year. Using D3 v4 with Vue, it loads CSV data via `d3.csv`, converts dates into a nested map, and applies a quantized `d3.scaleQuantize` with an RdYlGn diverging color scale. Data is rendered as SVG rectangles, with month boundaries drawn using custom path logic and legend labels added separately.

EElisaDnr

75% match

Loading thumbnail…

Calendar Alternate Orientation v4 update

This calendar visualization displays daily fact counts for 2016 as an exploded month grid, with each day colored on a red-to-green scale based on value intensity using a d3.scaleQuantize and a polylinear color gradient. The code uses d3.timeDays, d3.timeMonths, and d3.timeYears to structure the layout, while d3.timeFormat handles date parsing and week/month calculations. A hover tooltip appears via d3.csv-loaded data, and the animation-ready SVG layout arranges months in rows with white grid lines separating cells.

BBBischof

75% match

Loading thumbnail…

Calendar Visualization

This calendar visualization displays two-dimensional data as a color-coded heatmap over daily dates from March to July 2020, with each day’s count encoded by cell fill intensity. The SVG rendering uses D3 v5 to bind the JSON data array, while moment.js parses the date strings for positioning. Rect elements receive a class for hover styling, and tooltips are implemented via a custom div that appears on mouseover, relying on D3’s event handling to show the specific count for each day.

Ffloresh

74% match