pandeykriti

汇总

This dashboard aggregates four coordinated views of CDC ILINet flu surveillance data. A line chart shows annual weekly trends by year, a choropleth map displays state-level averages, a bar chart ranks the top states, and a multi-line chart highlights those states’ seasonal patterns. Built with React and D3 (v5), it uses `d3.scaleOrdinal`, `d3.geoAlbersUsa` with `d3.geoPath`, and SVG for rendering. Hovering and clicking across views filters and highlights linked selections.

May 13, 2020

Making a bar Chart!

This example shows a horizontal bar chart of country populations. It uses D3.js v5 to load data from a CSV file and render SVG rectangles, with a linear scale for population values along the x-axis and a band scale for country names on the y-axis. The code demonstrates fundamental D3 DOM manipulation by selecting an SVG element, appending a group for margins, and binding data to rectangles.

Let's make a face with D3.js!

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, rendered as an SVG using D3.js. The eyebrows animate by moving up and down repeatedly through chained `transition().duration()` calls. The face is built with basic SVG shapes—circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth—all positioned within a centered `<g>` group using translation transforms.

Let's make a face with d3.js

This example constructs a simple cartoon face using D3.js version 5. It draws a yellow circular head with a black outline, positions two eyes with fixed spacing, and uses D3’s `arc()` generator to render a mouth-shaped path. The SVG elements are scaled and centered relative to the viewport’s width and height, with static attributes defining geometry. No data source is used; the visualization purely demonstrates basic D3 shape creation and coordinate placement.

Let's make a face with d3.js

This example constructs a simple cartoon face using D3.js version 5. It draws a yellow circular head with a black outline, positions two eyes with fixed spacing, and uses D3’s `arc()` generator to render a mouth-shaped path. The SVG elements are scaled and centered relative to the viewport’s width and height, with static attributes defining geometry. No data source is used; the visualization purely demonstrates basic D3 shape creation and coordinate placement.

Cars Report

This example shows a simple, manually authored cars report listing three vehicle entries with names and optional prices. The page uses plain HTML with an embedded `<style>` tag and an external stylesheet, `styles.css`, which sets the base font size. The report is rendered as a static unordered list, with no JavaScript, data loading, or interactive visualization libraries involved, relying instead on basic document markup for its display.

Apr 14, 2020

Cars Report

This example presents a report on cars, displaying its message in a large, preformatted text element. The visualization itself is minimal, showcasing the ability to render a title and text content. The code relies on a JavaScript build process, where `index.html` loads a pre-generated `bundle.js` file created by Rollup. It demonstrates, via an associated tutorial, how to structure data and logic using JavaScript objects and arrays, serving as a foundational example for programmatic content generation rather than a complex graphical chart.

Apr 14, 2020

React Starter

This example shows a minimal React application that renders a full-screen “Hello React!” message, demonstrating the basic setup for a React-based visualization gallery. It uses the `react` and `react-dom` production builds from unpkg to mount a functional `App` component into a root `div` via `ReactDOM.render`. The message is styled with CSS set to a large font size and centered alignment, with the logic contained entirely in an `index.js` file that imports React and ReactDOM.

Apr 14, 2020

Cars Report

This example displays the text “Hello HTML” centered on a plain white background, serving as a minimal React starter template. The page uses a large 13em font size to emphasize the literal HTML output, with the body styled for center alignment. Built with React and rendered through a barebones HTML page, the visualization demonstrates the simplest possible setup for a React-based data visualization project, showing only static text rather than interactive charts or data-driven graphics.

Cars Report

This example presents a text-based report of used cars, highlighting models priced under $2000. It parses a hard-coded JSON array of car objects using `JSON.parse`, then filters and formats the data with JavaScript’s array methods and a custom `formatCar` function. The resulting list is displayed in an HTML `<pre>` element by setting its `textContent` in React, rendering the final message directly in the browser.

React Starter

This example demonstrates a minimal React application that renders a large, centered message. It uses React and ReactDOM directly from unpkg CDNs to mount a component into a `#root` div, with styling applied via an embedded stylesheet. The code imports car data from a `cars` module, though the visualization behavior is not implemented; the current output is a static text element. The HTML file loads the production React libraries and a compiled `bundle.js`, but no rendering logic or data processing is visible in the provided files.

React Starter

This example shows a minimal React application that renders a full-screen “Hello React!” message, demonstrating the basic setup for a React-based visualization gallery. It uses the `react` and `react-dom` production builds from unpkg to mount a functional `App` component into a root `div` via `ReactDOM.render`. The message is styled with CSS set to a large font size and centered alignment, with the logic contained entirely in an `index.js` file that imports React and ReactDOM.