D

danhuijia

@danhuijia·21 public vizzes

Loading thumbnail…

Cheap Tricks for Interaction on World Map on D3.js!

This example demonstrates a geographic visualization of the world with orthographic projection, showing countries as interactive yellow shapes that turn red on hover. The map uses D3.js v5 with the `geoOrthographic` and `geoPath` functions to render country boundaries from the world-atlas TopoJSON and TSV data files, which provide geometry and country names. Interaction includes a zoom feature that transforms the map projection and hover effects that change fill color, with attributes managed through D3’s selection and event handling.

Loading thumbnail…

Choropleth Map with interacti filtering D3.js

This choropleth map visualizes global income groups, with countries colored according to a categorical scale. Users can click legend items to filter the map, dimming countries that do not match the selected category. The visualization is built with D3.js v5, using `geoNaturalEarth1` and `geoPath` for map projections and SVG paths for rendering. Data is loaded from the World Atlas TopoJSON and TSV datasets, with the color legend implemented as an interactive SVG component.

Loading thumbnail…

Choropleth Map with D3.js

This choropleth map visualizes global income groups using a color scale based on the Spectral scheme. The map is rendered with SVG paths generated by D3.js’s `geoPath` projection, and the world country boundaries come from the `world-atlas` TopoJSON dataset. Users can zoom and pan the map via the `zoom` event, and a color legend displays the ordinal scale’s categories. Data is loaded from the TSV file, merged with geographic features, and country names and income groups appear on hover via tooltips.

Loading thumbnail…

World Map on D3.js!

This example displays a world map rendered as an orthographic projection, with countries filled in yellow and the surrounding sphere in grey. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON data via `d3.json`, then uses `topojson.feature` to extract the features. The map is drawn with SVG paths using `d3.geoPath` and the `geoOrthographic` projection, with React managing the component structure. The code also demonstrates the `geoNaturalEarth1` projection as an alternative, though the orthographic view is active.

Loading thumbnail…

Bowl of fruit general Click to select.js!

A dynamic fruit bowl visualizes state changes in a D3 v5 and React application, showing apples and lemons as colored, scaled circles. The chart transitions fruit sizes and colors smoothly over time as items are removed or replaced. Clicking and hovering on circles selects them with a black stroke, using D3's data join and transition methods. The code employs `scaleOrdinal`, `selection.data`, and chained `transition` calls on SVG circles.

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit renders apples and lemons as colored circles (red and yellow) positioned along a horizontal line. Clicking a fruit selects it, highlighting the chosen circle with a black stroke. Built with React and D3.js, the example uses ordinal scales for color and radius mapping, with SVG circles and a click handler that updates state via `setSelectedFruit`.

Loading thumbnail…

Bowl of fruit general Click to select.js!

A dynamic fruit bowl visualization updates in real time as apples are eaten and replaced by lemons. Each fruit is rendered as an SVG circle with color and radius scales mapping fruit type to visual attributes. Users click circles to select them, which triggers a black stroke highlight. The code uses D3 v5's data join, ordinal scales, and transitions to animate circle entries, exits, and updates smoothly over one-second durations.

Loading thumbnail…

Bowl of fruit general update pattern.js!

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit, where apples are eaten and replaced by lemons over time. The visualization uses an SVG rendering with React and D3 v5, showing how enter, update, and exit selections work with `selection.merge()` to handle dynamic data changes. Circles represent fruits with color and radius scales mapping fruit types, while text labels update alongside them. The code uses `d3.select`, `d3.range`, and `scaleOrdinal` to manage the data-driven updates.

Loading thumbnail…

Bowl of fruit general update pattern.js!

This example demonstrates the D3 general update pattern using animated circles to represent a bowl of fruit. Apples and lemons appear as red and yellow circles of different radii, with items entering, exiting, and updating their type over time. The React-based implementation uses D3 v5’s `selectAll`, `.data()`, `.enter()`, `.merge()`, and `.exit()` methods alongside `.transition()` to smoothly animate position and size changes, driven by `Math.random()` IDs and a simple `range()` dataset.

Loading thumbnail…

P1 - Task 1

