Skip to main content
Log in
N

Nikkor

@Nikkor·30 public vizzes

Loading thumbnail…

Circles on a Map

This visualization shows world population by country using proportional circles on a natural Earth projection map, with circle area corresponding to 2018 population data from a UN dataset. Users can pan and zoom, while hovering reveals a country’s name and population. The code uses `d3.geoPath` with `topojson` for map features, `d3.scaleSqrt` for circle sizing, and `d3.zoom` for interaction. A size legend displays tick marks, and a color legend is also implemented, with SVG rendering throughout.

Sep 11, 2020
Loading thumbnail…

B.Toys Sales on JD.com Between July 1st to Sep 13th

This interactive scatter plot explores relationships among sales metrics for B.Toys products on JD.com between July 1st and September 13th, 2018. Users select any two numeric columns from the dataset—such as GMV, MSRP, net revenue rate, page visits, or conversion rate—to compare on the x- and y-axes via dropdown menus built with a custom `dropDownMenu` module. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to render animated, fading circles. Data comes from Rocabin Trade Co., Ltd’s daily GMV CSV file, loaded asynchronously with D3’s `csv` method.

Nov 23, 2018
Loading thumbnail…

B.Toys Sales: GMV v.s Net Renvenu Rate

This visualization shows the relationship between Gross Merchandise Value (GMV) and Net Revenue Rate for B.Toys products across different product bands, with an interactive date range slider that filters all three charts simultaneously. The main scatterplot displays GMV against net revenue rate, while a multi-series line chart tracks UV and UV_CVR over time, and a promo calendar uses a timeline chart to visualize promotional periods. The code uses d3.v5 with SVG rendering and animation, leveraging d3.scaleLinear, d3.scaleTime, d3.axisBottom, d3.axisLeft, and d3.drag for the slider interaction. Data is loaded from CSV files hosted on VizHub.

Nov 23, 2018
Loading thumbnail…

B.Toys Sales: GMV v.s Net Renvenu Rate

This interactive scatterplot visualizes B.Toys sales data, plotting each product's GMV against its Net Revenue Rate. Products are color-coded by their "band by click" category, with an interactive legend allowing users to filter the display by selecting specific bands. A date range picker enables filtering the underlying data, and a bar chart shows the average net run rate. The visualization uses D3 v5, loading CSV data and rendering as SVG. Key D3 APIs include `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `extent`.

Nov 23, 2018
Loading thumbnail…

Exports to Seven Countries with Menus

This interactive scatter plot displays the relationship between Gross Merchandise Value (GMV) and the actual supply rate for 108 B.toys products on JD.com, with each dot color-coded by sales performance band. Users can click on the color legend to highlight specific bands or hover over circles to see product names. The visualization implements custom D3 modules including `dropDownMenu`, `colorLegend`, and `scatterPlot`, leveraging D3 v5 APIs such as `scaleLinear`, `axisBottom`, and `transition` for animated rendering. Data is loaded from a CSV file and rendered as an SVG.

Nov 20, 2018
Loading thumbnail…

B.Toys Sales: Profit v.s Convert Ratio of Visits

This scatter plot shows the relationship between profit rate and convert ratio of visits for B.Toys sales on JD.com in July 2018. Each circle maps a product’s unit gross profit against its UV conversion rate. The visualization uses D3 v5 scales (scaleLinear), axes (axisLeft, axisBottom), and CSV data loading (csv). The SVG rendering applies a purple, semi-transparent fill to circles, with grid lines and labeled axes. Data comes from a daily GMV dataset provided for research purposes.

Nov 20, 2018
Loading thumbnail…

B.Toys Sales on JD.com Between July 1st to Sep 13th

