ShuangjiaoHu

@ShuangjiaoHu·11 public vizzes

Multi-Series Line Chart-8/29

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year from a TSV file. Users can zoom by scrolling or dragging, with three colored temperature trends drawn as SVG paths using a basis curve. The code uses d3.tsv for data parsing, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal for color encoding. A d3.voronoi overlay enables hover interactions, while d3.zoom handles the pan-and-zoom functionality on the SVG.

Oct 1, 2018

Loading thumbnail…

Multi-Series Line Chart-8/29-4

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file. Three colored lines represent each city, with a legend label at the end of each line. Clicking a label toggles the opacity of its corresponding line, while hovering over a label temporarily highlights that line and dims the others. The chart uses d3.tsv for data parsing, d3.timeParse and d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, d3.schemeCategory10 for colors, and d3.line with d3.curveBasis for smooth line rendering.

Oct 1, 2018

Loading thumbnail…

Multi-Series Line Chart-8/29-4

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over the last year, loaded from a TSV file using d3.tsv. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with category10 for color encoding. Multiple d3.svg.line paths represent each city’s temperature trend, with axes rendered via d3.svg.axis. The visualization follows conventional margins and computes domains using d3.extent, d3.min, and d3.max, all rendered as SVG. The code is forked from mbostock’s original block. *Source: gist, author: ShuangjiaoHu, license: GPL-3.0.*

Oct 1, 2018

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, with each city’s trend encoded by color and labeled at the line’s end. The visualization uses D3 v4 to load data from a TSV file, parse dates with `d3.timeParse`, and scale both time and temperature via `d3.scaleTime` and `d3.scaleLinear`. Ordinal colors come from `d3.scaleOrdinal` with `d3.schemeCategory10`, while paths are drawn using `d3.line` with a basis curve, and axes are rendered through `d3.axisBottom` and `d3.axisLeft`.

Sep 30, 2018

Loading thumbnail…

Multi-Series Line Chart - 1

Daily average temperatures for New York, San Francisco, and Austin over one year are plotted as three colored lines in a multi-series line chart. The visualization uses the D3.js library, specifically `d3.tsv` to load and parse the data, `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeCategory10` for color encoding. SVG paths render each city’s line, with axes and labels drawn using `d3.axisBottom` and `d3.axisRight`. The y-axis is labeled in degrees Fahrenheit.

Sep 5, 2018

Loading thumbnail…

Multi-Series Line Chart - 4

A multi-series line chart displays the daily average temperatures for New York, San Francisco, and Austin over one year, sourced from a TSV file. Each city is encoded with a distinct color and its own line, with axis labels and temperature values in Fahrenheit. The visualization also highlights each series’ minimum and maximum temperature points using annotated circles. The code leverages D3 v4 APIs including `d3.tsv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.schemeCategory10`, `d3.line`, and `d3.axisBottom`/`d3.axisRight` to render the SVG chart.

Sep 5, 2018

Loading thumbnail…

Multi-Series Line Chart - 3

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over one year, with each city’s trend distinguished by color and labeled at its starting point. The data is loaded from a TSV file, parsed with `d3.tsv` and `d3.timeParse`, and rendered as SVG paths using `d3.line`. Axes are generated with `d3.axisBottom` and `d3.axisRight` on a time scale and linear scale, while colors come from `d3.scaleOrdinal(d3.schemeCategory10)`. Small circles mark each data point, and the y-axis labels temperatures in Fahrenheit.

Sep 5, 2018

Loading thumbnail…

Multi-Series Line Chart - 2

This chart displays daily average temperatures for New York, San Francisco, and Austin over a year, using a multi-series line chart. The data is loaded from a TSV file, with each city rendered as a separate colored line, and city labels positioned near the start of each line. The code uses D3 v4 APIs including `d3.tsv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and `d3.axisBottom` and `d3.axisRight` for the axes. The y-axis is placed on the right and labeled in Fahrenheit.

Sep 5, 2018

Loading thumbnail…

Letter Count Bar Chart

A bar chart displays the frequency of each letter in an input text file, updating dynamically as the user edits the text. The D3.js v4 code uses `d3.text` to load the file, `d3.map` and `countLetters` to count occurrences, and `d3.scaleLinear` and `d3.scaleBand` for axes. The SVG chart renders bars and axes, with a `keyup` event listener triggering redraws.

Aug 28, 2018

Loading thumbnail…

Letter Count Bar Chart

This interactive bar chart visualizes the frequency of each letter in the text of *Peter Piper*. The visualization loads a text file asynchronously using `d3.text`, counts letter occurrences with JavaScript, and renders the results as an SVG bar chart using D3.js v4. The chart updates dynamically with each keystroke in a textarea, utilizing `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. The code demonstrates D3’s enter/update/exit pattern for animated transitions between data states.

Aug 27, 2018

Loading thumbnail…

Letter Count Bar Chart

This interactive bar chart displays the frequency of each letter in a text file loaded asynchronously via `d3.text`. The visualization updates in real time as users type into a textarea, triggering a redraw of the SVG bars through a `keyup` event. Letter counts are computed client-side with a `d3.map`, while vertical spacing uses `d3.scaleLinear` and horizontal categories use `d3.scaleBand`. The chart renders its axes with `d3.axisBottom` and `d3.axisRight`, and includes SVG animation for enter/update transitions.

Aug 24, 2018