Tell us what works and what could be better. We read every submission.
@ali-bugdayci·10 public vizzes
This basic bar chart displays daily temperature readings for New York, San Francisco, and Austin over a three-month period, with each city's values mapped to colored bars along a shared time axis. Built with D3 v4 and rendered as SVG, the visualization uses a grouped bar layout to compare the three cities side by side for each date. The chart includes axes for date and temperature, with a legend distinguishing the cities. The underlying data is loaded from a tab-separated values file and bound to the SVG elements via D3's data join, with scales mapping the date range and temperature values to the chart dimensions.
This example shows a grouped bar chart comparing daily temperature readings across New York, San Francisco, and Austin over three months. The chart is rendered as an SVG using D3 v4, with three bars per date—one for each city—colored distinctly and labeled in a legend. Data is loaded from a tab-separated values file, and the visualization includes axes for dates and temperature values. The bars are positioned side by side using a d3 scaleBand for the date categories and a linear scale for the temperature range.
This visualization displays daily average temperatures for Austin, TX from October 2011 to September 2012, plotted as a multi-line chart using D3 v4 with SVG rendering. The data is loaded from a TSV file containing date and temperature values for Austin alongside New York and San Francisco for comparison. The chart uses a time-scale x-axis for dates and a linear y-axis for temperature in degrees Fahrenheit, with each city represented by a distinct colored line. The visualization also includes an interactive legend that allows users to toggle the visibility of each city's temperature line, making it easy to compare seasonal patterns across the three locations.
The visualization shows Austin’s average daily temperature from October 2011 through September 2012 as a time-series line chart on an SVG canvas. It uses d3.tsv to load the dataset, d3.timeParse to convert date strings into JavaScript Date objects for the x-axis, and maps the numeric temperature values to the y-axis. The chart renders with d3.v4, with a fixed width of 800 pixels and height of 300 pixels, filling the browser viewport. The code prepares the data and axes but does not include visible scales, line drawing, or axis rendering in the provided snippet.
This animation visualizes performance data collected from a development tools session. The code periodically dumps accumulated performance metrics to a file, writing each batch of records as comma-separated JSON objects appended to `devtools.json`. It uses `fs.appendFile` to write data every 3 seconds, managing the first-write flag to properly format the array. The visualization relies on a global `perfs` array that stores performance entries, which are serialized and output without any charting or rendering library.
This example demonstrates how AngularJS 1.3’s one-time binding syntax (`::`) reduces the number of active watchers in a scope. It shows a live counter of watchers that updates every 100 milliseconds via `$interval`, while two sets of five value spans are conditionally rendered with `ng-if`. Clicking “Assign values” populates the values, and clicking “Stop Watching” switches the display to one-time bindings, causing the watcher count to drop. The code uses AngularJS’s `$scope`, `ng-click`, and `ng-init` to manage state and manually traverses the DOM to count watchers.
This example demonstrates how AngularJS one-time bindings (`::`) reduce the number of active watchers in a scope. It shows a live counter of watchers that updates every 100 milliseconds via `$interval`, while the user can toggle watching and assign values to see the effect on watcher count. The code uses AngularJS 1.3.2, with a custom `countWatchers` function that traverses the DOM with `angular.element` and `element.data()` to inspect `$$watchers` on each scope. The display updates dynamically, revealing that one-time bindings prevent additional watchers from being created.
This example presents a quiz demo interface built with Polymer, using a grid of colored category tiles. Each tile contains a large icon from the `category-icons` import and a labeled bottom section, with categories like Food, General Knowledge, History, and Geography. The layout is defined through Polymer’s `<polymer-element>` template, CSS styling, and flexbox-based attributes (`layout`, `horizontal`, `center-justified`) to position tiles within a 420×582 pixel section. The toolbar displays the title “Quiz Demo,” and the code uses core-icon elements to render the icons, with no external data source or interaction logic included.
This visualization shows a curated comparison of Node.js access-control libraries, organized by their GitHub repositories and categorized by approach. It displays each library as a labeled node, with links grouping them into clusters for role-based systems, Mongoose plugins, and newer RBAC tools. The layout uses a force-directed graph with d3.forceSimulation, positioning nodes and rendering text labels directly from the gist’s markdown data. The color-coded categories reflect the libraries’ functional distinctions, such as middleware-based versus schema-level access control, drawn from the source file’s structured list.
This example demonstrates how to open file references from Rails Footnotes directly in Sublime Text on Linux. It configures Rails Footnotes to emit custom `subl://` URIs and installs a desktop entry and shell handler that translate those URIs into Sublime Text commands. The `rails_footnotes.rb` initializer sets `Footnotes::Filter.prefix` to `subl://%s:%d`, while the `sublHandler` bash script parses the URI—replacing encoded slashes and extracting line/column parameters—before launching `/opt/sublime_text/sublime_text`. The setup uses `desktop-file-utils` to register the custom MIME type handler.