L

Lex

@lexchenzhang·38 public vizzes

Loading thumbnail…

Affection Type Unknown Map

This map of Chinese provinces visualizes the number of survey responses with an unknown affection type, using red circles sized by `d3.scaleSqrt` and positioned with `d3.geoCentroid` and the `d3.geoMercator` projection. Province borders are drawn as SVG paths from a TopoJSON file. Each circle’s radius encodes the `Unknown` column from a CSV dataset, joined to the map features via province ID. A square-root size scale maps values from 0 to 500 into radii between 0 and 20 pixels. The visualization uses `d3.geoPath` for rendering geographic features and includes a legend with circles and tick labels generated by a custom `sizeLengend` function.

Loading thumbnail…

Affection Type Relative Map

This map of China visualizes the relative frequency of “Relative” as an affection type by province, using circles sized with a d3.scaleSqrt and positioned via d3.geoCentroid. The choropleth-style province paths are colored with d3.scaleOrdinal, and province names are shown via tooltips. The code loads CSV data and TopoJSON geometry, then applies a d3.geoMercator projection with d3.geoPath to render the SVG. A custom size legend is drawn with D3 scales and formatting.

Loading thumbnail…

Affection Type Travel Map

This map visualizes travel-related affection types across Chinese provinces, using circle size overlaid on geographic regions to represent the number of travel records per province. The choropleth-style fills assign each province a categorical color based on its ID. Built with D3 v5, the visualization loads CSV data and TopoJSON geometry, then projects the map using `d3.geoMercator` and renders paths with `d3.geoPath`. Circle radii derive from a square-root scale, and a custom legend component displays tick values with formatted labels.

Loading thumbnail…

Affection Type Social Map

A choropleth map of China displays each province colored by category, overlaid with circles sized by social affection values using a square-root scale. The map uses `d3.geoMercator` projection and `d3.geoPath` to render province boundaries from TopoJSON data, while CSV data is merged with geographic features. A custom legend built with `d3.scaleSqrt` and `sizeLengend` shows circle radius mappings. Hovering highlights provinces, and the SVG rendering uses D3 v5 with `d3.csv` and `d3.json` for data loading.

Loading thumbnail…

Cost Analysis

The visualization compares one-year versus ten-year costs for two job roles, shown as a pair of side-by-side pie charts. It uses D3 v5’s `d3.pie` and `d3.arc` to generate the slices, with `d3.scaleOrdinal` assigning categorical colors. Data is loaded from two separate CSV files via `d3.csv`, and both charts are rendered as SVG inside a shared `<svg>` container. The title “one year cost vs ten years” and dollar-value labels make the quantitative comparison explicit.

Loading thumbnail…

Five Ring with D3.js!

Five interlocking Olympic-style rings are drawn as partially filled circular arcs, each rendered in a distinct color, and arranged in two staggered rows against a plain white background. The D3.js v5 code constructs each ring using the `d3.arc` generator, specifying inner and outer radii and a full 360-degree angle sweep, then applies SVG `path` elements with black strokes and colored fills. The rings are positioned via nested `g` groups and `translate` transforms, with the author manually laying out the five circles. The visualization is built with the D3.js library, rendering to SVG, and the source is authored by lexchenzhang.

Loading thumbnail…

Customizing Axes

This example presents a custom-designed donut chart depicting dietary composition, with a large title label and clearly distinguished slices for food categories. The chart renders categorical data from a CSV file using an SVG canvas. The visualization uses D3 v5 to generate pie arcs with `d3.pie` and `d3.arc`, applies an ordinal color scale from `d3.scaleOrdinal` with `d3.schemeCategory10`, and adds labels with values and percentages via `tspan` elements. Axis customization is minimal, focusing instead on the chart’s illustrative styling and annotation.

Loading thumbnail…

Infection Type Chart

This stacked bar chart displays COVID-19 infection cases across Chinese provinces, broken down by transmission type: public transit, relative, social, and unknown. The visualization uses d3.layout.stack to stack the data series, with d3.scale.ordinal for the x-axis and d3.scale.linear for the y-axis. A form allows switching between absolute case counts and percentage-normalized views via stack.offset("expand"), with smooth transitions on the bars and axis. Hovering highlights individual segments using SVG opacity changes, and a custom legend is drawn manually.

Loading thumbnail…

Melting Data for Multiple Lines

Four line charts trace the cumulative counts of COVID-19 exposure categories—travel to Hubei, relative contact, social contact, and public transit—over time. The visualization uses D3 v4 with an SVG renderer, loading data from a CSV and melting it via `d3.nest` to group values by category. A shared ordinal `colorScale` assigns distinct hues to each line, while a custom `colorLegend` component displays the color-to-category mapping with circles and text. The axes are built with `d3.axisBottom` and `d3.axisLeft`, and the lines are drawn as paths using `d3.line`.

