H

HillKinsh

@Hillkinsh·18 public vizzes

Loading thumbnail…

color and size lengend

This example demonstrates two legends: a categorical color legend for fruits like apples and lemons, and a quantitative size legend for population data. The color legend uses `d3.scaleOrdinal` to assign fixed colors, while the size legend uses `d3.scaleSqrt` to map numeric ticks to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned via translation. The code uses `selection.selectAll` and `.merge` for incremental updates, and the size legend filters out the zero tick. The data source is a CSV listing country populations, though only the legend scales are visualized here.

Loading thumbnail…

Fork of world countries tree

This visualization displays a hierarchical tree of world countries organized by continent and subregion, with each country positioned as a leaf node. The layout uses a horizontal tree structure rendered as SVG paths with red links connecting parent and child nodes. The implementation loads country population data from a CSV file and hierarchical structure from JSON, then applies `d3.tree()` and `d3.hierarchy()` to compute node positions, while `d3.linkHorizontal()` generates the curved connecting paths.

Loading thumbnail…

world countries tree

This interactive tree diagram displays the hierarchical organization of world countries, grouped by continent and subregion, using a dataset from the UN (data.json). The visualization employs D3 v5’s `tree` layout and `hierarchy` function to compute node positions, with `linkHorizontal` drawing the connecting paths. Node labels are not rendered in this example; instead, a steelblue background rect is drawn, and the chart is sized to fill the viewport via `document.body.clientWidth/Height`. The underlying data is static JSON, while a separate CSV file provides population figures, though these are not currently linked or displayed.

Loading thumbnail…

地图的交互

This visualization displays a world map rendered with D3 v5 using the geoMercator projection and topojson data from the world-atlas package. Country boundaries are drawn as SVG paths, colored green with a red hover effect, and each country includes a title tooltip showing its name from the accompanying TSV file. The map supports interactive zooming and panning through d3.zoom, which applies a transform to the grouped SVG elements. Population data from a local CSV is loaded but not yet visualized, leaving the focus on the geographic interaction.

Loading thumbnail…

map of d3

This map of d3 displays the world’s countries as green, stroked polygons, using a Mercator projection. The data comes from the world-atlas GeoJSON file, which is loaded via d3.json and converted into geographic features with topojson’s feature function. The code uses d3.geoPath and d3.geoMercator to generate the SVG paths, while d3.select appends each country’s shape to the canvas. Population figures from the included data.csv are not visualized in this example.

Loading thumbnail…

Fork of click 的hover效果动画

This example demonstrates animated hover effects on a fruit bowl visualization, where circles represent fruits and change appearance when selected. It shows how enter, update, and exit selections work through D3’s data join, with transitions animating circle radii and positions over one second. The code uses D3 v5 APIs including `scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition.attr`. Hovering sets a selected fruit ID, triggering a black stroke on the active circle. Data updates are timed, removing fruits or changing types, with all rendering handled in SVG.

Loading thumbnail…

click 的选中效果动画

This example demonstrates the animated selection effect when clicking on circles in an SVG scene. Fruits are rendered as colored and sized circles that change appearance based on their type, and clicking a circle highlights it with a black stroke. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs, along with the custom `fruitBowl` component, which handles enter, update, and exit transitions via the `transition()` method over a 1000-millisecond duration. Data is generated randomly in JavaScript, while the underlying bar chart uses population data from `data.csv`.

Loading thumbnail…

click 的选中效果动画

Five fruit circles appear in a row, each clickable to select a black outline around the chosen fruit. The example animates data updates: removing a fruit shrinks it to zero, changing a fruit’s type switches its color and radius, and filtering deletes a circle. Built with D3 v5’s data join and `transition().duration()`, it uses `scaleOrdinal` for color and radius, and renders SVG circles with click handlers updating a `selectedFruit` state.

Loading thumbnail…

动画

The animation demonstrates a fruit bowl visualization where apples and lemons are added, removed, and transformed over time using D3’s data join pattern. It shows the enter, update, and exit selections as shapes transition between states. The code uses `scaleOrdinal` for color and radius mapping, SVG circles and text for rendering, and JavaScript `setTimeout` calls to trigger changes. Data is drawn from a static CSV file, though the animation itself relies on dynamic in-memory arrays.