This interactive scatter plot explores relationships among daily sales metrics for B.Toys products on JD.com from July 1 to September 13, 2018, using dropdown menus to select which variables to compare on the x- and y-axes. The visualization is built with D3 v5, using SVG for rendering and animated transitions (2000ms duration with staggered delays) to move circles between positions when the axis selection changes. Data points represent individual SKUs, with axes labelable by metrics like GMV, MSRP, page views, or conversion rates. The dataset comes from Rocabin Trade Co., Ltd, covering daily gross merchandise value and related performance indicators.

Nov 6, 2018
Loading thumbnail…

B.Toys Sales: GMV v.s Net Renvenu Rate

An interactive D3.js dashboard visualizes B.Toys sales, contrasting gross merchandise value (GMV) against the net revenue rate per product. A scatterplot uses `d3.scaleLinear` and a `d3.scaleOrdinal` color scale for product bands, with a clickable color legend that filters the chart. A multi-series line chart displays UV and UV_CVR metrics over time, animated via `transition().duration()`. A date-range slider, built with `d3.drag`, filters both visualizations using CSV data loaded via `d3.csv`.

Nov 2, 2018
Loading thumbnail…

B.Toys Sales: GMV v.s Net Renvenu Rate

This scatterplot explores the relationship between GMV and net revenue rate for B.Toys products sold on JD.com, with each dot representing an individual SKU. Products are color-coded by sales band categories, and hovering reveals product-specific details like name and GMV. Users can click the legend to filter points by band. Built with D3 v5, the visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring, rendering as SVG. Data comes from Rocabin Trade Co., Ltd.’s 2018 JD.com sales records.

Nov 1, 2018
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles enter as apples with a radius of zero, then grow into place while a black stroke marks clicked selections. Using d3 v5’s data join with object constancy, the fruitBowl module renders SVG circles and animates enter, update, and exit transitions via `transition().duration(1000)`. A sequential script eats apples and replaces one with a lemon, demonstrating ordinal color and radius scales. Clicking toggles a fruit’s selection state, re-rendering with updated strokes.

Nov 1, 2018
Loading thumbnail…

B.Toys Sales: GMV v.s Net Renvenu Rate

This scatter plot visualizes the relationship between GMV (Gross Merchandise Value) and Net Revenue Rate for 108 B.Toys products sold on JD.com, with each dot colored by product performance band (D through Z). Built with d3.v5 and SVG, it uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and native SVG `<title>` elements for hover tooltips showing product names. Users can click the custom color legend to filter points by band, dimming non-selected products via opacity changes. Data comes from a CSV file loaded with `d3.csv`, processed through custom functions `loadAndProcessData` and `scatterplot`.

Oct 9, 2018
Loading thumbnail…

B.Toys Sales: GMV v.s Actual Supply Rate

This interactive scatter plot visualizes the relationship between GMV (Gross Merchandise Value) and the actual supply rate for B.Toys products sold on JD.com between July 1 and September 13, 2018. Each circle represents a product, with the x-axis showing the actual supply rate and the y-axis showing the unit gross profit (GMV). The points are color-coded by a categorical band derived from click data, and a custom color legend allows users to click on a band to filter and highlight only the products in that category. The visualization is built with D3 version 5, rendering as an SVG, and includes a tooltip on each point that displays the product name when hovered. Data is loaded from a CSV file hosted on VizHub.

Oct 3, 2018
Loading thumbnail…

B.Toys Sales: GMV v.s Actual Supply Rate

This scatter plot explores the relationship between GMV and actual supply rate for B.Toys sales on JD.com from July 1 to September 13, 2018. Each circle represents a product, with its position determined by supply rate on the x-axis and GMV on the y-axis. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft with gridlines. Circles are rendered as SVG elements with semi-transparent purple fill, while axis labels and a title are added via SVG text elements.

Oct 3, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This interactive world map highlights countries by name on hover and changes their fill color when clicked, toggling between red and light green with a one-second transition. Built with D3 v5 and TopoJSON, it loads world-atlas geographic data, renders shapes using `d3.geoPath` with a Natural Earth projection, and includes a pan-and-zoom interaction via `d3.zoom`. Hover styling is defined in CSS, while click behavior is handled by appended SVG paths with `d3.select` and `transition().duration()`.