Loading thumbnail…

Radial Tree

A radial tree displays a hierarchical dataset of world countries, branching outward from a central root with nodes arranged by depth. The visualization supports panning and zooming to explore the structure. Built with D3 v4, it uses `d3.stratify` to parse the data, `d3.tree()` with a radial layout, and `d3.linkRadial` for curved links. Node labels rotate based on depth and angle, with font sizes decreasing for deeper levels. The scene is rendered as SVG within a fixed-size viewport.

Loading thumbnail…

汇总

This interactive dashboard visualizes CDC ILINet flu surveillance data across four synchronized panels: a yearly line chart, a choropleth map of state averages, a bar chart of top states, and a focused line chart for selected states. Built with React and D3 v5, it uses d3.scaleBand, d3.scaleLinear, d3.scaleOrdinal, and d3.scaleSequential for scales, along with d3.geoAlbersUsa and d3.geoPath for map rendering. Hovering or clicking a year updates the map, while state selections highlight corresponding bars and curves.

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays monthly air quality measurements for PM2.5 and PM10 particulates in London from 2010 to 2018, using a dropdown menu to switch between different pollutant metrics. Multiple colored lines represent individual years, with a color legend distinguishing each annual series. The SVG chart uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render the paths, while d3-transition animates updates. Data comes from the Kings College London Air Quality Dataset via the London Datastore, loaded as CSV using d3.csv.

Loading thumbnail…

Line Chart Template

This example plots daily COVID-19 case counts in Hubei province over time as a smooth, maroon line. The chart uses a time-scaled x-axis for dates and a linear y-axis for case numbers, with gridlines and labeled axes for clarity. Built with D3 v5, it loads data from a CSV file using `d3.csv`, scales it with `scaleTime` and `scaleLinear`, and renders the line via the `d3.line` generator with a `curveBasis` interpolation. The visualization is drawn as SVG elements, including axes, a title, and the line path.

Loading thumbnail…

Sunkey Test

This example visualizes COVID-19 transmission pathways as a Sankey diagram, showing flows from a central transmission node to categories like public transit, social contacts, and travel-related locations. The diagram uses draggable nodes and links with stroke widths proportional to flow values, with labels indicating percentages. Built with D3 v4, it employs the `d3.sankey` plugin to compute the layout, renders nodes as SVG rectangles, and uses `d3.drag` for interactive repositioning. Data comes from a local JSON file containing nodes and links, with color mapping via `d3.scaleOrdinal`.

Loading thumbnail…

Scatter Plot

This scatter plot ranks the world’s most populous countries along a horizontal population axis, with each country positioned vertically by name on an ordinal scale. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Population values from `data.csv` are multiplied by 1,000 and formatted with `d3.format` using ‘.3s’ to display abbreviations like “B” for billions. Gridlines and axis labels are styled via CSS, showing the top 10 countries by size.

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays a multiple line plot of air quality data, allowing users to compare trends across different pollutants via a dropdown menu. The chart plots daily values for each pollutant across time, with lines colored by category. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `nest`, and `line` to generate smooth curves, while a custom `dropdownMenu` component handles user selection. The data comes from the London Datastore, and the visualization updates dynamically with animated transitions on the SVG paths.

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes CO2 emissions over time in gigatons per year, using data from a CSV file. It shows emission levels for four categories: Hubei, relative, social, and public, with the total represented as stacked areas. The visualization is built with D3 v4 and rendered as an SVG, using APIs such as `d3.stack()`, `d3.area()`, `d3.axisBottom()`, and `d3.axisLeft()` to construct the chart. The `d3-area-label` library positions text labels within each area, while a color scale from `d3-scale-chromatic` distinguishes the categories. The chart updates responsively to the window size.

Loading thumbnail…

RADIAL TREE Template

This radial tree visualization displays a hierarchical view of world countries, organized by continent and subregion. It shows the structure of geographic data, from the "World" root down to individual countries, with text labels positioned radially around the center. The visualization uses D3.js v4, specifically the `d3.cluster()` layout algorithm and `d3.zoom()` for pan and zoom interactions, rendering as SVG. Text size scales with depth using `d3.scaleSqrt()`, and the data is loaded via `d3.json()` from a static JSON file.

Loading thumbnail…

Province Data Compare

