DarienLiang

@DarienLiang·14 public vizzes

fresh block

A bar chart displays accident counts by state, with each state clickable. The visualization uses D3 v3 to render SVG bars, with mouseover effects changing bar color to yellow and mouseout transitions restoring the original color. Users can enter a state number in an input field, which triggers a d3pie chart showing the distribution of fatal counts (1, 2, or >2) for that state. The code loads both bar_chart1.csv and pie_chart1.csv datasets, using jQuery for input handling and d3.csv for parsing the CSV data.

Nov 27, 2016

Loading thumbnail…

heatmap

This heatmap visualizes hourly activity across the days of the week, using a color scale from light yellow to dark navy to represent intensity. The chart displays day labels on the y-axis and time labels (from 1a to 12p) on the x-axis, with each cell representing an hour. Built with D3 v3, the visualization renders as SVG rectangles, with colors mapped from a nine-bucket YlGnBu palette. The code loads data from external TSV files, though the rendering logic for the heatmap cells is not included in the visible snippet.

Nov 24, 2016

Loading thumbnail…

Demos

This interactive scatterplot lets users explore horror movie monsters by swapping the X and Y axes between four attributes—physical strength, fear factor, killing power, and horror rating—via dropdown menus. The visualization, built with D3.js v3 and SVG, uses linear scales to map the chosen attributes to circle positions, with each monster represented as a white-bordered circle. A tooltip using the d3-tip library appears on hover, while the green header and sidebar follow a cohesive Raleway-styled design. The underlying data is hardcoded as an array of monster objects.

Nov 23, 2016

Loading thumbnail…

Multi-line graph 4 with v4: Toggle

This multi-line graph displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, with each company's price trend drawn as a separate colored line. The chart uses D3.js v3 with SVG rendering, parsing dates from a CSV file and applying a time-scaled x-axis. The code nests the data by stock symbol using `d3.nest()`, assigns each line a color from `d3.scale.category10()`, and draws the paths with `d3.svg.line()`.

Nov 23, 2016

Loading thumbnail…

demo-multiple

This visualization shows the number of fatal accidents by hour of day, split into separate lines for different weather conditions. The code loads weather2.csv, nests the data by weather type and hour, then sums the fatal counts for each group using d3.nest and rollup. Multi-line paths are drawn with d3.svg.line, colored dynamically using d3.scale.category10. A time scale on the x-axis and linear y-axis are defined with d3.time.scale and d3.scale.linear, with axes rendered via d3.svg.axis.

Nov 23, 2016

Loading thumbnail…

fresh block

This example visualizes multiple time-series lines from a weather dataset, with each line representing a different category (`symbol`) and showing how a price-like value changes over time. The visualization uses D3 v3 to load CSV data, parse date strings with `d3.time.format`, and render the lines using `d3.svg.line`. A categorical color scale (`d3.scale.category10`) assigns distinct colors to each line dynamically, and the lines are drawn on an SVG canvas with a time-based x-axis and linear y-axis. The code nests the data by symbol using `d3.nest`, then appends a separate path for each group, highlighting the trend patterns across categories.

Nov 23, 2016

Loading thumbnail…

treemap

This treemap visualizes the Flare software package hierarchy, where each rectangle’s area encodes the relative size of a module (e.g., lines of code or class size). Built with D3 v3, the visualization uses nested rectangles and a categorical color scale to show the hierarchy of top-level categories like analytics, animate, data, and display, with subcategories and leaf nodes nested inside. The layout is generated using d3.layout.treemap, with each node's area proportional to its `size` value. The white borders between cells and the small sans-serif labels maintain readability, making the hierarchical structure and relative magnitudes of the Flare visualization toolkit’s codebase easy to compare at a glance. The visualization is interactive and hoverable.

Nov 12, 2016

Loading thumbnail…

Experiment-Bar1

This visualization presents a radial bar chart experiment where ten data segments radiate from a central point, with two randomly selected segments marked by bold dots along a circular label path. The chart uses D3.js (v3) with SVG rendering, employing `d3.svg.arc()` to generate the arc segments and `d3.scale.linear()` to map data values to bar heights. The accompanying interface includes a slider for user input and displays a query asking viewers to estimate the percentage ratio between the two marked values. The animation and interaction are managed through jQuery, which controls chart creation and user responses.

Oct 21, 2016

Loading thumbnail…

Radial Chart

A radial bar chart displays the relative frequency of letters A through Z from a CSV dataset. Each letter occupies an equal angular segment, with the bar's outer radius proportional to its frequency value. The visualization uses D3 v3 to bind data to SVG path elements, computing arc geometry via `d3.svg.arc`. A linear scale maps data extents to bar lengths, while text labels are positioned along a circular path using `textPath` with a generated arc. The chart is rendered statically, with no animation or interaction implemented.

Oct 19, 2016

Loading thumbnail…

test

This example animates a bar chart transitioning into a pie chart using fruit count data loaded from a CSV file. Initially, rounded rectangles represent each fruit’s count, then morph into arcs through a tween that adjusts the arc’s inner and outer radii based on the rectangle’s dimensions. The visualization uses d3.csv, d3.layout.pie, d3.svg.arc, and custom color mapping per fruit, with SVG transitions and delays orchestrating the sequence.

Oct 3, 2016

Loading thumbnail…

Pie Explode

A pie chart of fruit counts from a CSV file explodes into separated slices when the page loads, with each category rendered as an individual SVG path. The visualization uses d3.layout.pie to compute slice geometry, d3.svg.arc to define the pie shape, and d3.scale.category20 for color encoding by fruit name. A transition with a 2-second duration and 500-millisecond delay animates the slices outward via a custom explode function that calculates translation offsets from each slice's midpoint angle. The data comes from the included fruit.csv, and the rendering relies on SVG with d3.v3.

Oct 1, 2016

Loading thumbnail…

Transition Between Three Views

The visualization demonstrates a smooth transition of a categorical fruit-count dataset between three chart types: a bar chart, a pie chart, and a donut chart. It starts with labeled bars, then animates each bar into a pie slice, and finally adjusts the inner radius to form a donut. The code uses D3.js v3 with SVG and custom tween functions on paths to interpolate geometric properties, while leveraging ordinal and linear scales for layout and category colors for encoding. The data is loaded from a CSV file.

Oct 1, 2016

Loading thumbnail…

Transition

The visualization demonstrates a multi-stage transition of fruit count data, first morphing circular bubbles into rectangular bars, then into a pie chart. It uses D3.js version 3.5.6 with SVG and animation via chained `transition()` calls, employing `d3.scale.ordinal` and `d3.scale.linear` for positioning. The data comes from `fruit.csv` with fruit names and counts. After five seconds, a `setTimeout` triggers a second transition where bars become pie slices using `d3.layout.pie` and `d3.svg.arc`, with y-axis removal and element replacement.

Oct 1, 2016

Loading thumbnail…

Bubble Chart

This bubble chart displays the count of different fruit types in a dataset using a pie chart layout with animated, exploding slices. Each slice is colored distinctly and rendered with SVG paths and a smooth transition. The visualization is built with D3 v3, using the `d3.layout.pie` layout and `d3.svg.arc` for arc paths, while the `transition` API animates the slices outward into a dramatic exploded effect. Data is loaded from a local CSV file, and the color palette comes from `d3.scale.category20`.

Sep 30, 2016