This chart displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects 2017. Bars are rendered as SVG rectangles, colored steelblue. The visualization uses D3.js (version 5.12) with its `select`, `csv`, `scaleLinear`, `max`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` modules for data binding, scaling, and plotting the axes, though the shown JavaScript focuses on a separate dynamic circle-updating example.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. Each smooth, colored line represents a different city’s temperature over time, with an ordinal color scale and a legend function defined in a separate module. The visualization uses D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `nest` to group data by city. The SVG rendering includes axis labels, a title, and gridlines styled via CSS.

Loading thumbnail…

Temperture and SA Line Chart

This line chart displays weekly temperature readings in San Francisco over time, using a smooth curve to connect data points. The visualization employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` for axes. The y-axis is labeled "Temperature" and the x-axis "Time," with a title "Week in SA." Data comes from a CSV file loaded via `csv()`, containing timestamp and temperature values. The SVG rendering includes a maroon stroke path with rounded joins, while grid lines and styled axis labels enhance readability.

Loading thumbnail…

World Population Area Chart

This area chart visualizes the global population from 1960 to 2015, plotting population on the x-axis and year on the y-axis, with the data sourced from a CSV file provided by VizHub. The chart uses a maroon area fill created by the d3.area generator with a curveBasis interpolation, anchoring the baseline to the bottom of the chart. It renders as an SVG and employs d3.scaleTime and d3.scaleLinear for the axes, along with d3.axisBottom and d3.axisLeft to display tick marks and labels.

Loading thumbnail…

Temperture and SA Line Chart

This area chart visualizes temperature data over a week in San Francisco, using a time-series line chart with a filled region. The D3 v5 code loads CSV data, maps timestamps to a time scale, and temperature to a linear scale, then renders the area with `d3.area` and `curveBasis`. The chart includes labeled axes with grid lines and a title, all drawn as SVG elements.

Loading thumbnail…

Temperture and SA Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with each circle representing a data point. The x-axis displays timestamps while the y-axis shows temperature values, and the title "Week in SA" appears at the top. The visualization loads data from a CSV file hosted on VizHub and uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render the SVG chart. Circles are styled with partial opacity to reveal overlapping points, and grid lines are drawn using tick marks on both axes.

Loading thumbnail…

Playing with a bar chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart uses horizontal bars, with countries labeled on the x-axis and population values on the y-axis. Built with D3 v5, it demonstrates customizing axes via `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, and renders as SVG. The population data is loaded from a CSV file and converted from strings to numbers using `csv` and a `forEach` loop. The chart includes a title and axis labels.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Built with D3 v5, it renders as an SVG and demonstrates axis customization using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The chart loads data from a CSV file, converts population strings to numbers, and positions bars with a band scale, showing country names on the y-axis and population values on the x-axis.

Loading thumbnail…

Cars Report

This example demonstrates a simple data report of cars, filtering a predefined JSON dataset to display vehicles under $2,000. It uses a simulated asynchronous data fetch to show a "Loading..." message before populating the page. The React-based code relies on JavaScript promises and string formatting to present each car's year, make, model, and price in a large, pre-formatted text element.

Loading thumbnail…

Lets make a face with D3.js!

This example presents a simple, animated face built entirely with D3.js v5 in a React framework. It shows how to construct facial features—eyes, eyebrows, and a mouth—from basic SVG shapes like circles, rectangles, and an arc path, all positioned within an SVG canvas. The code uses D3’s `select`, `arc`, and `transition` APIs to draw the elements and animate the eyebrows repeatedly up and down. The face is centered via a group translation, with eye spacing and brow offsets controlled by constants.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS influence visual styling, showing circles, rectangles, lines, and paths arranged in groups with varied fills, strokes, and transforms. The React-based code renders a single SVG canvas at 960 by 500 pixels, using inline attributes like `fill` and `stroke` alongside a CSS stylesheet to define colors, line widths, and join styles. It highlights how SVG presentation attributes and CSS rules layer together, with groups applying shared styling and coordinate translations to position elements across the scene.

Loading thumbnail…

HTML Cars Report

This example presents a static HTML page titled “Cars Report” that lists three identical 2012 Nissan Leaf entries as plain bullet points. The page uses basic HTML structure with a linked external stylesheet, `style.css`, which applies monospace font styling and highlights the first list item in blue via a `.highlighted` class. No JavaScript or data-binding libraries are involved; it simply demonstrates raw HTML and CSS rendering without any dynamic behavior or external data source.