The visualization compares case numbers across Chinese provinces using a grouped bar chart, with bars representing "OurData" and "ActrualData" from a JSON dataset. It renders SVG bars that animate upward on load, while axes and legend fade in sequentially. Built with D3 v3, it uses ordinal scales for categorical positioning, linear scaling for values, and transitions to animate bar heights and element opacity. Hover interactions darken bar colors, and the chart includes rotated x-axis labels for province names.

Loading thumbnail…

Smoothed D3.js Radar Chart

This example shows a smoothed radar chart comparing multiple entities across four axes, with values for hospital metrics and product attributes. The visualization uses D3.js version 3.5.6 to render an SVG with seven concentric grid levels, radial axes, and glowing area blobs that represent each data series. The chart applies a cardinal-closed interpolation for smooth blob outlines, includes a color scale for series distinction, and adds a glow filter via SVG defs. The legend and tooltip appear in the interface, with animated rendering handled through React starter code.

Loading thumbnail…

Travel HuBei Distribution Chart

This chart displays the distribution of travel history among COVID-19 cases across Chinese provinces, using stacked horizontal bars to compare counts of patients with and without travel history. Users can toggle between raw counts and percentage-normalized views, which triggers animated transitions that rescale the axes and recalculate bar heights. The visualization is built with D3.js version 3.5.6, utilizing the `d3.layout.stack` API for stacking, `d3.svg.axis` for axes, and SVG for rendering the interactive chart.

Loading thumbnail…

Untitled

A force-directed network diagram displays character relationships from the novel Les Misérables, with nodes colored by group and link thickness scaled by connection value. Built with React and d3.v4, the visualization uses d3.forceSimulation with link, charge, and center forces to position nodes in SVG space. The code leverages d3.scaleOrdinal for categorical colors, d3.drag for interactive node movement, and loads data from a local miserables.json file. Labels appear beside each node, and the simulation updates positions on each tick.

Loading thumbnail…

Multi Chart

This multi-chart visualization explores an MRI and Alzheimer’s dataset from OASIS, using four scatter plots to examine relationships between brain volume, dementia severity, education, age, and gender. Each plot encodes variables through position, color, and size, highlighting patterns such as the inverse relationship between estimated total intracranial volume and atlas scaling factor, and the association of dementia with older age and lower brain volume. Built with the vega-lite-api on D3 v5, the charts render as SVG and include interactive tooltips via vega-tooltip, with data loaded from a CSV file.

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart visualizes gender distribution across Chinese provinces, with controls to toggle between raw counts and percentage-of-total values. The visualization uses D3.js v3, loading province and gender data from CSV files and animating transitions between the two display modes via `transition()` calls. The chart resets the stack layout's offset between "zero" and "expand" to switch counting methods, while axis tick formats change accordingly. A custom legend maps categorical colors to gender segments, and hover effects reduce rectangle opacity for emphasis.

Loading thumbnail…

Age Distribution Chart

This interactive stacked bar chart displays age distributions across provinces, rendered with SVG and animation via D3.js (version 3.5.6). Users can toggle between raw counts and percentage of total using radio buttons, which triggers transitions recalculating the stack layout with `d3.layout.stack()` and updating the y-axis tick format. The chart reads from data3.csv and uses `d3.scale.ordinal()` for the x-axis, category20 colors for age bands, and a custom tooltip on hover.

Loading thumbnail…

Tree Chart Template

This tree chart template visualizes hierarchical data about individuals linked to regions, using orange circular nodes connected by grey horizontal links. The layout applies the `d3.tree()` and `d3.hierarchy()` APIs to structure the JSON data, while `d3.linkHorizontal()` generates the curved paths. Text labels with font sizes decreasing by depth accompany each node, and circles shrink with tree level. The SVG rendering fills the viewport, with styling applied via CSS classes for strokes and fills.

Loading thumbnail…

Stack Chart Template

This stacked bar chart visualizes deaths from various illnesses across different causes, with each bar segmented by age ranges from 0-27 days to 70+ years. The chart uses D3.js v3 layout stack, ordinal and linear scales, and SVG rendering with transitions. Users can toggle between raw counts and percentage view using radio buttons, which triggers animated transitions via `transition()` and `attrTween`. Data comes from WHO cause-of-death statistics for African countries, with tooltips providing additional detail on hover.

Loading thumbnail…

Chinese Map Template

This map of China displays province-level case counts using a bubble chart overlay. Each province is colored with a categorical scheme, and red circles sized by a square-root scale represent the number of cases per region. The visualization uses D3’s geoMercator projection, geoPath for drawing boundaries, and geoCentroid to position circles. Data comes from a local CSV joined with TopoJSON province geometries, with an interactive hover effect highlighting provinces.

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries as a stylized green landmass on a blue sphere, using a natural Earth projection. It renders with D3’s `geoPath` and `geoNaturalEarth1` projection onto an SVG, powered by TopoJSON world-atlas data. Hovering highlights a country in red, while a tooltip shows the country name from a TSV lookup. Pan and zoom are enabled via `d3.zoom`.

