Skip to main content
Log in
E

emntd

@emntd·15 public vizzes

Loading thumbnail…

Let's make a Map!

A stylized world map from the World Atlas 50m dataset renders landmasses in light green with a dark blue sphere. Country names appear as tooltips when hovering. Built with D3.js and topojson, it uses the `geoNaturalEarth1` projection and `geoPath` for geometry, while the `zoom` interaction supports panning. A reduced TSV mapping links ISO codes to country names for the `title` elements.

Oct 21, 2019
Loading thumbnail…

Let's make a Map!

A stylized world map from the World Atlas 50m dataset renders landmasses in light green with a dark blue sphere. Country names appear as tooltips when hovering. Built with D3.js and topojson, it uses the `geoNaturalEarth1` projection and `geoPath` for geometry, while the `zoom` interaction supports panning. A reduced TSV mapping links ISO codes to country names for the `title` elements.

Oct 21, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example visualizes a world map by loading geographic data from the world-atlas TopoJSON file and rendering country boundaries as SVG paths using `d3.geoPath` and `geoMercator`. The code imports `select`, `json`, and `geoPath` from D3 v5, along with `feature` from TopoJSON to convert the TopoJSON topology into GeoJSON features. The map is drawn inside an SVG canvas with a width of 960 pixels and height of 500 pixels, though the visible output is limited to the console log of the parsed data.

Oct 21, 2019
Loading thumbnail…

Let's make a face with D3.js!

A bowl of fruit rendered as SVG circles demonstrates data joins with D3.js. The code uses `d3.scaleOrdinal` for color and radius, binding an array of fruit objects to `circle` elements via `selection.data`. After one second, `fruits.pop()` removes the last apple, triggering an exit transition; after two seconds, the third fruit’s type changes to lemon, updating its fill and size. The examples uses `selection.enter`, `merge`, and `exit` patterns to handle updates.

Oct 18, 2019
Loading thumbnail…

Let's make a face with D3.js!

Five pieces of fruit are shown as circles in an SVG, with apples in red and lemons in yellow, and the fruit repositions itself with a one-second transition whenever the data changes. Hovering over a fruit highlights it with a black outline. The example uses D3 v5’s `select`, `scaleOrdinal`, and `transition` APIs to build an animated, interactive bowl that removes or replaces fruit at timed intervals.

Oct 18, 2019
Loading thumbnail…

Let's make a face with D3.js!

Five pieces of fruit are shown as circles in an SVG, with apples in red and lemons in yellow, and the fruit repositions itself with a one-second transition whenever the data changes. Hovering over a fruit highlights it with a black outline. The example uses D3 v5’s `select`, `scaleOrdinal`, and `transition` APIs to build an animated, interactive bowl that removes or replaces fruit at timed intervals.

Oct 18, 2019
Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in a row before the viewer, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, and fruits are removed or changed over time to illustrate dynamic updates. Built with D3.js v5, the example uses `scaleOrdinal` for color and radius mappings, and `transition().duration()` to animate position, radius, and removal.

Oct 18, 2019
Loading thumbnail…

click to select!

A fruit bowl animation shows a row of apples that dynamically change through data updates, with click-to-select behavior implied by the title. The SVG visualization uses d3 v5 and a modular fruitBowl function with scaleOrdinal mappings for fruit color and radius. Timeout-driven state changes remove fruits, replace one apple with a lemon, and filter out another, while enter, update, and exit selections handle the transitions using selectAll and data joins.

Oct 18, 2019
Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl demonstrates a data join pattern in D3.js, rendering five apples as circles with red fills inside a rounded rect bowl on an SVG canvas. The example uses `d3.scaleOrdinal` to map fruit types to colors and radii, and `selection.merge()` to update circles and text labels in place. Over timed intervals, the code removes fruits, replaces one apple with a lemon, and filters out another, showing how enter, update, and exit selections handle changing data.

Oct 17, 2019
Loading thumbnail…

Let's make a face with D3.js!

A data-driven face built from fruit demonstrates D3.js data joins with `scaleOrdinal` color and radius scales. The example renders five apples as red circles via SVG, then removes one fruit and changes a second to a lemon using `selection.data`, `enter`, `merge`, and `exit`. `setTimeout` triggers these updates, showing how D3 v5 handles dynamic data changes in a static HTML page with d3-selection and scales.

Oct 17, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart shows the growth of world population over time, using a smooth filled area to emphasize the trend. The visualization is rendered as an SVG using D3 v5, with a time-scaled x-axis and linear y-axis. It loads CSV data from a VizHub dataset, parses years as dates, and constructs the area path using `d3.area` with `curveBasis`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes and a title.

Oct 16, 2019
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the populations of the ten most populous countries. It uses D3.js v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map data from a CSV file to SVG rectangles. The chart displays population values on the x-axis and country names on the y-axis, with a green fill applied to all bars via CSS.

Oct 16, 2019
Loading thumbnail…

Making a Bar Chart

This visualization shows a static bar chart of country populations based on data from `data.csv`. It demonstrates fundamental D3.js DOM manipulation by using `d3.select`, `d3.csv`, `d3.scaleLinear`, and `d3.max` to bind the dataset to SVG `rect` elements. The chart is rendered as an SVG, but the axes and labels are absent, and the bars are all fixed at 300 pixels wide and 300 pixels tall, indicating an incomplete or work-in-progress example. The code is built with D3 v5 and uses a `bundle.js` script.

Oct 9, 2019
Loading thumbnail…

Cars Report

This example generates a plain-text car report from a dataset of cars, filtering records based on a price threshold provided as a function argument. It imports car data from a local module and uses a custom `generateReport` function to build a formatted message, which is then displayed on the page by writing to an HTML element’s `textContent`. The visualization relies on standard JavaScript module imports and DOM manipulation, with no third-party libraries or rendering APIs involved. The report is presented as large monospaced text, offering a minimal, text-based alternative to graphical charts.

Oct 9, 2019
Loading thumbnail…

Cars Report

This example presents a text-based report of car data from a static JSON array. It uses array methods `filter` and `map` to select vehicles priced under $2900, formats each entry into a readable string with `formatCar`, and joins them with newline characters. The resulting message is displayed inside a `<pre>` element on an HTML page, styled with CSS imports for the Ubuntu font and a dark blue background. The code demonstrates basic ES6 module imports and the VizHub export mechanism.

Oct 9, 2019