D

Di Cui

@cuidi1996·18 public vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart displays one week of temperature data in Celsius for various global cities, sourced from Data Canvas - Sense Your City. The visualization encodes time on the x-axis and temperature on the y-axis, with each city represented by a colored line using d3.curveBasis for smoothing. It employs d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with the schemeCategory10 palette, drawing axes via d3.axisBottom and d3.axisLeft. A custom colorLegend function renders the categorical legend, while the SVG rendering includes styled grid lines and titles.

Loading thumbnail…

practice15-Cars Scatter Plot

This visualization presents a scatter plot of automobile data from the UCI Machine Learning Repository's Auto MPG dataset. A dropdown menu allows users to select which data column is mapped to the x-axis, while the y-axis is fixed to display weight. The visualization is built using D3 v5, employing `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and `extent` to compute domain ranges. Each data point is rendered as a semi-transparent red circle via SVG, with configurable axis labels and title.

Loading thumbnail…

practice17-interactive filtering on a map

This interactive map displays global economic classifications as a choropleth, with each country colored by its economy type. A legend of color swatches allows users to click a category and instantly filter the map, highlighting matching countries while dimming others, and clicking again clears the filter. Built with D3.js v5, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render SVG paths from TopoJSON data, while `d3.scaleOrdinal` and `d3.schemeSpectral` define the color scale. Zooming via `d3.zoom` enables closer inspection of regions.

Loading thumbnail…

practice16-make a map

This practice builds a world map with D3.js using the Natural Earth projection via `geoNaturalEarth1` and `geoPath`, rendering country shapes as SVG paths colored by economic classification. It loads TopoJSON and TSV data from the world-atlas package, merges them with `loadAndProcessData`, and applies a sequential `scaleOrdinal` with `schemeSpectral` to map categories. A color legend is generated with `colorLegend`, and zoom interaction is enabled through `d3.zoom`.

Loading thumbnail…

General Update Pattern Special Cases

This example demonstrates two special cases of D3’s general update pattern: categorical color legends and quantitative size legends, both rendered as SVG groups. It uses `d3.scaleOrdinal` and `d3.scaleSqrt` to map fruit names and numeric values to visual encodings, with `selection.merge()` handling enter and update selections. The color legend shows circles with labels for apple, lemon, lime, and orange, while the size legend displays five tick marks with proportional radii. Data comes from hardcoded domains and ticks generated via `sizeScale.ticks()`.

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. It uses a left-to-right dendrogram layout, with each country shown as a text label at the leaf level. The code employs d3.tree and d3.hierarchy to compute the layout, d3.linkHorizontal for the curved connecting paths, and d3.zoom for panning and zooming the SVG canvas. Font size decreases with depth, and the data originates from a structured JSON file.

Loading thumbnail…

practice13 canvas

This example demonstrates fundamental DOM manipulation with D3.js by rendering a full-screen smiley face whose eyebrows move. It uses an SVG canvas, with D3 selections and the `arc` generator from the d3-shape module to construct facial features. The code appends a background rectangle and relies on D3 v5’s `select` and `attr` methods to style elements dynamically based on the browser’s client dimensions.

Loading thumbnail…

practice12 make a map

This example shows an interactive world map that uses D3.js to render countries as SVG paths from TopoJSON data. The map displays country boundaries and names, with countries colored light green and highlighted in red on hover. It uses d3.geoNaturalEarth1 for the map projection, d3.geoPath for path generation, and d3.zoom to enable panning and zooming. Country names are loaded from a TSV file and matched to map features via ISO codes. The code also fetches world-atlas TopoJSON data for the country geometry, demonstrating basic data loading and DOM manipulation with D3.

Loading thumbnail…

practice11--hover

A D3.js smiley face made of fruit-shaped circles demonstrates hover interactions, where each circle changes its stroke color when a fruit is selected and returns to normal when the mouse leaves. The visualization shows five apples that shrink, disappear, and transform into a lemon over time, with transitions animating radius and position changes. Using d3-selection, d3-scaleOrdinal, and transition.attr, the code binds data to circles, updates attributes via .merge(), and removes exiting elements with a collapsing radius animation.

Loading thumbnail…

practice10--click