Loading thumbnail…

Color and Size Legends

The example shows two legends for mapping data to visual encodings: one for color using ordinal categories and one for size using a square-root scale. It renders SVG elements via D3 v5, with the color legend displaying discrete fruit names mapped to distinct hues, while the size legend displays a reversed set of numeric ticks with proportional circle radii. Reusable functions `colorLengend` and `sizeLengend` manage enter, update, and exit selections for the legends.

Loading thumbnail…

FruitBowl Example

This example shows a bowl of fruit rendered as SVG circles with a steelBlue bowl, where apples and lemons are distinguished by color (red vs. yellow) and radius (50 vs. 30). The fruits are placed horizontally using a computed x-position and animated over time: a fruit is removed after one second, an apple turns into a lemon after two seconds, and another fruit is filtered out after three seconds. The code uses the d3.v5 select API for DOM selection, scaleOrdinal for color and radius mapping, and merge/exit operations from the d3 data-join pattern to handle incremental updates to the scene.

Loading thumbnail…

FruitBowl Example

Five circles representing apples appear in a row, then transition through a sequence of updates: one fruit is removed, a middle apple changes into a lemon, and another circle exits, all with smooth one-second animations. The example uses D3 v5 with `scaleOrdinal` for color and radius mapping, plus `selection.enter`, `merge`, and `exit` with `transition` and `attr` to animate circle positions and sizes. Data is generated with `range` and `Math.random` IDs, rendered as SVG in a fixed 960×500 viewport.

Loading thumbnail…

Scatter Plot Of Comfirmation

This scatter plot visualizes the daily count of confirmed cases over time, with each circle representing a data point from the loaded CSV file. The y-axis is labeled "SuspectedCount," while the title refers to "SuspectedCount," suggesting a possible mislabeling. The visualization uses d3.scaleTime and d3.scaleLinear for axis scaling, d3.extent for domain calculation, and renders circles via SVG appended by d3.select and selection.enter. Axis labels and titles are added via d3.axisLeft and d3.axisBottom, with the code also defining a d3.line generator (commented out) for a potential trend line.

Loading thumbnail…

Area Chart Template

This area chart template visualizes world population growth over time, with time on the x-axis and population on the y-axis. The chart is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, and the `area` generator with `curveBasis` to create a smooth filled path. The y-axis uses tick formatting to abbreviate large numbers with "B" for billions, while both axes include custom labels. The data comes from a CSV file loaded via `d3.csv`, and the visualization includes gridlines and styled tick marks for readability.

Loading thumbnail…

Scatter Plot Template

This scatter plot displays temperature readings over time for San Francisco, with each circle representing a data point. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions, while d3.axisLeft and d3.axisBottom generate the labeled axes with grid lines. Data is loaded as CSV via d3.csv and converted to Date and numeric types before rendering as semi-transparent steelblue circles. The chart includes custom axis labels and a title, all drawn as SVG elements within a fixed-width container.

Loading thumbnail…

Scatter Plot Ex

This scatter plot displays the relationship between miles per gallon and horsepower for a dataset of automobiles, with each vehicle represented as a translucent steelblue circle. The visualization uses D3.js version 5 with SVG rendering, employing `d3.scaleLinear` with `d3.extent` for domain scaling and `d3.axisLeft`/`d3.axisBottom` to generate axes with gridlines. Data is loaded asynchronously from a CSV file via `d3.csv` and coerced to numeric values before rendering. The chart includes formatted tick labels and custom axis and title text, though placeholder labels ("XXXXX") remain in the current implementation.

Loading thumbnail…

Making a Bar Chart

This bar chart displays population figures for a set of countries, with horizontal bars ordered by country name along the y-axis and population magnitude along the x-axis. The visualization uses D3 v5’s `csv` loader to parse the data, `scaleLinear` and `scaleBand` to map values, and `axisLeft` and `axisBottom` to render axes. Population values are multiplied by 1,000 after loading, and bars are drawn as SVG rectangles filled with steel blue.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes and an arc-shaped smile forms a simple cartoon face. The example uses D3.js v5 to append SVG circles for the head and eyes, and an `arc` generator to draw the mouth as a path. The face is centered within a 960×500 SVG canvas, with the mouth positioned using a translated group. The code relies on D3's `select` and `arc` imports, reading the SVG dimensions directly from its attributes.