Oct 3, 2018
Loading thumbnail…

Marathons with Most Finishers in 2018(As of 9/11)

This horizontal bar chart ranks the top ten marathons by finisher count in 2018, with the Boston Marathon leading at 25,746 finishers and the Vancouver Marathon last at 3,758. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map finisher values to bar widths and race names to vertical bands. Data is loaded from a local CSV file via `csv()` and rendered as SVG rectangles in purple. The chart’s left margin is widened to accommodate long race names, and the source is attributed to findmymarathon.com.

Oct 2, 2018
Loading thumbnail…

Two Months B.Toys Sales on JD.com

This line chart displays daily sales data for B. Toys on JD.com from July 1 to September 13, 2018, plotting both Gross Merchandise Volume (GMV) and page views (PV) on dual y-axes. The purple GMV line and green PV line share a common time axis, with axis labels color-coded to match. Built with D3 v5, the visualization uses `scaleLinear`, `scaleTime`, `d3.line` with `curveBasis` smoothing, and generates axes via `axisLeft`, `axisRight`, and `axisBottom`. Data comes from a CSV file loaded with D3's `csv` method.

Sep 27, 2018
Loading thumbnail…

Two Months B.Toys Sales on JD.com -with annotation

Two lines show daily GMV and PV for B. Toys on JD.com from July to September 2018, with a purple GMV curve and a green PV curve sharing a time axis. The chart uses dual left and right y-scales via `d3.scaleLinear` and `d3.axisLeft`/`axisRight` to accommodate different value ranges. SVG paths are generated with `d3.line` and `curveBasis`, while an editable callout annotation, created with `d3-annotation`, marks a specific date and value. Data comes from a CSV file containing daily GMV and PV records, rendered with d3 v5.

Sep 26, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This visualization demonstrates several special cases of the general update pattern for nested elements, using D3.js to animate a bowl of fruit over time. It shows five apples inside a bowl, where individual elements undergo transitions: an apple changes into a lemon, a group is removed, and another group is repositioned. The code employs D3’s `transition` API with `.duration()` and `.attr()` methods to animate circle radii, fill colors, group transforms, and text labels, interacting with SVG elements including circles, rectangles, and text.

Sep 23, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive map of the world's countries, rendered as SVG paths that turn red on hover and display country names via tooltips. Pan and zoom navigation lets users explore the globe. Built with D3 v5, it uses `d3.geoPath` with the Natural Earth projection and `d3.zoom` for interaction, displaying data from the world-atlas package’s TSV and JSON files.

Sep 23, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Five apples in a bowl shrink and vanish when eaten, and a lemon substitutes for one apple, demonstrating D3's general update pattern with special cases. The example uses D3 v5’s `selectAll`, `enter`, `merge`, `exit`, and `transition` APIs to animate circle radii and text font sizes. A custom counter controls whether elements reappear after a removal, highlighting an atypical state where data updates do not fully reset visual properties. The SVG renders ordinal color and radius scales for fruit types.

Sep 20, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Three fruit replacement scenarios demonstrate the general update pattern in D3: adding, removing, and modifying elements. Animated circles and text labels transition between apples and lemons, while exit selections remove fruit from the bowl. Using `selection.enter`, `selection.merge`, and `selection.exit` with `transition.duration`, the SVG scene updates smoothly with `d3.scaleOrdinal` mapping fruit types to colors and radii.

Sep 20, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for enter, update, and exit selections. It shows a bowl of fruit where apples are eaten, replaced with lemons, and removed at timed intervals, using ordinal scales for color and radius based on fruit type. The code uses `d3.scaleOrdinal`, SVG circle and text elements, and merge operations to handle entering and updating nodes smoothly. Data is static in-memory JavaScript objects, rendered as styled SVG shapes.