This example shows a fruit bowl visualization where apples and lemons are rendered as colored circles, and clicking a fruit highlights it with a black stroke while updating a selection state. The code uses D3.js v5 with a data join pattern to bind fruit objects to SVG circles, applying ordinal scales for color and radius, and transitions to animate circles entering, exiting, and changing size. A timer sequence removes apples, replaces one with a lemon, and filters data to demonstrate dynamic updates. The interaction and rendering rely on `d3.select`, `scaleOrdinal`, and `transition` APIs.

Loading thumbnail…

practice7--area chart

This area chart visualizes world population by year, sourced from a World Population dataset. Using D3 v5, it renders an SVG path with an area generator and curveBasis for smooth filling, paired with scaleTime and scaleLinear axes. The chart includes formatted y-axis labels (e.g., "B" for billions), gridlines via tickSize, and styled title and axis text. Data is loaded from a CSV and parsed into date and numeric values for plotting.

Loading thumbnail…

practice8--update pattern

This example demonstrates the D3.js “update” pattern for animating changes to a data-driven visualization, using a fruit bowl of apples and lemons. The code uses `selection.selectAll().data()` with the `.enter()`, `.merge()`, and `.exit()` methods to handle newly added, updated, and removed circles, respectively. Animations are applied through `.transition().duration(1000)` to smoothly adjust circle radii and positions over time. The example uses `scaleOrdinal` for color and radius mapping, with a fixed SVG viewport and a `render()` function called at intervals to trigger updates such as eating, replacing, or filtering fruits.

Loading thumbnail…

practice5-line chart

This line chart visualizes temperature readings over a week in San Francisco, using a time-based x-axis and a linear y-axis for temperature. The chart includes labeled axes, grid lines, and a smooth curved line rendered with `d3.line()` and the `curveBasis` interpolation. The code loads CSV data via `d3.csv()`, applies `scaleTime` and `scaleLinear` for scaling, and builds axes with `axisBottom` and `axisLeft`. The SVG output is styled with CSS, featuring a maroon stroke for the path and a title, with data from the temperature-in-san-francisco dataset.

Loading thumbnail…

practice6--area chart

This visualization displays temperature readings throughout a week in San Francisco using a smooth, filled area chart. The chart’s x-axis represents time and the y-axis shows temperature, with data sourced from a CSV file. Built with D3 v5, the code employs `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `curveBasis` to render the shaded region as an SVG path. Axis labels and gridlines are generated using `d3.axisBottom` and `d3.axisLeft`, with styling applied via external CSS.

Loading thumbnail…

practice4-Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, using data from the UCI Machine Learning Repository's Auto MPG dataset. The D3.js v5 code loads the dataset, converts string values to numeric types, and maps the data points to SVG circles via the `scaleLinear` and `extent` functions. The axes, generated with `axisBottom` and `axisLeft`, include grid lines and custom labels for the x-axis (Horsepower) and y-axis (Weight), while the circles are styled with a semi-transparent red fill.

Loading thumbnail…

practice3- Making A Scatter Chart

This scatter chart displays the populations of the top 10 most populous countries, with circles positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v7’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the axes, with gridlines via `tickSize`. Data is loaded from a CSV file and rendered as SVG circles, with formatted tick labels and axis annotations.

Loading thumbnail…

practice2- Making A Bar Chart

A horizontal bar chart displays the populations of ten countries, with bars extending from a shared origin. The chart uses D3’s scaleBand for categorical y-axis positioning and scaleLinear for numeric x-axis scaling, rendering via SVG. Data is loaded from a CSV file and parsed with D3’s csv function. Axes, gridlines, and labels are generated using D3’s axisBottom and axisLeft, with custom tick formatting to abbreviate large numbers. The bars are visually styled via CSS, and the chart includes a title and an axis label.

Loading thumbnail…

practice1

This example shows a yellow smiley face with animated eyebrows that move up and down repeatedly. Rendered in SVG, it uses D3.js v5 to build the face from primitive shapes: a circle for the head, circles for the eyes, rectangles for the eyebrows, and a path created with the `arc` generator for the mouth. The eyebrow animation relies on chained `transition().duration()` calls to toggle the group’s vertical position. The code explicitly selects the SVG element and sets attributes like `cx`, `r`, and `x` to define the layout.