Loading thumbnail…

动画

A D3.js animation demonstrates how bar charts update when data changes. Using SVG elements and the `fruitBowl` module, fruits are rendered as circles with ordinal color and radius scales, positioned via `attr("transform")`. The example transitions through three stages: removing the last fruit, changing the third fruit’s type from apple to lemon, and filtering out the second fruit, using `setTimeout` calls. It shows the enter, update, and exit pattern with `selectAll` and `data` joins, though transitions are commented out. Data comes from a static CSV containing country populations.

Loading thumbnail…

大黄脸

A yellow face graphic centered in an SVG canvas animates its eyebrows in a quick upward blink. The face is built from basic shapes: a large yellow circle, two small eye circles, rectangular eyebrows, and a mouth drawn as an arc using `d3.arc`. The code uses `d3.select`, `d3.append`, and `transition.attr` for the animation, with `scaleLinear` and `scaleBand` imported but not used. Static styling is applied via CSS, and no external data file is loaded.

Loading thumbnail…

world-population-by-year-2015

This example visualizes global population growth from 1960 to 2015 using an SVG area chart with red fill. The chart displays population on the y-axis and date on the x-axis, with axis labels and tick lines rendered via `axisLeft` and `axisBottom`. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `csv` to load and map the data, while a custom tick formatter converts population values to billions. The visualization also includes a title and subtle grid lines created through tick size adjustments.

Loading thumbnail…

线表

This visualization displays the temperature in San Francisco over time as a red area chart, with the title “top 10 population countries in the world” appearing above the plot. The SVG graphic uses d3.scaleTime and d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and the d3.area generator to create the filled path. Data is loaded via d3.csv from a remote dataset, with timestamps parsed as Date objects. Grid lines are drawn using negative tick sizes, and axis labels are added as SVG text elements.

Loading thumbnail…

旧金山热力图

This visualization displays temperature readings in San Francisco over time as a scatterplot, with each circle representing a daily measurement plotted against date and temperature axes. The chart includes axis labels, a title, and a grid-like appearance from extended tick lines. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `csv`, and `axisBottom`/`axisLeft` to load and render the data as SVG circles with semi-transparent steelblue styling, sourced from a CSV file hosted on VizHub.

Loading thumbnail…

散点图

This scatter plot visualizes the relationship between vehicle weight and cylinder count using data from the auto-mpg dataset. The visualization employs d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and renders data points as SVG circles with a steelblue fill. The chart includes axis labels for population and weight, plus a title, with tick formatting using d3.format to abbreviate large numbers. The code loads CSV data via d3.csv and positions circles using the scaled x and y values, with grid lines extending across the plot area.

Loading thumbnail…

自定义坐标轴

This example displays a horizontal bar chart of population data for several countries, with a custom-formatted x-axis. It uses D3 v5 scales (d3.scaleLinear, d3.scaleBand), axes (d3.axisLeft, d3.axisBottom), and the d3.csv loader to read from data.csv. The y-axis labels are stripped of their domain lines, and the x-axis tick format converts large numbers using d3.format with a custom replacement. Bars are rendered as SVG rectangles with a steelblue fill.

Loading thumbnail…

自定义坐标轴

This example shows horizontal bar charts ranking the top ten most populous countries, with a custom-styled axis and clear visual encoding of population size. Using d3.csv to load the data, it applies a linear scale for the x-axis and a band scale for the y-axis, with bars rendered as SVG rectangles. The code customizes the axes by removing default domain lines, adding a labeled axis title, and formatting tick labels with d3.format (converting values to billions). It also leverages d3.axisLeft and d3.axisBottom for tick generation and layout.

Loading thumbnail…

bar

A horizontal bar chart displays population counts for six countries, with bars scaled linearly and labeled by country name. The visualization loads data from a CSV file and renders it as SVG rectangles with steelblue fill. Built with D3 v5, it uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, appending axes and bars to a grouped SVG element within a 960×500 viewport.