KatiRG

@KatiRG·12 public vizzes

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot displays the Iris dataset, cycling through four different flower measurements every three seconds. Built with D3 v6, it uses a reusable chart module with `selection.join` to smoothly transition circles and axes between updates, animating position via `transition.delay` and growing new circles from radius zero. The visualization reads CSV data from a GitHub gist, renders as SVG, and leverages `scaleLinear`, `axisLeft`, and `axisBottom` to map the data.

May 28, 2021

Loading thumbnail…

Demonstrate d3 enter-update-exit pattern for divs

This visualization demonstrates the D3.js enter-update-exit pattern by dynamically updating a map legend in response to user selection. It uses a dropdown menu to switch between showing pick-ups, drop-offs, or both, and calls `d3.select` with `.data()` to bind new legend data. The code manually manages transitions: `enter()` appends new divs and spans, then updates existing elements' classes and HTML text, while `exit().remove()` deletes obsolete items. Each legend item is rendered as a colored span with a text label, and the legend updates in place without rebuilding the entire container.

Feb 21, 2020

Loading thumbnail…

d3js clickable, sortable stacked bar chart

This interactive stacked bar chart displays the age distribution of U.S. state populations, with a clickable legend to isolate a single age category and a checkbox to sort bars by value. Built with d3.v3 and SVG, it uses `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` to render axes and bars, while animation and a tooltip enhance interactivity. The code reads `state_data.csv` and corrects a pixel-level height calculation error from Mike Bostock’s original example.

Jul 24, 2017

Loading thumbnail…

Running Flask with Gunicorn

This example shows how to integrate a Flask application into a custom Gunicorn server by subclassing `gunicorn.app.base.BaseApplication`. It defines a Flask app with a single `/` route that renders `index.html`, then passes that app to a `StandaloneApplication` class, which overrides `load_config` and `load` to apply runtime options. The server binds to `127.0.0.1:8080` and sets the worker count using `multiprocessing.cpu_count()`. The code demonstrates the required structure for launching Flask via Gunicorn’s custom WSGI interface, relying on the `gunicorn.six.iteritems` helper for configuration handling.

Jan 23, 2017

Loading thumbnail…

d3js clickable stacked bar chart

This stacked bar chart displays the age distribution of each U.S. state’s population, with segments colored by age group. A clickable legend toggles individual categories on and off, and hovering over a bar segment highlights it and shows a tooltip with the exact value. Built with D3.js v3, it uses ordinal and linear scales with SVG axes, and animates bar transitions via legend-driven class selections. Data comes from the included `state_data.csv` file.

Jan 26, 2016

Loading thumbnail…

dc.js checkbox

This example uses dc.js row charts and bar charts with crossfilter to create interactive checkbox-style filters. The row chart renders two square bars labeled "A" and "B", which act as checkboxes for filtering the dataset by index type. A separate dc.barChart displays the count of records for each index (Idx 1, 2, and 3) from a CSV file containing Index and Year columns. Filtering is applied through crossfilter dimensions, and the bar chart updates its counts accordingly while the row chart's fixed-size bars use a value accessor to maintain their checkbox appearance.

Dec 8, 2015

Loading thumbnail…

SANKEY Experiment

This Sankey diagram visualizes global CO2 emissions flows from energy sources like coal, oil, and gas to continents and then to specific countries, with link widths proportional to emission values in Mt CO2. The colored nodes group geographic regions and highlight country-level detail. After d3.sankey computes the initial layout, a custom manualLayout function overrides the y-position of selected nodes using a predefined array. The visualization uses D3 v3 with SVG rendering, reading data from an external emissions.json file, and implements drag-and-drop node interaction.

Dec 5, 2015

Loading thumbnail…

dcjs resize

This example demonstrates responsive linked brushing and filtering between a row chart and a bar chart using the dc.js library. It shows how the charts resize automatically when the browser window is adjusted, with each chart updating its dimensions based on the available space. The visualization uses crossfilter to manage data from a CSV file containing index and year values. The code implements custom resize logic that iterates through the chart registry and re-renders each chart, utilizing dc.js chart APIs and D3.js for scaling and axis configuration.

Dec 2, 2015

Loading thumbnail…

Gist c609bd5ef4cd0e97247a

This example shows a force-directed network graph where nodes are connected by curved links, with the graph’s layout recalculated in real time. It uses `d3.forceSimulation` to position the nodes and `d3.forceLink` to manage the edges, while a custom `d3.geoPath`-like projection is not used; instead, the graph is rendered on an HTML5 Canvas via `getImageData` for background pixel manipulation. The code also employs `requestAnimationFrame` to animate the simulation and applies a drag interaction using `d3.drag` to let users reposition nodes dynamically. The data appears to be synthetic, generated in-memory without an external dataset.

Nov 30, 2015

Loading thumbnail…

dc choropleth

A choropleth map of France displays the projected probability of extreme mean daily temperature events, defined as below the 10th or above the 90th percentile relative to a 1976–2005 baseline, under climate scenario rcp8.5. Two bar charts allow interactive filtering by time aggregate and year range. The visualization uses `dc.leafletChart`, built on Leaflet and dc.js, with a custom legend and hover information panel. Data comes from a CSV file with modeled climate projections.

Nov 24, 2015

Loading thumbnail…

dc-leaflet legend feature (creates a static legend based on range of the data)

This example demonstrates how to add a static legend to a dc.leafletChoroplethChart, displaying color ranges based on the data’s domain. A Leaflet control is created and updated during the chart’s preRedraw event, calculating color grades from the chart’s colorDomain and color palette. The legend appears only after all six linked dc charts have been cycled, using the YlGn colorbrewer palette and a d3.extent calculation. The code shows the dc.js and Leaflet integration, including custom legend lifecycle methods.

Sep 23, 2015

Loading thumbnail…

Modification to dc.leaflet.js to a) plot colorscale in choropleth in the right order and b) to accept colorbrewer.js scales

This example modifies `dc.leaflet.js` to enhance its choropleth rendering. It adjusts the color calculation function to correctly order colors from a `colorbrewer.YlGn` palette, and it accepts min/max values from the chart’s `colorDomain()` to map data values to colors. The code defines a `_colorCalculator` that divides the value range by the palette length to select a color, and it integrates a custom `colorAccessor`. The visualization uses the `dc.colorChart` and `dc.leafletChart` APIs to render geographic features.

Sep 22, 2015