Sep 20, 2018
Loading thumbnail…

Data Table Summary

This visualization displays a plain-text summary of a CSV file containing product data, showing the total number of rows, columns, and file size in kilobytes, followed by the first ten records as formatted JSON. The code uses D3 v5’s `select` and `csv` functions to fetch and parse the data, then appends `<pre>` elements to the page body. The dataset includes product names, prices, SKU numbers, and promotional details from an e‑commerce listing. The dark background with green monospaced text evokes a terminal aesthetic.

Sep 13, 2018
Loading thumbnail…

An Exmple for D3.scaleSequential

This example demonstrates how D3’s `scaleSequential` maps continuous numeric domains to color interpolators. It shows two rows of rectangles, each colored by a different sequential scale: one using `interpolateRdGy` and another using `interpolateReds`. The code uses `scaleSequential` with explicit domains and applies the resulting colors as SVG fill styles. A `scaleLinear` positions the rectangles horizontally, and black-outlined polygons mark a selected range. The visualization relies on D3 v5 and renders entirely as SVG.

Sep 12, 2018
Loading thumbnail…

Daily Price for V-tech in JD Flagsotre

This visualization displays raw metadata about the daily price data for V-tech toys in JD.com's flagship store, covering three months from June to August 2018. It prints the dataset’s row count, column count, file size in kilobytes, and the first 10 rows as JSON to the page. The code uses `d3.csv` from d3 v5 to load the data and `csvFormat` to calculate its size, then appends the summary and sample rows using `select` and `append` from d3. The styling is minimal, with a black background and green monospace text.

Sep 12, 2018
Loading thumbnail…

Daily Promotion and Sales of V-Tech Toys Tmall Flagstore

This visualization displays the daily promotion and sales data for V-Tech Toys on Tmall, showing rows of records from a CSV file with fields such as inventory, predicted volume, and promotion method. It uses D3 v5’s `csv` function to load the dataset, then appends text elements to the body to display the total row count, column count, and data size in kilobytes. The code also outputs the first ten rows as formatted JSON, rendered against a black background with green monospace text.

Sep 12, 2018
Loading thumbnail…

Daily Sales for B. Toys on JD

This example displays the structure of a daily sales dataset for B. Toys on JD.com in 2018, showing the row and column counts, file size in kilobytes, and a preview of the first ten rows. The visualization uses D3 v5’s `select` and `csv` to load the data and render the summary as plain text in a terminal-like interface with a black background and green monospace font. The code computes file size via `csvFormat` and displays the JSON-stringified data slice.

Sep 12, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example shows a stylized face built from SVG shapes in D3.js, with animated eyebrows and a mouth that subtly changes expression over time. The face is constructed using an ellipse, circles for the eyes and pupils, polylines for the eyebrows, and an arc-generated path for the mouth. The animation uses D3 transitions with a duration of 2000 milliseconds to move the eyebrow group vertically and adjust the mouth’s arc angles, demonstrating fundamental DOM manipulation with selection and append methods from D3 v5.

Sep 12, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate up and down. The code uses `d3.select` to target an SVG element, `svg.append` to construct geometric shapes like rectangles and arcs, and `transition().duration()` to create a looping eyebrow movement over two seconds. The face is rendered as a static SVG with a semi-transparent green rectangle, red-stroked eyes, and a mouth drawn via the `d3.arc` shape generator, all centered using SVG group transforms.

Sep 10, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiley face using D3.js v5, showing fundamental DOM manipulation with SVG shapes like circles, rectangles, and paths. The face's eyebrows animate by moving vertically and returning, using D3's `transition().duration()` to tween the `transform` attribute over two seconds. A yellow rectangle serves as the face, while the arc-based mouth uses D3's `arc()` generator for its path. The code directly selects and appends SVG elements, demonstrating basic D3 selection and attribute setting.

Sep 10, 2018